盒子模型
很简单每一个元素都是一个盒子，从里到外分别为
content 内容
margin 外边距
border 边框
padding 内边距
除了content其它都有top right bottom left
border#
border-width#
可以用2px, 2em 方向表示：border-left-width
也可以关键字表示
| 关键字 | 说明 |
|---|---|
thin | 细边线 |
medium | 中等边线 |
thick | 宽边线 |
border-color#
没啥讲的
border-style#
| 值 | 解释 |
|---|---|
none | 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 |
hidden | 和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。 |
dotted | 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。 |
dashed | 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。 |
solid | 显示为一条实线。 |
double | 显示为一条双实线，宽度是 border-width 。 |
groove | 显示为有雕刻效果的边框，样式与 ridge 相反。 |
ridge | 显示为有浮雕效果的边框，样式与 groove 相反。 |
inset | 显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。 |
outset | 显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。 |
border-radius#
可以用px em 10% 来表示，复数无效，
复合写法是左上开始顺时针
支持一个角，两个角度，如 10px/50px
border-radius:10%/30%;数值的原理就是在四个角画一个半径为xxpx的⚪，和两边相切。
画圆#
所以css画圆就是border-radius=正方形边长/2
所以一个圆如下
.box1{ width: 300px; border:20px solid black; height: 300px; padding: 5px; box-sizing: border-box; margin: 20px; border-radius:150px; /*等于边长一半*/}或者border-radius:50%
border-collapse#
是专门用在表格上的，就是表格单元格相邻的地方，边框合并
table,td{ border: 1px solid blue; border-collapse: collapse;}box-sizing#
普通模式下box的实际大小是content++margin+border，所以我们想要一个尺寸再加了border,就会超出我们想要的尺寸了
加上box-sizing:border-box;后盒子最后尺寸就不会变了，只会缩小content
.box1{ width: 500px; border:5px solid black; height: 400px; box-sizing: border-box;}这样最后盒子的实际大小就是width 500px,不然就是510px
padding#
就是内边距，没啥好讲的，就是会影响盒子的大小，当然加了box-sizing后只会缩小盒子了
margin#
外边距和padding差不多
不过可以合理利用auto这个值
比如盒子水平居中，可以设置左右的值为auto就可以了
margin:20px auto;这里只有块级盒子生效
对于inline 和block-inline无效，但是也有方法，就是给父元素加text-align: center;inline元素被看成内容就行
相邻块级元素margin合并#
相邻的两个块级元素，如果有上下外边距，你会发现它们之间的距离不等于2个margin相加，只会取其中最大的一个margin
解决方案就是给相邻的两边只给其中一个加
清楚网页元素内外边距#
*{margin:0;padding:0;}一般放在css第一行代码
box-shadow#
盒子阴影
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */box-shadow: inset 5em 1em gold;/* 任意数量的阴影，以逗号分隔 */box-shadow: 3px 3px red, -1em 0 0.4em olive;