CSS学习笔记【盒子模型】
- 内容区域 - 代表盒子的实际内容部分，它是由 width 宽度和 height 高度来确定的
- 内间距区域 - 代表盒子与实际内容之间的空白区域，由 padding 属性设置
- 边框区域 - 代表盒子的边框，是内间距区域和外边距区域的边界，由 border 属性设置
- 外边距区域 - 代表此盒子的边框与相邻的其他盒子边框之间的距离，由 margin 属性设置
content-box
box-sizing: content-box （W3C盒模型，又名标准盒模型）： 元素的宽高大小表现为内容的大小
content-box 是 box-sizing 的默认值，也就是说所有的盒子默认都是内容盒子，那么这里 css 属性中的 width 和 height 设置的是它内容区域的宽高，而盒子的宽高需要加上内间距和边框，外边距不算在内。
border-box
box-sizing: border-box（IE盒模型，又名怪异盒模型）：元素的宽高表现为内容 + 内边距 + 边框的大小
如果把 box-sizing 的值改成 border-box，那么 width 和 height 属性就是分别设置盒子的最终宽度和高度
css 盒子模型中还有一种特殊的盒子：替换元素。
替换元素不受css的影响
比如说用 <img/> 加载一张图片，我们可以限制 <img/> 盒子的宽高，然后利用 object-fit 属性，让图片等比例占满整个盒子，裁掉显示不下的部分，然后通过 object-position 来设置图片在盒子中的位置，可以是靠下或者居中等：
常见的替换元素有 <img> 、 <iframe> 、 <video> 等
盒子的类型和布局
- 有
块级盒子和行内盒子两种 - 可以通过设置
外部和内部显示类型改变布局方式
外部显示类型控制的是相邻盒子之间的布局，分为块级盒子和行内盒子两种。它们是浏览器默认的布局方式。
内部显示类型则是控制这个盒子内部的子盒子之间的排列方式
块级盒子 block
块级盒子，比如 div，p，h1 等，它的宽度（指盒子的整体宽度）会占满整个浏览器，并且后边的盒子会被挤占到下一行去显示。
行内盒子 inline
行内盒子比如 span, a等，它的宽度是内容的宽度，后边的盒子会跟在它的后边继续排列。
inline-block 显示类型
如果想让一个盒子的外部类型保持 inline 行内状态，不把后边的盒子挤占到下一行，但是又想同时设置宽高、padding 和 margin，那么可以使用 inline-block 这个显示类型，这样这个盒子就有了宽高，并且无论是水平还是垂直方向上的 padding 和 margin，都可以把周围的盒子的空间挤占掉。
解决容器塌陷
如果塌陷的盒子中间有 border、padding，或者设置了 height、min-height 等属性，或者 BFC的话，就不会有边距塌陷
采用BFC(待补充）
overflow:hidden （ 相邻盒子之间[比如一个盒子的下边距和下面盒子的上边距]， 父子盒子之间）
历史文章 CSS学习笔记【Flex布局】
