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 { width: 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> <div></div> <div></div> <div></div> </div> </body> </html>