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

上一篇:LeetCode104: Maximum Depth of Binary Tree


下一篇:PHP获取远程文件的几种方式