盒子模型

左心房为你撑大大i 提交于 2019-11-26 01:20:23
首先,任何情况下 margin 都不包含在height和width内。而padding与边框是否包含则有两种情况。
 
在标准盒子模型中
如图:325x146便是宽高,即内容框的宽高,并不包含padding和border。这是标准盒模型的情况。

非常值得注意的是:padding + margin + border + 内容 = 整个屏幕的高/宽

平常出现滚动条就是因为设置了border,padding,margin。以后一定要注意这个问题。
通过css样式,可以让我们更容易掌控div的高度和宽度
box-sizing:border-box;   //   width = 左右padding + 左右border + 内容的宽
box-sizing:content-box;  // width  = 内容的宽
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!