【web】【CSS】---盒模型

盒模型

盒模型包括width+height+margin（外边距）+padding（内边距）+border（边框）

css三种引入方式

行间引入，开始标签 打style

内部引入，放在头部标签head，style标签（双标签）

外部引入，link引入外部css文件

padding

• 调整元素内容距离元素边缘的距离

• 设置padding增加了盒模型面积

• 一个值：四个方向；两个值：上下，左右；三个值：上，左右，下；四个值：上右下左

• 还可以分方向设置：padding-left左，padding-righ右，padding-top上，padding-bottom下

border

• border也会增大盒模型面积
• border：边框宽度（border-width）边框颜色（border-color）边框样式（border-style：solid实线，dotted点线，dashed虚线，double双实线）
• 可一起设置，也可分方向设置（例如分割线）
• 圆角度：border-radius，也可分方向设置
• class选择器 .+class名{} 权重10，

margin

margin 用来调整元素之间的距离

• 不会增加面积
• 值：
  一个值：四个方向；
  两个值：上下，左右；
  三个值：上，左右，下；
  四个值：上右下左
• 还可以分方向设置：margin-left左，margin-righ右，margin-top上，margin-bottom下

margin存在问题（常用）

• 存在问题1：上下两个元素同时设置margin-bottom和margin-top会叠压取最大值

  • 解决：选一个用

• 存在问题2：第一个子元素的margin-top会传递给父元素

  • 解决：
    使用padding代替margin（在父元素）
    给父元素设置overflow：hidden

正常盒模型和IE盒模型

ie盒模型也叫怪异盒模型

• 区别：
  正常，增加面积，
  怪异，不会增加，挤压

​ 正常盒模型设置padding和border会增大盒模型面积

​ 怪异盒模型设置padding和border会挤压内容区

• 正常盒模型变成ie盒模型： box-sizing:border-box