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

那么，上浮一层是什么意思？

这就需要一定的空间思维能力的，如果我们将同一层的元素都当成是一张张的小卡片，一般情况下，他们都放在地面上，都在同一层，按着一定的顺序排列。这时，上浮一层，就相当于与你将卡片拿起来，然后在用一块玻璃将地方的卡片压住，在将拿去来的卡片放在玻璃上。但浮动还不仅仅做了这个动作，当你把一种卡片拿走以后，卡片原来占有的位置就会被剩下的卡片挤掉。如果此时你将卡片放在玻璃上的话，必然会遮挡住下面那层的卡片，为了解决遮挡的问题，又有下面的属性可用。