盒子模型

盒子模型:width/height/padding/margin/border
其中,padding和border影响盒子的占位

宽高为内容的宽高
height: 100px;
width: 100px;

border: 10px dotted green;
边框
第一个值:线的粗细
第二个值:线的类型solid/dashed/dotted
第三个值:线的颜色

padding: 20px 10px 30px 40px;  padding: 10px;
内边距:内容到边框之间的间隙
只写一个值:表示四边的padding都为该值
写两个值:第一个值表示上下的padding,第二个值表示左右的padding
写三个值:第一个值表示上边的padding,第二个值表示左右的padding,第三个值表示下边的padding
写四个值:表示上右下左

margin: 10px;
外边距

box-sizing: border-box;
设置盒子大小为设置的width和height

 

posted @ 2019-09-16 10:14  陌漠  Views(107)  Comments(0)    收藏  举报