20190329-盒尺寸、boder-

目录

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 ）

 border-left：
 border-style：
 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