CSS 盒子模型

1. 盒子模型（Box Model）

• 内容(content)：盒子里面的文字和图片等元素
• 边框(border)：盒子的厚度
• 内边距(padding)：盒子内容与边框的距离
• 外边距(margin)：盒子与盒子之间的距离

---

2. 盒子边框（border）

语法：border : width | style | color（可无序）

属性	作用
width	定义边框粗细，单位是px
style	边框的样式
color	边框颜色

样式 (style)：默认无边框

• solid：单实线（常用）
• dashed：虚线
• dotted：点线

---

3. 盒子边框写法总结表

可以单独给四个边框分别指定

边框	语法	属性
上边框	border-top:	宽度 样式 颜色
下边框	border-bottom:	宽度 样式 颜色
左边框	border-left:	宽度 样式 颜色
右边框	border-right:	宽度 样式 颜色

---

4. 表格边框合并

使表格中紧挨的两个边框合并为一条线

语法：border-collapse:collapse

---

5. 内边距 (padding)

边框与内容之间的距离

值的个数	表达意思（单位px）
1个值	padding：四条边;
2个值	padding：上下 左右；
3个值	padding：上 左右 下；
4个值	padding：上 右 下 左；

注意：设置了内边距，盒子会被撑变大

例：padding: 12px 10px 0; （0px 可不带单位）

上内边距12px，下内边距 0px，左右内边距 10px

---

5.1 内盒尺寸计算（实际大小）

设置了内边距会撑大原来的盒子

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

注意：嵌套的盒子设置宽高以及 padding 不影响外部盒子的大小

---

6. 外边距 (margin)

控制盒子和盒子之间的距离，语法与 padding 相同

---

6.1 块级盒子水平居中

语法：margin: 0 auto;

注意：盒子必须有宽

---

6.2 行内元素和行内块居中对齐

语法：text-align: center（也可以让文字水平居中）

---

6.3 插入图片和背景图片区别

• 移动插入图片位置：padding margin

• 移动背景图片位置：background-position

---

6.4 清除元素的默认内外边距

为了更方便地控制网页中的元素，首先需要将元素的默认内外边距清除

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意： 为了照顾兼容性，行内元素尽量只设置左右内外边距， 不要设置上下内外边距

---

6.5 外边距合并问题

1. 相邻块元素垂直外边距的合并

   上下相邻的外边距不会发生相加，而是仅保留较大值的那条外边距

   解决方案：只给一个盒子添加 margin 值

2. 嵌套块元素垂直外边距的合并（塌陷）

   如果父元素没有上内边距或上边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

   解决方案：

   ​ ① 可以为父元素设置上边框（transparent 透明）

   ​ ② 可以为父元素设置上内边距

   ​ ③ 可以为父元素添加 overflow: hidden;（无弊端建议）

   ​ ④ 还有其他方法：浮动、固定、绝对定位的盒子不会有问题

---

7. 盒子模型布局稳定性

优先级：width > padding > margin

原因：

• width：宽度，没有问题，经常使用宽度剩余法、高度剩余法来做
• padding：会影响盒子大小，需要进行加减计算，其次使用
• margin：会有外边距合并，还有 ie6下面margin 加倍的bug，建议最后使用

---

8. 圆角边框 (CSS3)

语法：border-radius: 左上角 右上角 右下角 左下角;

值：精确单位 (px) 、百分比 (%)

例：border-radius: 50%;（圆）

---

9. 盒子阴影 (CSS3)

语法：box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/外阴影

属性	描述	值
水平阴影（必需）	以盒子中心点 x 轴的位置，允许负值	px
垂直阴影（必需）	以盒子中心点 y 轴的位置，允许负值	px
模糊距离	阴影模糊向外扩散的距离	px
阴影大小	阴影扩散大小的尺寸	px
阴影颜色	阴影的颜色	rgba
内阴影	默认外阴影	inset

例：box-shadow: 0 15px 50px 2px rgba(0,0,0,.3) inset;

---