在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin= 内容区宽度/高度 + padding + border + margin; box-sizing有两个值一个是content-box,另一个是border-box。 当设置为box-sizing:content-box时,将采用标准模式解析计算; 当设置...
首先说下box-sizing的取值问题,box-sizing的可选值有三个,inheirt,content-box(标准盒式模型)和border-box(ie6等非标准浏览器的怪异盒式模型); 首先说第一个取值content-box,content-box是box-sizing的默认值。意思是:元素实际占用的空间宽度=我们设置的宽度(width)+边框+内间距。假设我们设置一个div的宽度为100...
(1)当“box-sizing“的值为”content-box“时,css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。 (2)当“box-sizing“的值为”border-box“时,css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。 总结:box-sizing属性,让开...
属性:box-sizing *含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改 属性允许您以特定的方式定义匹配某个区域的特定元素。 属性值:content-box (默认值) 这是由CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 属性值:border-box 为...
标准盒子:box-sizing: content-box,我们为一个div设置了200px的宽和高,20px的内边距,10px的外边距。让我们来看一下效果: .weird{width:200px;height:200px;background-color:pink;box-sizing:content-box;padding:20px;border:10px solid #ccc;display:inline-block;margin:10px;} ...
在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的 盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin; 也即是说width = 内容区宽度 + padding + border CSS3的box-sizing属性 ...
怪异盒模型 ie 盒子模型的 content 部分包含了 border 和 pading 要让网页按标准盒模型去解析,则需要加上 doctype声明,否则不同的浏览器会按照自己的标准去解析。 box-sizing box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 ...
通过box-sizing属性，开发者可以控制浏览器采用标准盒子模型还是怪异盒子模型。五、box-sizing的兼容性 box-sizing属性在IE8及以上浏览器中兼容性良好。对于不要求兼容旧版浏览器的项目，推荐统一使用此属性。六、最佳方案 设置box-sizing为content-box或border-box，能确保宽度值仅包含内容宽度，简化布局过...
在标准的盒子模型中,width指content部分的宽度 1. 二IE盒模型 (怪异盒模型) 我们可以看出我们上面的使用的默认正是W3C标准盒模型 而这里盒模型的选取更倾向于项目和开发者的习惯,并没有绝对的好坏之分。 box-sizing的使用 如果想要切换盒模型也很简单,这里需要借助css3的box-sizing...
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。 即box-sizing属性可以指定盒子模型种类,content-box指定盒子模型为W3C(标准盒模型),border-box为IE盒子模型(怪异盒模型)。