目录
1、盒尺寸四家庭
width：宽度
height：高度
margin：外边距
padding：内边距
盒模型：
2、border边框
border简写：border-position（top | right | bottom | left）-styling（width | style | color ）
border分样式：border-width（length | medium | thin | thick）
border-style（none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset）
border-color（color）
border-radius：（边框圆角）
border-image：（边框图片）
box-shadow：（盒子阴影）
内容
1、盒尺寸四家庭
1.1width："auto | length"；宽度
1.2height："auto | length"；高度
1.3margin："auto | length"；外边距
1.3.1简写：margin："top right bottom left"；"top left-right bottom"；"top-bottom left-right"；
1.3.2注意点：块级元素：上下重叠（外边距合并），左右不重叠；内联元素：没有上下，只有左右且左右不重叠
1.4padding："length"；内边距
待阅读完CSS世界再补充
2、border边框
2.1border简写：border-position（top | right | bottom | left）-styling（width | style | color ）
1 border-left： 2 border-style： 3 border-top-style：dotted
2.2border分样式
2.2.1border-width："length | medium | thin | thick"；
2.2.2border-style："none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset"；
2.2.3border-color："color"；
2.3border-radius：（边框圆角）"[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4}"；
/* 所有角都使用半径为10px的圆角 */ div{ border-radius:10px;} /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ div{ border-radius: 5px 4px 3px 2px; } /*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径*/ div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; } /*圆*/ div{ border-radius:50% }
2.4border-image：（边框图片）"<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-outset '> ]? || <' border-image-repeat'>"；（路径 | 内偏移 | 宽度 | 超出边框 | 是否平铺）
2.4.1border-image-slice内偏移："number | % | fill"；（数字 | % | 图像中间部分）
2.4.2border-image-outset超出边框："length | number"；（长度 | 代表对应的 border-width 的倍数）
2.4.3border-image-repeat是否平铺："stretch | repeat | round"；（拉伸 | 平铺 | 类似repeat，若无法完整平铺，则对图像进行缩放以适应区域）
2.5box-shadow：（盒子阴影）："h-shadow v-shadow blur spread color inset"；
spread：阴影尺寸大小
inset：由outset改成inset