CSS学习笔记四——盒子模型

一、盒子模型的组成

所有 HTML 元素都可以看作盒子，盒子模型是为了封装 HTML 元素，其包括：实际内容、内边距、边框、外边距。盒子总宽高的计算是这四部分的合并计算。

1. 内边距

padding 属性，设置元素内容与边框之间的距离，即内边距，如：padding: 20px。该属性会改变盒子占用的位置。

取值：
（1）1个值，4个方向内边距一致；
（2）2个值，上下一致，左右一致；
（3）3个值，按照上 左右 下的顺序设值；
（4）4个值，按照上 右 下 左的顺序，顺时针设值；

特点：
（1）背景色可以蔓延到内边距；
（2）可以设置单一方向的内边距，通过 padding-left 属性设置左边的内边距，此处的 left 可改为其它方向，包括了 top、bottom、right；

2. 边框

border 属性，用于设置盒子的边框，语法顺序为 边框大小 样式 颜色，如：10px solid red；其中，边框样式包含了 solid（实线）、double（双实线）、dashed（线段线，虚线）、dotted（点状线）；边框颜色可设任意颜色，也可设为 transparent（透明）。

特点：
（1）背景色可以蔓延到边框；
（2）支持四个方向设置不同的边框，通过 border-top 属性设置上边框，此处的 top 可改成 left / bottom / right；
（3）其语法可拆分成三个属性单独设置样式，属性包括了 border-width、border-style、border-color。这三个属性取值方式与内边距取值方式一致，可设1 - 4个值。

3. 外边距

margin 属性，设置一元素盒子与另一元素盒子之间的距离，即外边距，其取值方式与内边距取值方式一致，可设1 - 4个值。

特点：
（1）可设置负值；
（2）支持四个方向设置不同的距离，通过 margin-top 属性设置上外边距，此处的 top 可改成 left / bottom / right；
（3）可在屏幕中快速居中，通过设置 margin：0 auto 可让元素水平居中，auto 表示自动调整距离，只在水平方向上生效，垂直方向要自己设置距离；

特殊问题
问题一：为兄弟关系的两个盒子，垂直外边距与水平外边距的设置。
回答：
（1）垂直方向——上盒子设置下方的外边距，下盒子设置上方的外边距，此时，外边距并非叠加，而是取最大值；
（2）水平方向——左盒子设置右边的外边距，右盒子设置左边的外边距，此时，外边距合并叠加；

问题二：为父子关系的两个盒子，给子盒子设置外边距，但作用于父盒子身上。
解决方法：
（1）给父盒子设置内边距，代替子盒子外边距的设置，缺点在于父盒子的宽高会改变；
（2）给父盒子设置边框，子盒子设置的外边距可在子盒子上生效，父盒子的边框可设为透明，缺点在于父盒子宽高会改变；
（3）给父盒子或子盒子添加浮动，使得两个盒子不在同一平面；
（4）构建 bfc 块，通过在父盒子添加 overflow：hidden，使得父盒子不受外界干扰，也不对外界产生干扰；

二、不同 display 的盒子模型

元素显示类型不同，盒子模型设置的生效情况也不同。
1、块元素的盒子模型设置最为标准，所有组成部分的设置均可生效；
2、行内元素本身无法定义宽高，且其在内、外边距设置时虽然显示效果存在，但是根本无法在文档流中占据位置，上下方向的内、外边距根本不存在实际效果，只有左右方向的内、外边距存在实际效果；
3、行内块元素与块元素一样能够进行基本的设置；

三、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！