CSS盒子模型深入讲解

1 盒子模型深入讲解

1.1 盒子模型的组成

① 盒子模型的相关概念

内容区域 content： 盒子的主要区域，盒子中的文本内容或者后代元素都显示在内容区域中。

内边距 padding： 盒子的边界（边框）与内容的间距。

边框 border： 在盒子的边界上。

外边距 margin： 盒子与其他盒子的距离。

② 影响盒子大小的因素

盒子大小 = 内容区域大小 + 内边距 + 边框宽度

注意： 外边距不会影响盒子的大小，外边距会影响盒子的位置。

1.2 盒子中的内容区域

① 设置内容区域的宽高

CSS 属性名	功能	属性值
width	设置内容区域宽度	长度
height	设置内容区域高度	长度
max-width	设置内容区域的最大宽度	长度
max-height	设置内容区域的最大高度	长度
min-width	设置内容区域的最小宽度	长度
min-height	设置内容区域的最小高度	长度

注意：

1. 宽高最大最小限制一般不会与设置固定的宽高一起使用， 主要对元素默认宽高进行限制。
2. 使用百分比设置元素的宽高，参考父元素内容的宽高！

② 块级元素的默认内容宽度的计算规则

行内元素和行内块元素默认的宽高都是被内容撑开，没有内容就没有宽高。

块级元素的默认高度被内容撑开，没有内容就没有高度。块级元素的默认宽度计算规则如下：

元素默认总宽度 = 父元素内容的宽度 - 自己左右外边距

元素默认内容宽度 = 父元素内容的宽度 - 自己左右外边距 - 自己左右边框宽度 - 自己左右内边距

1.3 盒子的内边距 padding

CSS 属性名	功能	属性值
padding-left	设置左内边距	长度
padding-right	设置右内边距	长度
padding-top	设置上内边距	长度
padding-bottom	设置下内边距	长度
padding	复合属性，设置多个方向的内边距	长度

padding 复合属性可以设置一个值、二个值、三个值、四个值， 规则如下：

padding: 10px;  /* 四个方向内边距都是 10px */
padding: 20px 30px;  /* 上下  左右 */
padding: 1px 2px 3px;  /*上 左右 下*/
padding: 10px 20px 30px 40px;  /*上 右 下 左*/

内边距值的一些规则：

1. 使用百分比作为长度设置内边距，不论设置的哪个方向的内边距，都参考父元素内容的宽度。
2. 内边距的值不可以是负数，不能是 auto。

不同显示模式的元素，设置内边距的规则：

1. 块级元素、行内块元素可以完美设置各个方向内边距。
2. 行内元素可以完美地设置左右内边距，但是上下内边距设置不完美。

1.4 边框 border

CSS 属性名	功能	属性值
border-style	设置边框线风格	none：无边框线，默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线
border-width	设置边框宽度	长度，默认值 3px
border-color	设置边框颜色	颜色值，默认黑色
border	复合属性	同时设置四个方向的边框颜色、宽度、风格
border-left border-left-style border-left-color border-left-width border-right border-right-style border-right-color border-right-width border-top border-top-style border-top-color border-top-width border-bottom border-bottom-style border-bottom-color border-bottom-width	…	…

注意： border 复合属性，对值没有顺序和数量要求。

1.5 外边距 margin

① 相关 css 属性

CSS 属性名	功能	属性值
margin-left	设置左外边距	长度
margin-right	设置右外边距	长度
margin-top	设置上外边距	长度
margin-bottom	设置下外边距	长度
margin	复合属性，设置各个方向的外边距	1 ~ 4 值

② margin 设置规则

margin 复合属性，可以设置一个值、两个值、三个值、四个值，规则如下：

margin： 10px;  /*设置 4 个方向的外边距*/
margin: 10px 20px; /*上下  左右*/
margin: 10px 20px 30px;  /*上 左右 下*/
margin: 10px 20px 30px 40px;  /*上 右 下 左*/

外边距值的规则：

1. 如果使用百分比设置长度作为外边距的值，参照父元素内容的宽度。
2. 外边距的值可以负数，也可以设置为 auto。

不同显示的元素，设置外边距的规则：

1. 块级元素、行内块元素可以完美设置各个方向的外边距。
2. 行内元素，可以完美设置左右外边距，上下外边距无法设置。

③ margin 塌陷

什么是 margin 塌陷?

第一个子元素的上外边距和最后一个子元素的下外边距，会作用在父元素上，这种现象称之为margin 塌陷。

margin 塌陷只发生在块级元素上。

如何解决 margin 塌陷？

1. 方案一： 给父元素设置边框。
2. 方案二： 给父元素设置内边距。
3. 方案三： 给父元素设置 CSS 属性 overflow:hidden。

④ margin 合并

什么是 margin 合并？

上一个兄弟元素的下外边距会与下一个兄弟元素的上外边距进行合并，二者之间的距离取较大的那个外边距。

margin 合并只发生在块级元素之间。

如何解决 margin 合并？

把margin合并作为一种现象，布局的时候多加注意。

1.6 内容溢出

CSS 属性名	功能	属性值
overflow	设置溢出内容显示方式	visible：显示溢出的内容，默认值 hidden：隐藏溢出的内容 scroll：显示滚动条，不论内容是否溢出都有滚动条 auto：内容溢出显示滚动条，内容不溢出没有滚动条。
overflow-x	水平方向溢出内容的显示方式	同上
overflow-y	垂直方向溢出内容的显示方式	同上

1.7 隐藏元素

要想隐藏元素，可以设置 CSS 属性 display:none 或者 visibility:hidden。

两种设置方式的区别：

1. display:none 让元素完全不占任何位置。
2. visibility：hidden 只是看不到元素，元素仍然占据原来的位置。