1.盒子模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）
2.border，设置元素的边框，属性（边框三要素）：宽度、样式、颜色，这也是通常border属性值的书写顺序（非严格要求）
单独书写：border-width（宽度，默认3px）、border-style（样式，默认none）、border-color（颜色，默认黑色）
border-style属性值：dotted（点状）、solid（实线）、double（双实线）、dashed（虚线）、无边框（none）
3.padding，设置元素内容与边框之间的距离，增加内边距会扩大元素边框所占用的区域
书写格式：padding:value（四边设置，可多值）、padding-top/right/bottom/left:value（单边设置），value取值可以为像素、百分比，但不能为负数
4.margin，设置元素边框外周围的空白区域，外边距是透明的
书写格式：margin:value（四边设置、可多值）、margin-top/right/bottom/left:value（单边设置），value取值可以为像素、百分比、auto、负数
外边距合并，当两个垂直外边距相遇时，他们将形成一个外边距，即外边距合并
合并后的外边距的高度等于发生合并的两个外边距中高度较大者
两个块级元素是包含关系时，要设置被包含元素的相对边距，需要增加父元素border（边框）或使用“ overflow：hidden”或“ padding”
外边距特点：① 块级元素的垂直相邻外边距外边距会合并，② 行内元素不占上下外边距，且左右外边距不会合并，③ 浮动元素的外边距也不会合并，④ 允许指定负数外边距值
5.怪异盒子，盒子模型分为两种，一种是符合W3C规范的标准盒子模型，另一种是IE的盒子模型，也被叫做怪异盒子
IE盒子模型也包括margin、border、padding、content，不过IE盒子模型的宽（width）包含了border和padding
6.box-sizing，该属性用于指定当前元素使用哪种盒子模型，标准（W3C）或 怪异（IE）
属性值：
content-box（标准），padding和border不会被包含在width和height内
border-box（怪异），padding和border被包含在width和height内，即元素实际大小只与width和height有关
7.flexbox，伸缩盒子模型（也叫弹性盒子）
它决定一个盒子在其他盒子中的分布，以及如何处理可用的空间。
该模型可以轻松的创建“自适应”浏览器窗口的流动布局。
传统盒子模型基于HTML文档流排列，弹性盒子模型可以规定特定的顺序。
通过设置 display属性值为 flex开启弹性盒子模型。
设置了弹性盒子模型后，float、clear、vertical-align在 flex中不起作用。
8.flex
基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
.d0 {
100%;
height: 600px;
background-color: aliceblue;
display: flex;
}
.d1 {flex-grow: 1; background-color: blue;}
.d2 {flex-grow: 2; background-color: aquamarine;}
.d3 {flex-grow: 1; background-color: coral;}
</style>
</head>
<body>
<div class="d0">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>
display:flex，定义外层父容器 d0为弹性布局，默认为水平布局
flex-grow:value，该属性表示当前子项目在父容器中的占比，默认值为0
flex-direction，定义灵活项目的布局方向，属性值：row（默认值，灵活项目水平排列）、row-reverse（灵活项目以相反的顺序水平排列）
column（灵活项目垂直排列）、column-reverse（灵活项目以相反的顺序垂直排列）
justify-content，设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，使用该属性之前必须先声明父元素为弹性盒子
属性值：flex-start（默认值，子项目位于容器的开头）、flex-end（子项目位于容器的结尾）、center（子项目位于容器的中心）、
space-between（子项目位于各行之间留有空白的容器内）、space-around（子项目位于各行之前、之间、之后都留有空白的容器内）
align-items，该属性定义灵活子项目在flex父容器的侧轴（纵轴）方向上的对齐方式
属性值：stretch（默认值，拉伸子项目以适应容器）、center（子项目在容器中心）、flex-start（子项目在容器开头）、flex-end（子项目在容器末端）、baseline（子项目在容器基线）