盒子模型

浪尽此生 提交于 2019-11-29 18:23:00

盒子模型: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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!