《HTML+CSS》视频9 盒子模型（重点）

盒子模型（框模型）

css中每个元素都是一个盒子，一个盒子有以下几个部分：

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）

内容区

使用width来设置盒子内容区的宽度、height来设置盒子内容区的高度。

边框

为元素设置边框

要为一个元素设置边框，必须指定三个样式

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

大部分浏览器中，边框的宽度和颜色都有默认值，而边框的默认值为none，所以只设置一个border-style属性，也可以显示出边框

使用border-width可以设定四个边框的宽度：

• 四个值：上、右、下、左顺时针设置
• 三个值：上、左右、下
• 两个值：上下、左右

border-width:10px 20px 30px 40px;
border-color:#bdf blue green;
border-style:solid;

除了border-width这个通用属性，还有下面四个单独属性：

border-top-width/border-right-width
border-bottom-width/border-left-width

border-color和border-width一样，可以设置四个值。

border-style一般默认值为none，表示没有边框，可选值为：

• solid 实现边框
• dotted 点状边框
• dashed 虚线
• double 双线 等等等
  和border-width 一样，可以设置四个值，分别设置四个边。

除了上面三种属性，还有一个简写属性border可以同时设置四个边框的颜色、宽度、和样式：

border: red solid 10px;

并且border是同时指定四个边框的样式。
除此之外，还有四个简写样式：

border-left/border-right/border-top/border-bottom

内边距

内边距会影响可见框的大小，内容的背景颜色会延伸到内边距。

可以通过：

• padding-top
• padding-right
• padding-bottom
• padding-left
  分别设置内边距的样式，也可以使用padding同时设置四个样式。

padding：10px 20px 23px;

外边距

外边距不会影响盒子可见框的大小，但是会影响盒子的位置。

• margin-top
• margin-right
• margin-bottom
• margin-left

设置margin-top和margin-left会影响盒子自身的位置，设置margin-right和margin-bottom会改变其他盒子的位置，外边距也可以设置为负值。

margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只指定左外边距或右外边距的margin为auto，则会将外边距设置为最大值，如果将margin-left和margin-right同时设置为auto，则可以是元素自动在父元素中居中，这一个比较常用。

margin-left:auto;
margin-right:auto;

垂直方向margin如果设置为auto，则默认值为0。

同样，可以使用margin同时设置四个边距，例如，如果要居中，可以：

margin：0 auto；

垂直外边距的重叠

在网页中，垂直方向上相邻的外边距会发生重叠，兄弟元素之间相邻的外边距会取最大值。

如果是父子元素的垂直外边距相邻了，则会把子元素的外边距设置给父元素。
1、可以使用padding-top将父子元素的外边距隔开，然后将子元素的上外边距剔除padding-top。
2、或者直接使用padding-top直接将子元素位置定位。