页面布局三大核心之一：盒子模型

盒子模型

最近准备找前端实习和工作啦，就在博客上总结一下布局的三大核心：盒子模型，浮动和定位。剩下两个也有单独的讲解~

1. 页面布局的本质：利用CSS设置好盒子样式，摆放到相应的位置。（听起来好像很简单，坑很多）

2. 盒子模型的组成：把HTML布局元素看成一个矩形的盒子，封装周围的元素，包括：边框border、内边距padding、外边距margin和实际内容content

   2.1 边框border注意:

   ​

   • 复合型写法 border: 1px solid black;

   ​

   • 细线边框属性：border-collapse: collapse;

   ​

   • 如果是border-box，边框会影响盒子的实际大小，需要减去对应的宽高

   2.2 内边距padding注意：

   ​

   • 如果padding属性有一个值，代表上下左右的padding都一样；两个值代表上下，左右；三个值代表上，左右，下；四个值代表上，右，下，左

   ​

   • 如果是border-box，padding也会撑大盒子，同理，需要减去对应的宽高

   2.3 外边距margin注意：

   ​

   • 前两条和padding一样，见2.2

   ​

   • 外边距的合并会有新的问题：
     

     ​ (1). 相邻元素垂直外边距合并: 并非相加，而是取大的那个
     

     ​ (2). 嵌套元素垂直外边距合并会引起塌陷问题：父元素会塌陷较大的外边距值

3. 圆角边框：border-radius

   注意复合写法的时候顺序是top-left，top-right，bottom-right, bottom-left。

4. 盒子阴影：box-shadow

   box-shadow: h-shadow v-shadow blur spread color inset;

   (注：盒子阴影并不占用空间，不会影响其他盒子的排列)