这是我参与「第四届青训营 」笔记创作活动的的第4天
学习 CSS 不仅仅是了解一些样式和选择器，更重要的是如何设计和排版，一句话说就是：优雅的让每个元素出现在合适的地方
盒模型
盒模型是 CSS 中的核心概念，是后面学习布局和定位的基础
一个完整的盒子包括：margin, border, 和 padding共同组合而成，而content又是由width和height共同决定
- Content box: 这个区域是用来显示内容，大小可以通过设置
width和height. - Padding box: 包围在内容区域外部的空白区域； 大小通过
padding相关属性设置。 - Border box: 边框盒包裹内容和内边距。大小通过
border相关属性设置。 - Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过
margin相关属性设置。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
这样我们就定义了这样一个盒子。另外我们这里介绍的是标准盒模型，还有一种IE盒模型我们一般称为怪异盒模型区别是：它的宽和高是计算到border的也就是所见即所得，其实这种模式才更符合认知。
如果我们要使用这种模型替换标准盒模型通过设置
.box {
box-sizing: border-box;
}
块级盒子（Block box） 和 内联盒子（Inline box）
这两种盒子是 CSS 中应用最广泛的盒子，两种盒子的区别是：
display: block：
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
width和height属性可以发挥作用- 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”
display: inline：
- 盒子不会产生换行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
display: inline-block:
它在内联和块之间提供了一个中间状态，既希望能够不进行换行，又能设置宽高时非常有用。
- 设置
width和height属性会生效。 padding,margin, 以及border会推开其他元素。
定位Position
static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时top,right,bottom,left和z-index属性无效。relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先进行固定。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
