Box-sizing 是 CSS3 的Box属性之一,那他当然也遵循CSS的Box model原理。CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,他们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系。
W3C的标准 Box Model:
外盒尺寸计算(元素空间尺寸)
Element空间高度 = content height + padding + border + margin Element空间宽度 = content width + padding + border + margin内盒尺寸计算(元素大小)
Element Height = content height + padding + border (Height为内容高度) Element Width = content width + padding + border (Width为内容宽度)
IE传统下 Box Model(IE6以下,不含 IE6 版本或“QuirksMode下IE5.5+”):
外盒尺寸计算(元素空间尺寸)
Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度) Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)内盒尺寸计算(元素大小)
Element Height = content Height (Height包含了元素内容宽度,边框宽度,内距宽度) Element Width = content Width (Width包含了元素内容宽度、边框宽度、内距宽度)
box-sizing属性定义盒元素尺寸的计算方法:
正常情况下offsetWidth,offsetHeigth获取元素的尺寸是足够了,但是某些元素比如SVG,MathML返回尺寸出错(这里不考虑)。即便如此CSS3还增加了一个box-sizing选择盒子模型,于是jQuery里面就引入augmentWidthOrHeight这个方法来处理因为box-sizing设置导致的尺寸问题,augmentWidthOrHeight方法其实就是对盒子模型的一个处理,所以jQuery获取一个元素的widht/height 都是,ele.offsetWidt/offsetHeigth + augmentWidthOrHeight()方法才可以。
- content-box:默认值,计算方法为 width/height=content,表示指定的宽度和高度仅限内容区域,边框和内边距的宽度不包含在内。
- padding-box:计算方法为 width/height=content+padding,表示指定的宽度和高度包含内边距和内容区域,边框宽度不包含在内。
- border-box:计算方法为 width/height=content+padding+border,表示指定的宽度和高度包含边框、内边距和内容区域。
- inherit:表示继承父元素中box-sizing属性的值。
关于augmentWidthOrHeight方法:
1.8增加了对css属性box-sizing的支持,需要注意与1.7.2的区别了。
1.7.2及以前的版本无论是否定义box-sizing: border-box返回的都是盒模型中元素内容的宽度或高度,不包括padding和border。
augmentWidthOrHeight方法是特别针对盒子模型的处理,例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
eq:
box-sizing <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .imgBox img { width: 40px; height: 40px; padding: 20px; border: 20px solid orange; margin: 10px; } #contentBox { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } #borderBox { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #paddingBox { -moz-box-sizing: padding-box; -webkit-box-sizing: padding-box; -o-box-sizing: padding-box; -ms-box-sizing: padding-box; box-sizing: padding-box; } </style> <title>jQuery.width</title> </head> <body> <div class="imgBox"><img id="contentBox" src="" alt=""/>contentBox</div> <div class="imgBox"><img id="borderBox" src="" alt=""/>borderBox</div> <div class="imgBox"><img id="paddingBox" src="" alt=""/>paddingBox</div> <ul></ul> <script> var contentBox = document.getElementById('contentBox'); var borderBox = document.getElementById('borderBox'); var paddingBox = document.getElementById('paddingBox'); $('body').append('<li>contentBox:' + contentBox.offsetWidth + '</li>\n <li>borderBox:' + borderBox.offsetWidth + '</li>\n <li>paddingBox:' + paddingBox.offsetWidth + '</li>') </script> </body> </html>