【再学CSS】盒模型

【再学CSS】盒模型

一、认识盒模型

盒模型都是由四部分组成的，分别为margin、border、padding、和content。

• Content: 这个区域是用来显示内容，大小可以通过设置 width和 height
• Padding: 包围在内容区域外部的空白区域；大小通过 padding)相关属性设置。
• Border: 边框盒包裹内容和内边距。大小通过 border相关属性设置。
• Margin : 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

CSS3中的盒模型有以下两种：

• 标准盒模型
• 在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小；
• 标准盒模型的width和height属性的范围只包括content
• 
• 元素的实际占用宽度 = border + padding + width
• 元素的实际占用高度 = border + padding + height
• 替代（IE）盒模型
• 使用这个模型，所有宽度都是可见宽度
• IE盒模型的width和height属性的范围包括了border、padding和content
  -
• 元素的实际占用宽度 = width
• 元素的实际占用高度 = height
• 可以通过修改元素的box-sizing属性来改变元素的盒模型：
• box-sizing: content-box表示标准盒模型（默认值）
• box-sizing: border-box表示IE盒模型

二、盒模型的四个组成部分

2.1 内容 – 宽度和高度

• 设置内容是通过宽度和高度设置的:
• 宽度设置: width
• 高度设置: height ◼
• 注意: 对于行内非替换元素来说, 设置宽高是无效的!
• 另外我们还可以设置如下属性:
  • min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
  • max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
  • 移动端适配时, 可以设置最大宽度和最小宽度;

2.2 内边距 - padding

• padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;

• padding包括四个方向, 所以有如下的取值:

  • padding-top：上内边距
  • padding-right：右内边距
  • padding-bottom：下内边距
  • padding-left：左内边距

• padding单独编写是一个缩写属性：

  • padding-top、padding-right、padding-bottom、padding-left的简写属性

  • padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

  • padding值的个数	例子	代表的含义
    4	padding: 10px 20px 30px 40px;	top: 10px, right: 20px, bottom: 30px, left: 40px;
    3	padding: 10px 20px 30px;	缺少left, left使用right的值
    2	padding: 10px 20px;	缺少left, 使用right的值; 缺少bottom, 使用top的值
    1	padding: 10px;	top/right/bottom/left都使用10

2.3 边框 - border

• border用于设置盒子的边框:
  • 边框具备宽度width;
  • 边框具备样式style;
  • 边框具备颜色color;
• border-radius用于设置盒子的圆角
• ◼ border-radius常见的值:
  • 数值: 通常用来设置小的圆角;
  • 百分比: 通常用来设置一定的弧度或者圆形
  • 如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆

2.4 外边距 - margin

• margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
• 使用方法与padding类似

三、盒模型的注意部分

3.1 上下margin的传递

• margin-top传递
  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
• margin-bottom传递
  • 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
• 解决方法：
  • 给父元素设置padding-top\padding-bottom
  • 给父元素设置border，将border设置为透明
  • 触发BFC: 设置overflow为auto

3.4 上下margin的折叠

• 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

  • 两个兄弟块级元素之间上下margin的折叠

  • 

  • 父子块级元素之间margin的折叠

  • 

• 水平方向上的margin（margin-left、margin-right）永远不会collapse

• 折叠后最终值的计算规则

  • 两个值进行比较，取较大的值

• 解决方法

  • 只设置其中一个元素的margin