当前位置:Gxlcms > html代码 > css中box-sizing简单说明(标准盒式模型和怪异盒式模型)_html/css_WEB-ITnose

css中box-sizing简单说明(标准盒式模型和怪异盒式模型)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:20人阅读

  今天写程序做布局的时候,遇到关于css中盒式模型的问题,百度了下这属性的解释,脑大啊,文字太绕看不懂。怎么办,于是自己动动手写了段程序测试,嗯,不错,一看效果就恍然大明白了。这里简单说明下,也可能说得比较粗浅。不过希望可以帮到一些前端的朋友。

  首先说下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宽的黄色的边框;

hello
hello

  结果如图:边框向内扩展

接着我们在为div添加10px的内边距;

#bx3{padding:10px;}

  结果如图:内边距向内扩展,注意“hello”的位置。

  我想到这里对这两个属性大家都和清楚了吧。

现在总结下,box-sizing取值有三个context-box,border-box和inherit,content-box是box-sizing的默认值,意思是元素实际占用的空间宽度=我们设置的宽度(width)+边框+内间距,我们设置div的宽度后,再加边框和间距,边框和间距是向外扩展的。border-box元素实际占用的空间的宽度就等于我们设置的宽度,如果设置边框和间距,边框和间距就向内扩展。至于inherit属性,应该大家都知道,它爹是什么属性,它就继承什么。

本来一件很小的事情,竟然?嗦这么久,最后请求这个世界原来完美主义者和强迫症患者,我们是无辜的

人气教程排行