CSS笔记——盒子模型

一. 盒子模型简介

1. CSS将页面中的所有元素都设置成了一个矩形的盒子
2. 将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置
3. 每一个盒子都由以下几个部分组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin）

二. 内容区（content）

1. 使用width来设置盒子内容区的宽度
2. 使用height来设置盒子内容区的高度

三. 边框（border）

1. 边框属于盒子的边缘，边框里边属于盒子的内容，出了边框都是盒子的外部
2. 要为一个元素设置边框必须指定三个样式：border-width: 边框的宽度、border-color: 边框的颜色、border-style: 边框的样式

• border-width: 边框的宽度

1. 使用border-width可以分别指定四个边框的宽度
   (1) 如果指定四个值，则四个值会分别设置给上、右、下、左（顺时针方向）
   (2) 如果指定三个值，则三个值会分别设置给上、左右、下
   (3) 如果指定两个值，则两个值会分别设置给上下、左右
   (4) 如果指定一个值，则四边全都是该值
2. 除了border-width，CSS中还提供了border-top-width、border-right-width、border-bottom-width、border-left-width，专门用来设置指定边的宽度

• border-color: 边框颜色

1. color也可以分别指定四个边框的样式，规则和width一致，同时它也提供border-xxx-color四个样式，来分别设置四个边

• border-style: 边框的样式

1. 可选值
   (1) none: 没有边框（默认值）
   (2) solid：实线
   (3) dotted: 点状边框
   (4) dashed: 虚线
   (5) double: 双线
2. style也可以分别指定四个边框的样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边

• border

1. border是边框的简写样式，通过它可以同时设置四个边框的样式、宽度、颜色，并且没有顺序要求
2. border一指定就是同时指定四个边，不能分别指定
3. border-top、border-right、border-bottom、border-left可以单独设置四个边的样式，规则和border一样，只不过它仅对一个边生效

四. 内边距（padding）

1. 内边距指的是盒子的内容区与盒子边框之间的距离
2. 一共有四个方向的内边距，可以通过padding-top、padding-right、padding-bottom、padding-left来设置四个方向的内边距
3. 使用padding可以同时设置四个边框的样式，规则和border-width一致

五. 外边距（margin）

1. 外边距指的是当前盒子与其他盒子之间的距离，它会影响到盒子的位置
2. 盒子有四个方向的外边距：margin-top、margin-right、margin-bottom、margin-left
3. 由于页面中的元素都是靠左靠上摆放的，当设置上和左外边距时，会导致盒子自身的位置发生改变，如果是设置右和下外边距会改变其他盒子的位置
   (1) margin-top：上外边距，设置一个正值，元素会向下移动
   (2) margin-right：右外边距，默认情况下设置margin-right不会产生任何效果
   (3) margin-bottom：下外边距，设置一个正值，其他元素会向下移动
   (4) margin-left：左外边距，设置一个正值，元素会向右移动
4. 外边距也可以指定一个负值，如果外边距设置的是负值，则元素会向反方向移动
5. 外边距可以使用简写属性margin，同时设置四个方向的外边距，规则和border-width一样
6. 垂直外边距的重叠
   (1) 在网页中相邻的垂直方向的外边距会发生外边距的重叠
   (2) 兄弟元素：
   ① 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
   ② 如果相邻垂直外边距一正一负，则取两者的和
   ③ 如果相邻的外边距都是负值，则取两者中绝对值较大的
   (3) 父子元素：
   ① 父子元素间的相邻垂直外边距，子元素的会传递给父元素
   ② 父子外边距的重叠会影响到页面的布局，必须要进行处理
7. box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）
   (1) content-box：宽度和高度用来设置内容区的大小（默认值）
   (2) border-box：宽度和高度用来设置整个盒子可见框的大小（width和height指的是内容区+内边距+边框的总大小）

六. 水平方向的布局

1. 元素在其父元素中水平方向的位置由以下几个属性共同决定：
   margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
2. 一个元素在其父元素中，水平布局必须要满足以下的等式：
   margin-left+border-left+padding-left+width+padding-right+border-right+margin-right等于其父元素内容区的宽度
3. 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，等式会自动进行调整
4. 调整的情况：
   (1) 如果这七个值没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
   (2) 这七个值中有三个值可以设置为auto：width、margin-left、margin-right
   ① 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
   ② 如果将一个宽度和其中一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动调整为0
   ③ 如果将三个值都设置为auto，则外边距都是0，宽度最大
   ④ 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，所以经常利用这个特点来使一个元素在其父元素中水平居中