css中的width,height,属性与盒模型的关系

时间:2022-10-14 21:45:56

这段话很容易记住盒模型:

css中盒子模型包含属性margin、border、padding、content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西(content);而填充(padding)就是怕 盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框(border)就是盒子本身了;至于边界(margin)则说明盒子摆放的时候的不 能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。

w3c中的盒子模型的宽:包括margin+border+padding+width;同样w3c中的盒子模型的高:包括margin+border+padding+height;

css中width与height的计算方法

在 CSS 中,width 和 height 指的是内容区域(即content)的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸。

但是在浏览器中实际的宽度与高度的值是按width=margin-left + margin-right + padding-left + padding-right + width与height=margin-left + margin-right + padding-left + padding-right + height这个计算的。所以当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。因此在我们布局网页的时候要将这一部分内容计算在内。

例如:#div{margin:10px;padding:10px;border:10px;width:100px;height:100px;} 他的实际width为160px ,height为160px。