【css】盒模型知识点总结

盒模型

1.盒模型包括：width+height+padding（内边距）+border（边框）+margin（外边距）width(宽)+height(高)

2.padding内边距：1.调整元素内容距离元素边缘的距离
2.设置padding会增加盒模型的面积

• 一个值：代表四个方向；

  两个值：第一个值代表上下，第二个值代表左右；

  三个值：第一个值代表上，第二个值代表左右，第三个值代表下；

  四个值：上 右 下 左。

• 还可以分方向设置：

  padding-left，padding-top，padding-right，padding-bottom。

  • css有三种引入方式：1.行间引入；2.内部引入；3.外部引入。

3.border边框

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

• 实线：solid；点线：dotted；虚线：dashed；双实线：double。

• border也会增大盒模型的面积。

• 也可以分方向设置。

• 圆角度:border-radius；圆角度也可以分方向设置。

  • 标签选择器——标签名+{} 权重：1
  • class选择器—— .+class名+{} 权重：10
  • 组合选择器——每个选择器之间用逗号隔开

• text-align: center;
  设置文本水平对齐方式:center(水平居中) left左对齐 right右对齐;

• line-height: 40px;
  单行文本垂直居中;(值等于height的值)

4.margin外边距

• margin：用来调整元素之间的距离。
• 一个值：代表四个方向；
  两个值：第一个值代表上下，第二个值代表左右；
  三个值：第一个值代表上，第二个值代表左右，第三个值代表下；
  四个值：上 右 下 左。
• 还可以分方向设置：
  margin-left，margin-top，margin-right，margin-bottom。
• margin存在的问题：
  1.上下两个元素同时设置margin-bottom和margin-top会叠压取最大值；
  2.第一个子元素的margin-top会传递给父元素。
  • 解决方式：1.使用padding代替margin；
    ​ 2.给父元素设置overflow：hidden。

5. 正常盒模型和ie盒模型

• 正常盒模型和ie盒模型（也叫怪异盒模型）的区别：
  1.正常盒模型设置padding和border会增大盒模型面积;
  2.ie盒模型设置padding和border会挤压内容区;
  3.如何把正常盒模型变成ie盒模型：设置box-sizing：border-box.