这是我参与「第四届青训营」笔记创作活动的第3天

一、盒模型

1. 了解网页布局的本质

准备相关的网页元素，一般都是盒子box
利用CSS设置盒子的样式，摆放在相应的位置（核心部分）
往盒子里面填充内容

2. 盒子模型（Box Model）

顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。

1.盒子的组成

主要由四部分组成：margin（外边距）、border（边框）、padding（内边距）、content（内容）

2. border：盒子的边框

属性：

border-width：设置边框宽度，单位：px
border-style：定义边框样式，属性值：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）
border-color：设置边框颜色

例：设置一个div的边框颜色，样式以及宽度

分开写：

      div{
            border-color:blueviolet;  
            border-style:dashed;
            border-width: 5px；
        }

边框的复合写法 -border：宽度，样式，颜色；
注：顺序可颠倒，效果一样

     border:5px dashed blueviolet;

分别设置上下左右边框
border-top | bottom | left | right：分别代表上下左右边框
也可以单独设置上下左右边框的color、style、width属性，属性中间用“-”连接

         border-top:dashed 5px blueviolet;
         border-right: 5px solid red;
         border-left: 5px double pink;
         border-bottom: 5px solid rgb(60, 198, 83);

合并相邻的边框
border-collapse：collapse; 我们在设置表格的时候如果要设置相邻单元格的边框大小，他们的边框宽度会叠加在一起，就会显得边框较宽，这个时候我们就可以使用border-collapse这一属性合并相邻的边框，达到我们想要的效果。
边框会影响盒子的大小
解决方案：
1.测量盒子时，不测量边框
2.如果测量时包含了边框，用width/height减去边框宽度

3. padding:盒子的内边距

内边距即为盒子的边框与内容之间的距离

属性
pdding-top：上内边距
pdding-left：左内边距
padding-right：右内边距
padding-bottom：下内边距
例：

 div{
        width: 300px;
        height: 100px;
        border: 5px solid pink;
      }

  padding: 30px; //设置内边距为30px

简写：
四值法：上、右、下、左
三值法：上、左右、下
二值法：上下、左右
一个值：上下左右
内边距会影响盒子
padding会影响盒子大小（若盒子已经设置了宽度和高度，指定内边距会撑开盒子）
若盒子没有指定宽高。则此时padding不会撑大盒子

3. margin：外边距

设置外边距，用于控制盒子与盒子之间的距离

属性：
margin-top：上外边距
margin-left：左外边距
margin-right：右外边距
margin-bottom：下外边距

margin的简写方式与padding一样，此处就不再介绍了

外边距设置块级盒子水平居中

条件：（1）盒子必须指定宽度
（2）盒子必须把左右外边距设置为auto

div{
    width: 100px;
    margin: 0 auto;
    }

行内元素或行内块元素水平居中
给其父元素添加 text-align : center
外边距合并问题
margin定义块元素的垂直外边距时，可能会出现外边距的合并
情况一：相邻块元素垂直外边距的合并

 .first{
       width: 100px;
       height: 100px;
       margin: 50px auto;
       border: 5px solid red；
        }
 .second{
        width: 100px;
        height: 100px;
        border: 5px solid pink;        
        margin: 50px auto;
  }

由图可见，本来两个盒子间的距离应该为100px;但实际只有50px，此时就出现了外边距的合并。此外，如果上下两个元素的外边距值不同，使用margin值较大的作为他们的垂直间距。
例如: 上边盒子margin-bottom为20px，下边盒子的margin-top为30px，则它们的垂直间距为30px。
情况二：嵌套块元素垂直外边距的合并

CSS深入理解2 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天