【前端学习笔记】05盒模型（上）—三种盒子及box-sizing详解

盒模型

在编写css时会发现大多数工作都是围绕着一个盒子一个盒子展开的，如设置尺寸，颜色位置等。页面里的大部分html元素都可以被看作若干层叠的盒子。

**并不意外，css布局主要就是基于盒模型的。每个占据空间页面的块都有这样的属性：**

• content: 盒⼦的内容，显示⽂本和图像

• padding：即内边距，围绕着内容（⽐如段落）的空间。

• border：即边框，紧接着内边距的线。

• margin：即外边距，围绕元素外部的空间。

盒模型-块级盒子-block box

块级盒子和内联盒子是css中使用最广泛的两种盒子。这两种盒⼦会在⻚⾯流（page flow）和元素之间的关系⽅⾯表现出不同的⾏为:

⼀个被定义成块级的（block）盒⼦会表现出以下⾏为:

• 盒⼦会在内联的⽅向上扩展并占据⽗容器在该⽅向上的所有可⽤空间，在绝⼤数情况下意味着盒⼦会和⽗容器⼀样宽
• 每个盒⼦都会换⾏
• width 和 height 属性可以发挥作⽤
• 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒⼦周围“推开”

盒模型-内联盒子（inline box）

我们通过对盒⼦ display 属性的设置，⽐如 inline 或者 block ，来控制盒⼦的外部显示类型。

如果⼀个盒⼦对外显示为 inline，那么他的⾏为如下:

• 盒⼦不会产⽣换⾏。
• width 和 height 属性将不起作⽤。
• 垂直⽅向的内边距、外边距以及边框会被应⽤但是不会把其他处于 inline 状态的盒⼦推开。
• ⽔平⽅向的内边距、外边距以及边框会被应⽤且会把其他处于 inline 状态的盒⼦推开
  ⽤做链接的 a元素、span、em 以及 strong 都是默认处于 inline 状态的。

盒模型-内联+块级盒子（inline-block box）

display 还有个⽐较特殊的值，那就是 inline-block。设置后该元素具有了内联盒⼦的效果：不会产⽣换⾏，同时也有块级盒⼦的效果：可以设置 width 和 height、⽽且将保留上下外边距以及上下内边距。

box-sizing

box-sizing 属性定义如何计算⼀个元素的总宽度和总⾼度，主要设置是否需要加上内边距(padding)和边框等。

• content-box: 默认值。如果你设置⼀个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中(即最终元素的宽width+border+padding三值的总和）
• border-box: 你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将⼀个元素的 width设为100px，那么这 100px 会包含它的 border 和 padding,内容区的实际宽度 =width减去(border +padding) 的值。
• inherit: 指定 box-sizing 属性的值，应该从⽗元素继承。