CSS盒子模型

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
  • 转换成行内块元素
  • 设置浮动