这是我参与「第四届青训营 」笔记创作活动的第15天
介绍
盒子模型是基础中的基础，它可以扩展得很大，本文绕过display对各种盒子的介绍，针对的是盒子结构
各板块
标准盒模型和代替盒模型
content-box
传统的盒模型，但比较复杂和繁琐，主流推荐使用border-box模型，甚至mdn官网也推荐使用border-box。其内容是高宽设置的是中心内容（content)。其他的padding，border另算。加在上面，导致运算变复杂
border-box
也叫替代ie盒模型。高宽包括content，padding,border这几个值
盒模型的结构
padding
内边距比较简单，为简写，其子属性有pt,pr,pl,pb
border
border-radius
设置外边框圆角
它是依次从盒子的左上角开始顺时针转动，左上到右上到右下到左下
box-shadow
- 制造阴影，这个用得很多,我们一般都是黑阴影，然后阴影一般朝向右边和下面
- 属性值有一下几个
- x偏移量，y偏移量，阴影模糊半径，阴影扩散半径，阴影颜色
- 他们分别对应offset-x offset-y blur-radius spread-radius color
- 其中特别注意阴影模糊半径和阴影扩散半径，前者的优先级高于后者，也就是说当输入数量为三个的时候，会先使用阴影模糊半径。并且注意阴影半径我觉得取名得不好，应该叫做阴影模糊范围，因为他其实是从外部·到内部进行阴影渲染，阴影扩散有点像伸缩比
border这个属性是一下几个的略写
-
border-width
可以写粗细的英语单词，比如thin,thick,medium 也可以写从一到四的值， 浏览器会根据数量进行判断。 -
border-style
属性的值较多，基本用的就只有solid这个值，而且还能使用两个值 none无边框 hidden无边框，与none有一定区别，先不细究 dotted就是围绕盒子以每个点围一圈 dashed虚线 solid实线 double双实线 groove雕刻效果 ridhe浮雕效果 inset陷入效果 outset突出效果 -
border-color
可以使用不同的颜色，使用的值跟color差不多
