时间:2021-07-01 10:21:17 帮助过:20人阅读
首先说下box-sizing的取值问题,box-sizing的可选值有三个,inheirt,content-box(标准盒式模型)和border-box(ie6等非标准浏览器的怪异盒式模型);
首先说第一个取值content-box,content-box是box-sizing的默认值。意思是:元素实际占用的空间宽度=我们设置的宽度(width)+边框+内间距。假设我们设置一个div的宽度为100px,如果再给这个div设置边框和间距内的话,边框和间距是向外扩展的。导致实际div的实际宽度大于100px。上代码和图一目了然。
首先定义一个宽和高为100px的div,设置box-sizing为content-box,背景为红色。为了突出显示我们把它放在一张蓝色背景上;
显示如下:
为了便于比较我们添加一个新的div,与上一个div的唯一区别就是增加了10px的黄色边框;
结果如图:border是在div的外面扩展的。
我们在为新增加的div添加一个10像素的内边距,结果如图内边距也是向外扩展,为什么说内边距是向外扩展的,可以注意“hello”的位置。
#bx3{padding:10px;}
好吧,讲完一个属性了,现在开始另一个属性,border-box。修改原来的div的box-sizing为border-box。
border-box是向内扩展的。 如果设置box-sizing成了border-box,元素实际占用的空间的宽度就等于我们设置的宽度,如果设置边框和间距,边框和间距就向内扩展。原先的例子再走一遍吧。(请原谅我是强迫症患者而且我还追求完美)
hello
没有边框和间距的初始图:
现在新增一个div用于对比,与原来的div的唯一区别就是多了10px宽的黄色的边框;
hellohello
结果如图:边框向内扩展
接着我们在为div添加10px的内边距;
#bx3{padding:10px;}
结果如图:内边距向内扩展,注意“hello”的位置。
我想到这里对这两个属性大家都和清楚了吧。
现在总结下,box-sizing取值有三个context-box,border-box和inherit,content-box是box-sizing的默认值,意思是元素实际占用的空间宽度=我们设置的宽度(width)+边框+内间距,我们设置div的宽度后,再加边框和间距,边框和间距是向外扩展的。border-box元素实际占用的空间的宽度就等于我们设置的宽度,如果设置边框和间距,边框和间距就向内扩展。至于inherit属性,应该大家都知道,它爹是什么属性,它就继承什么。
本来一件很小的事情,竟然?嗦这么久,最后请求这个世界原来完美主义者和强迫症患者,我们是无辜的