目录
盒子：
封装html元素，包括但不限于边框、内外边距和实际内容。
分别是 border 边框，content 内容， padding 内边距，margin 外边距。
border 边框：
宽度 border-width ：1px；
颜色 border-color：red；
样式 border-style ：solid（实线）| dashed（虚线）| dotted（点线）| double（双边框）；
圆角：
border-radius ：length；参数或者百分比
以左上角为起点，设置两个值既对角的半径，四个值则是顺时针的四个脚半径，分写也要按照顺序。
简写无顺序，空格隔开。
边框分开写：
上：border-top;
下：border-bottom；
左：border-left；
右：border-right；
边距：
内边距 padding ：
内边距：left、right、top、bottom。
padding ：5px; 只有一个值代表上下左右都有5px的像素。
padding ：5px 10px; 上下 5 px，左右 10 px；
padding ：5px 10px 20px；上 5 px，左右 10 px，下 20 px。
padding ：5px 10px 20px 30px；上 5 px，右 10 px，下 20 px,左 30 px（顺时针）。
外边距 margin：
外边距：left、right、top、bottom。
简写方式与 padding 一样。
块级盒子水平居中：
1、盒子设置了宽度（width）。
2、左右边距设置为auto。
既 margin = 0 auto；
行内元素或行内块元素水平居中：
父元素加 text-aligh：center;
嵌套块元素塌陷：
对于两个有嵌套关系的盒子，父元素有上外边距同时子元素也有上外边距，子元素会贴着父盒子的顶部，子元素加大内边距只会连着父盒子一起往下推。
解决办法：
1、父元素加一个边框，颜色为透明（transparent）;
2、父元素加内边距。
3、父元素加 overflow：hidden;（推荐）。
清除网页元素内外边距：
浏览器会自带边距，为了不造成影响，开局先清内外边距。
*{
padding : 0;
margin : 0;
}行内元素为了照顾兼容，尽量值设置左右内外边距。
盒子阴影：
box-shadow： h-shadow（水平阴影 必 可负值）| v-shadow（垂直阴影 必 可负值）| blur（模糊距离）| spread（尺寸）| color（颜色）| inset（外部阴影改内部）；
按照顺序，不占用空间
box-shadow: 20px 20px 0 10px red ;文字阴影：
tex-shadow：h-shadow | v-shadow | blur | color；