盒子模型

HTML中的每一个元素都可以看做是一个盒子

每个盒子具备的特征

内容（content）

• 盒子里面装的东西
• 常见属性
  • width：宽度
  • min-width：最小宽度
  • max-width：最大宽度
  • height：高度
  • min-height：最小高度
  • max-height：最大高度

内边距（padding）

• 盒子边框和内容区之间的间距
• 内边距(padding)相关CSS属性
  • padding：是padding-top、padding-right、padding-bottom、padding-left的简写属性
• 内边距会撑大盒子的总大小
• 内边距的妙用
  • 如果不希望让内容区紧挨着盒子边缘，可以通过设置内边距，将内容区挤进去

边框（border）

• 就是盒子的边框，边缘部分
• 盒子的大小包括盒子边框大小

外边距（margin）

• 盒子和其他盒子之间的间距
• 外边距(margin)相关属性
  • margin：是margin-top、margin-right、margin-bottom、margin-left的简写属性
• 可以设置百分比：参考父元素的宽度，但是很少这么做

盒子模型结构

• 盒子的宽度计算：width(内容区) + 左右的padding(内边距) + 左右的border(边框线)
• 盒子的高度计算：height(内容区) + 上下的padding(内边距) + 上下的border(边框线)

外边距的传递和折叠

margin-top和margin-bottom的传递

• margin-top传递
  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
• margin-bottom传递（很少见）
  • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
• 如何防止出现传递问题?
  • 触发BFC（结界）
    • 给父元素设置overflow为auto
  • 建议：
    • margin一般是用来设置兄弟元素之间的间距
    • padding一般是用来设置父子元素之间的间距

margin-top和margin-bottom的折叠

• 垂直方向上相邻的2个盒子的margin-top、margin-bottom有可能会合并为1个margin，这种现象叫做collapse（折叠）
• 水平方向上的margin（margin-left、margin-right）永远不会collapse(折叠)
• 如何防止折叠现象发生？
  • 只设置其中一个元素的margin-top

边框相关属性

边框相关的css属性

• border-width：边框的宽度
• border-color：边框颜色
• border-style：边框样式

• border-top、border-right、border-bottom、border-left

  • 设置不同方向的边框的简写

  • boder-left: 10px solid red

• border: 统一设置4个方向的边框

  • boder: 10px solid red
    

• 边框样式的取值（常用的就dashed和solid）

  • dashed：边框是一条虚线
  • solid：边框是一条实线
  • none：没有边框，边框颜色、边框宽度会被忽略
  • dotted：边框是一系列的点
  • double：边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值

boder实现各种形状

• 实现两个三角形拼接成的正方形

  .box1 {
   width: 0;
   background-color: skyblue;
   border-top: 100px solid red;
   border-left: 100px solid blue;
  }
  

• 实现4个三角形拼接成的正方形

  .box2 {
   width: 0px;
   border-top: 100px solid black;
   border-left: 100px solid bisque;
   border-right: 100px solid aqua;
   border-bottom: 100px solid slateblue;
  }
  

• 实现一个正三角形

  .box3 {
   width: 0px;
   /* transparent用于设置颜色为透明 */
   border-top: 100px solid transparent;
   border-left: 100px solid transparent;
   border-right: 100px solid transparent;
   border-bottom: 100px solid slateblue;
  }
  

• 实现一个倒三角形

  .box4 {
   width: 0px;
   /* transparent用于设置颜色为透明 */
   border-top: 100px solid transparent;
   border-left: 100px solid transparent;
   border-right: 100px solid transparent;
   border-bottom: 100px solid slateblue;
   /* 将该盒子旋转180度 */
   transform: rotate(180deg);
  }
  

margin负值的妙用

• 场景一：当子元素的宽度/高度不够我们进行布局时，可以通过设置margin负值来增加子元素的宽度/高度
  • 前提：父元素的宽高必须设定，子元素的宽高为auto

• 场景二：当边框线重合时，可以通过设置margin的负值来覆盖掉其中一条边框

  margin中的auto的值

• 官方文档说明

  • 只有块级元素才能在margin中设置auto值
  • 当左右边距都设置为auto时，此时的auto是平均等分左右的边距，使块级元素在父元素中居中
  • 当上下边距都设置auto时，auto的值是0，也就是没有改变

    细节注意点

• width、height、margin-top、margin-bottom，这些属性对行内级非替换元素不起作用

• padding-top、padding-bottom、上下方向的border，行内级非替换元素最好别用这些属性