css3盒子模型
# 概述
页面中的每一个标签都可以称作是一个盒子，也可以把网页中的一块区域称之为盒子
盒子模型：具有padding、margin、border、content组成
# 如何转换
- 标准盒子：box-sizing: border-content
- 怪异盒子：box-sizing：border-box
# 外边距正常
水平布局的左右margin是正常的
# 外边距合并
垂直布局的块元素，上下margin会合并，最终选择margin最大值，只要给其中一个盒子加margin就好
# Demo演示外边距合并现象
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
# 外边距塌陷
互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动 ::: note 解决办法
- 给父元素设置border-top或者padding -top(分隔父元素的margin-top)
- 给父元素加overflow: hidden
- 转为行内块元素
- 设置浮动 :::
# Demo演示外边距塌陷
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
# 行内元素margin和padding失效
- 水平方向margin和padding布局有效
- 垂直方向margin和padding布局无效
上次更新: 2023/01/29, 11:01:00