7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西。
而根据元素的特效,其盒模型的特效也不同,下面是一些总结:
1.块级元素(区块)
所谓块级元素,就是能够设置元素尺寸、有隔离其他元素功能的元素、比如<div>、<p>等分组元素
2.行内元素(内联)
所谓行内元素,是不能够设置元素尺寸的,它只能自适应内容、无法隔离其他元素,其他元素会紧跟其后。比如<span>、<b>等文本元素。
3.行内-块元素(内联块)
所谓行内-块元素,可以设置元素尺寸,但无法隔离其他元素。比如<img>。
4.隐藏元素
设置了隐藏属性的元素。
明白了这些分离以后,就可以进行相应的属性的学习了,其实这些属性可以看成是对盒子的操作。
一.元素尺寸
元素尺寸的设置,说白了就是对盒子大小的设置,按照上面的分类的解释,对行内元素无效,有以下的属性可用:
属性 | 值 | 说明 | CSS 版本 |
width | auto、长度值或百分比 | 设置元素的宽度 | 1 |
height | auto、长度值或百分比 | 设置元素的高度 | 1 |
min-width | auto、长度值或百分比 | 设置元素最小宽度 | 2 |
min-height | auto、长度值或百分比 | 设置元素最小高度 | 2 |
max-width | auto、长度值或百分比 | 设置元素最大宽度 | 2 |
max-height | auto、长度值或百分比 | 设置元素最大高度 | 2 |
div {
width: 200px;
height: 200px;
}
解释:设置元素的固定尺寸。
div {
min-width: 100px;
min-height: 100px;
max-width: 300px;
max-height: 300px;
}
解释:这一组主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它最大和最小的值。
div {
width: auto;
height: auto;
}
解释:auto 是默认值(),width 在 auto 下是 100%的值;height 在 auto 下是自适应。
<div id="a">
<div id="b">scolia</div>
</div>
#a {
background: silver;
width: 200px;
height: 200px;
} #b {
background: gray;
width: 80%;
height: 80%;
}
解释:百分比就是相对于父元素长度来衡定的。
注意:为什么元素的大小是用宽和高表示,而不是我们熟悉的长和宽呢?因为我们的网页是在屏幕里显示的,而最初没有移动设备的时候,显示器都是放在桌面上的,可以看作将平面立了起来。所以就变成了用高和宽来表示了。
二.元素内边距
CSS 盒模型中可以设置元素内部边缘填充空白的大小,我们称为内边距。
属性 | 值 | 说明 | CSS 版本 |
padding-top | 长度值或百分比 | 设置顶部内边距 | 1 |
padding-bottom | 长度值或百分比 | 设置底部内边距 | 1 |
padding-left | 长度值或百分比 | 设置左边内边距 | 1 |
padding-right | 长度值或百分比 | 设置右边内边距 | 1 |
padding | 1 ~ 4 个长度值或百分比 | 简写属性 | 1 |
可以分开设置:
div {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
也是可以用简写形式:
div {
padding: 10px 10px 10px 10px;
}
四个值的时候代表按顺序设置上、右、下、左,也就是按逆时针方向。
div {
padding: 10px 50px 200px;
}
三个值代表按顺序设置上、左右、下,即左右合并。
div {
padding: 10px 20px;
}
两个值代表按顺序设置上下、左右。
div {
padding: 10px;
}
一个值,代表上下左右都设置为这个值。
注意:内边距的设置其实就是向盒子里面填充东西,会使盒子变大。如果同时设置了背景颜色,内边距越大,背景颜色的面积越大。
另外内边距比较特别的是,对于内联元素也有作用,但是一般也用不到这个特性,了解一下就好。
三.元素外边距
CSS 盒模型中可以设置元素外部边缘填充空白的大小,我们称为外边距。其实也就是盒子搬开,增加其间隔。和内边距不同,外边距不会改变盒子的大小。
有下面属性可供选择:
属性 | 值 | 说明 | CSS 版本 |
margin-top | 长度值或百分比 | 设置顶部内边距 | 1 |
margin-bottom | 长度值或百分比 | 设置底部内边距 | 1 |
margin-left | 长度值或百分比 | 设置左边内边距 | 1 |
margin-right | 长度值或百分比 | 设置右边内边距 | 1 |
margin | 1 ~ 4 长度值或百分比 | 简写属性 | 1 |
注意:其使用特性和外边距一样,这里就不再重复说明。
四.处理溢出
当设置了元素固定尺寸且内容过大时,就会出现溢出的问题。其实就是我们规定了盒子的大小以后,要装的东西太多,而盒子又装不下时,东西就会满出来。而满出来的行为是怎么样的,我们可以进行设置。
溢出主要朝两个方向:右侧和底部。我们可以通过 overflow 系列样式来控制它。
属性 | 值 | 说明 | CSS 版本 |
overflow-x | 溢出值 | 设置水平方向的溢出 | 3 |
overflow-y | 溢出值 | 设置垂直方向的溢出 | 3 |
overflow | 溢出值 | 简写属性 | 2 |
溢出处理主要有四种处理值:
值 | 说明 |
auto | 浏览器自行处理溢出内容。如果有溢出内容,就显示滚动条,否则就不显示滚动条 |
hidden | 如果有溢出的内容,直接剪掉 |
scroll | 不管是否溢出,都会出现滚动条。但不同平台和浏览器显示方式不同 |
visible | 默认值,不管是否溢出,都显示内容 |
div {
overflow-x: auto;
}
总结:可以看出溢出处理的逻辑是,先确定从溢出的方向,再确定对溢出的部分怎么处理。
五.元素的可见性
我们在按特性对元素分类的时候,还剩下一个隐藏元素没有解释清楚,所谓的设置了隐藏属性的元素中的隐藏属性就是我们接下来要说的。
属性 | 值 | 说明 | css版本 |
visibility | visible | 默认值,元素在页面上可见 | 2 |
hidden | 元素不可见,但会占据空间 | 2 | |
collapse | 元素不可见,隐藏表格的行与列,如果不是表格,则和hidden一样 | 2 |
div {
visibility: hidden;
}
解释:设置元素隐藏,但占位,也就是该元素的分组效果依然会存在。
table tr:first-child {
visibility: collapse;
};
解释:隐藏表格的行或列,但不占位,支持度一般。
六.元素类型转换
我们按元素的特性对其进行了分类,但其实可以使其转换,从而实现别的元素的特性。
属性 | 值 | 说明 | CSS 版本 |
display | block | 盒子为块级元素 | 1 |
inline | 盒子为行内元素 | 1 | |
inline-block | 盒子为行内-块元素 | 2 | |
none | 盒子不可见,不占位 | 1 |
span {
background: silver;
width: 200px;
height: 200px;
display: block;
}
解释:将行内元素转成块级元素,原来无效的属性也可以使用了,其他就不再演示了。
七.元素的浮动
我们一直在二维空间中设置元素的盒模型,但其实可以将元素向上浮动一层,注意是一层。
属性 | 值 | 说明 | CSS 版本 |
float | left | 浮动元素靠左 | 1 |
right | 浮动元素靠右 | 1 | |
none | 禁用浮动 | 1 |
那么,上浮一层是什么意思?
这就需要一定的空间思维能力的,如果我们将同一层的元素都当成是一张张的小卡片,一般情况下,他们都放在地面上,都在同一层,按着一定的顺序排列。这时,上浮一层,就相当于与你将卡片拿起来,然后在用一块玻璃将地方的卡片压住,在将拿去来的卡片放在玻璃上。但浮动还不仅仅做了这个动作,当你把一种卡片拿走以后,卡片原来占有的位置就会被剩下的卡片挤掉。如果此时你将卡片放在玻璃上的话,必然会遮挡住下面那层的卡片,为了解决遮挡的问题,又有下面的属性可用。
属性 | 值 | 说明 | CSS 版本 |
clear | none | 允许两边均可浮动 | 1 |
left | 左边界不得浮动 | 1 | |
right | 右边界不得浮动 | 1 | |
both | 两边都不得浮动 | 1 |
#c {
clear: both;
}
解释:方法其实是一种非常强硬的方法,既然浮动会造成遮挡的话,那就不允许浮动就好了。
但是还有一种比较取巧的方法,那就对被遮挡的元素进行外边距的设置,既然惹不起,那总躲得起吧。
总结:
下面总有了盒模型内容有哪些:
1.设置元素尺寸
2.内边距
3.外边距
4.尺寸固定后的溢出处理
6.隐藏元素
7.类型转换
8.元素浮动
7.css盒模型的更多相关文章
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
- 第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性 使用 vis ...
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 C ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- [k]css盒模型
box-sizing : content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS盒模型和定位的类型
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
随机推荐
- NSUrl 的常见用法
NSURL *url = [NSURL URLWithString:@"http://www.baidu.com/s?tn=baiduhome_pg&bs=NSRUL&f=8 ...
- Ceph源码解析:PG peering
集群中的设备异常(异常OSD的添加删除操作),会导致PG的各个副本间出现数据的不一致现象,这时就需要进行数据的恢复,让所有的副本都达到一致的状态. 一.OSD的故障和处理办法: 1. OSD的故障种类 ...
- 处理SVN的提交代码冲突
工具: 一台开发的电脑,myeclipse,TortoiseSVN1.8 步骤: 1.不管是提交.更新.编辑冲突第一个操作都应该是和资源库进行同步,项目右键==>Team==>于资源库同步 ...
- 学习总结 JDBC
- 华为OJ平台——整形数组合并
题目描述: 将两个整型数组按照升序合并,并且过滤掉重复数组元素 输入: 输入说明,按下列顺序输入: 1 输入第一个数组的个数 2 输入第一个数组的数值 3 输入第二个数组的个数 4 输入第二个数组的数 ...
- powerdesigner逆向导出oracle数据库结构显示备注
最近接到命令,要将oracle数据库的结构导出为pdm文件供其他同事使用,逆向工程导出数据库结构比较方便,但是发现导出的数据库结构没有注释,这是很郁闷的事情: 查过网上很多资料都是sqlserver的 ...
- shell脚本循环执行mysql语句
参考资料:Shell脚本中执行mysql语句 需求:数据库里有张数据表存储的是用户对电影的评价(user_id movie_id rating time),但是我现在要每部电影的总评分. 解决方法: ...
- 如何初始化一个iOS原生地图
/** 初始化一个mapView 需导入 #import <MapKit/MapKit.h> - returns: 返回一个mapView对象 */ mapView = [[MKMapV ...
- 《Linux企业应用案例精解》一书配套视频发布
<Linux企业应用案例精解>一书配套视频发布(每周更新视频教程),通过读者平台账号,可以在平台下载AVI格式.所有读者都能获得本书中涉及的软件资料,轻松搭建你的学习环境. 当当购书地址: ...
- span标签之间的空隙
出现的问题: 在html中,当有两个以及两个以上的span标签并列的时候,如果任意两个span之间换行书写的话,那么他们在页面上展现的时候往往会有空隙 解决的办法有两个: 1.将两个span标签写在同 ...