理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型。 正常盒模型 正常盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型。 下图更方便理解。 正常盒模型是指:盒模型的大小包括content,padding,border,...
box-sizing: border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 ③举例说明:下面有两个宽、高、内边距、外边距相同,box-sizing分别为content-box和border-bo...
box-sizing: border-box; } 以上例子中,.box元素使用了content-box,其实际宽度为(200 + 2 * 10 + 2 * 1)px,高度为(100 + 2 * 10 + 2 * 1)px。 而.border-box元素使用了border-box,其实际宽度和高度为200px和100px,包括了边框和内边距在内。 这样设置盒模型计算方式,可以更好地控制元素的尺寸和...
在CSS3中,通过box-sizing属性可以更改盒子尺寸的计算方式。将box-sizing设为content-box(默认值)时,表示使用传统的计算方式;设为border-box时,表示使用CSS 3的一种新的计算方式,通过这种方式可以解决传统盒子在添加了边框和内边距之后,盒子被撑大的问题。示例代码如下。
box-sizing 默认值为 content-box,当做如下设置: box-sizing: content-box;width:600px;height:600px;margin:10px;padding:10px;border:1pxsolid#000; 元素的尺寸如下: 元素的宽为:内容区+margin+padding+border,即 600+10+10+1。内容区宽度为 600,实际占据的宽度为 621。
对于盒子模型的理解 首先W3C的解释 1、box-sizing:content-box的时候: 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。...
(Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度...
这个content-box就是标准模型,诞生最早。content-box顾名思义,就是内容盒子。 任何浏览器默认使用的都是标准模型。 content-box 观察上图, 在css区 设置div宽度为100px,高度为60px; 在css区 设置 box-sizing: content-box 盒模型总content区宽度为100px,高度为60px,padding和border不占据content区。
box2为border-box,width/height代表整个盒子的宽高,盒子已经固定宽高为150px,当有padding、border的时候,内容往里压缩,占位大小不变。盒模型宽/高 = width/height 让我们继续验证这个结论,若此时将box1和box2再加上border .box1 { box-sizing: content-box; ...