一、盒子模型的分类
1.标准盒子模型
2.怪异盒子模型
3.弹性盒子模型
二、标准盒子模型的组成(content-box)
- Margin(外边距) - 清除边框外的区域,外边距是透明的
div{ margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; }
取值:auto(左右居中) 或者 数值
div{ margin:100px auto; }
margin:25px 50px 75px 100px; // 顺序:上 右 下 左 margin:25px 50px 75px; // 顺序:上 (左右) 下 margin:25px 50px; // 顺序:上下 左右 margin:25px; // 顺序:所有方向
margin需要注意的问题
外边距合并问题
垂直方向上外边距相撞时,取较大值
- Border(边框) - 围绕在内边距和内容外的边框
1.border-style solid(实线) double(双实线) dashed(虚线) dotted(电线) 2.border-width p{border-width:5px;} 3.border-color p{border-color:red;}