CSS基础三--盒子模型

1.盒子模型

• 页面布局要学习三大核心，盒子模型，浮动和定位

1.1盒子模型的组成

1.2边框（border）

• border-style 边框的样式 solid 实现边框 dashed 虚线边框 dotted 点线边框

边框简写

• border：1px solid red; 没有顺序

边框分开写法

• border-top ： 1px solid red; 只设置上边框，其余同理

1.3边框会影响盒子实际的大小

1.4内边距（padding）

内边距的复合写法

内边距会影响盒子大小

padding不会撑开盒子的情况
如果没有指定width/height属性的值，则padding不会撑开盒子

1.5外边距（margin）

• margin的简写方式和padding完全一致

外边距典型应用

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

---

外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
主要有两种情况：
1. 相邻块元素垂直外边距的合并

2. 嵌套块元素垂直外边距的塌陷

1.6清除内外边距

1.7案例总结

2.圆角边框

3.盒子阴影

文字阴影