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 )
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