149节---------4月12日

盒子模型

组成：

• border边框
• content内容
• padding内边距
• margin外边距

---

边框

1.组成。

• border-width 边框粗细
• border-style 边框样式
• border-color 边框颜色

常见style：

• solid 实线
• dashed 虚线
• dotted 点线

2.边框的复合写法

如：border:1px solid red; 中间用空格，顺序无所谓

边框的分开写法

如：border-top:1px solid red;只设置上边框

top顶部，bottom底部，left左，right右。

3.细线边框

border-sollapse:collapse;

• collapse是合并的意思
• border-sollapse:collapse表示相邻边框合并在一起

4.边框会影响盒子的大小

边框会增加盒子的实际大小，姐居然方案如下：

• 测量盒子大小的时候，不量边框
• 如果测量室包含了边框，则需要width/height减去边框宽度

---

内边距

即边框和内容之间的距离

组成：

• padding-left
• padding-right
• padding-top
• padding-bottom

内边距的复合写法

• padding: 5px;        1个值，代表上下左右都有5像素内边距。
• padding: 5px 10px;        2个值，代表上下内边距是5像素，左右内边距是10像素。
• padding: 5px 10px 20px;        3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素。
• padding: 5px 10px 20px 30px;        4个值，上是5像素，右10像素，下20像素，左是30像素顺时针。

padding会影响盒子实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：让width/height减去多出来的内边距大小即可。