盒模型
所有元素表示为盒子模型，CSS通过盒子模型做layout.
控制盒子类型：display: block, inline, inline-block, flex…
控制盒子大小&计算方式: width, height…
box- sizing: content-box, border-box…
控制盒中内容流: overflow: auto, scroll, Hidden…
控制定位: position: static, relative, absolute, fixed, sticky
是否可见: visibility: visible. hidden…
展现形式
1.图像基础与三角形
三角形：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
}
对比右图：
.triangle {
width: 30px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
}
再对比右图：
.triangle {
width: 30px;
height: 30px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
margin: 0px;
}
我们发现，width, height定义了文字content的区域大小。而定义border的数值是border外边缘到border内边缘（若padding默认为零，也是content边缘）的距离。
再观察下图，代码增加了padding: 10cm：
.triangle {
width: 30px;
height: 30px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
margin: 0px;
padding: 10cm;
}
Padding定义了content边缘到border内边缘的距离，增加padding数值后，左右上下都被拉宽，图像看上去更像梯形。
2. 渐变边框
.awesome {
width: 130px;
height: 130px;
border: 8px solid transparent;
border-radius: 12px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image:
linear-gradient(to right, #fff, #fff),
linear-gradient(135deg, #0a080f, #de1717)
}
其中，border的transparent让边框的纯色透明，目的是让后面的背景渐变色可以展示出来。
Border-radius是边框的圆润程度，如果调整为112px，效果如下：
Background-clip决定了上色区域，在此为对边框上色。
而background-origin: padding-box, border-box;决定了颜色的过渡润滑度。删除之后的效果。
最后部分，以定义一个imagine的形式，作为box背景。因为之前边框的透明度为0，所以背景得以在边框显示。
盒模型-负外边距
设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠:
如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来;
