1、盒子模型的介绍
- 盒子的概念:
- 页面中的每一个标签,都可看做是一个“盒子”,通过盒子的视角更方便的进行布局
- 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个矩形区域,我们也形象的称之为盒子
- 盒子模型
- CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边框区域(margin),这就是盒子模型
2、内容区域的宽度和高度
- 作用:利用 width 和 height 属性默认设置是盒子内容区域的大小
- 属性:width / height
- 常见取值:数字 + px
3、边框(boder) - 连写形式
- 属性名:border
- 属性值:单个取值的连写,取值之间以空格隔开
- 如:border : 10px solid red;
- 快捷键:bd + tab
- 边框 - 单方向设置
- 场景:只给盒子的某个方向单独设置边框
- 属性名:border - 方位名词
- 属性值:连写的取值
4、内边距(padding)
- 属性名:padding
- 属性值:取值之间以空格隔开
- 如:boder : 10px solid red;
5、CSS3盒模型(自动内减)
- 操作:给盒子设置属性box-sizing : border-box ; 即可
- 优点:浏览器会自动计算多余大小,自动在内容中减去
6、清除默认内外边距
- 场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开发前需要先清除这些标签默认的margin和padding,后续自己设置
- 比如:body标签默认有margin : 8px
- 比如:p标签默认有上下的margin
- 比如:ul标签默认有上下的margin和padding-left
- ......
- 解决方法:
* {
margin: 0;
padding: 0;
}
7、外边距折叠现象
7.1、合并现象
- 场景:垂直布局 的 块级元素,上下的margin会合并
- 结果:最终两者距离为margin的最大值
- 解决方法:尽量避免就好
- 只给其中一个盒子设置margin即可
7.2、塌陷现象
- 场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
- 结果:导致父元素一起往下移动
- 解决方法:
- 给父元素设置border-top 或者 padding-top (分割父子元素的margin-top)
- 给父元素设置overflow : hidden
- 转换成行内块元素
- 设置浮动