章节
问答
课签
笔记
评论
占位
占位

css3的box-sizing

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属性定义盒元素尺寸的计算方法:

  • content-box:默认值,计算方法为 width/height=content,表示指定的宽度和高度仅限内容区域,边框和内边距的宽度不包含在内。
  • padding-box:计算方法为 width/height=content+padding,表示指定的宽度和高度包含内边距和内容区域,边框宽度不包含在内。
  • border-box:计算方法为 width/height=content+padding+border,表示指定的宽度和高度包含边框、内边距和内容区域。
  • inherit:表示继承父元素中box-sizing属性的值。


正常情况下offsetWidth,offsetHeigth获取元素的尺寸是足够了,但是某些元素比如SVG,MathML返回尺寸出错(这里不考虑)。即便如此CSS3还增加了一个box-sizing选择盒子模型,于是jQuery里面就引入augmentWidthOrHeight这个方法来处理因为box-sizing设置导致的尺寸问题,augmentWidthOrHeight方法其实就是对盒子模型的一个处理,所以jQuery获取一个元素的widht/height 都是,ele.offsetWidt/offsetHeigth + augmentWidthOrHeight()方法才可以。

 

关于augmentWidthOrHeight方法

1.8增加了对css属性box-sizing的支持,需要注意与1.7.2的区别了。
1.7.2及以前的版本无论是否定义box-sizing: border-box返回的都是盒模型中元素内容的宽度或高度,不包括padding和border。
augmentWidthOrHeight方法是特别针对盒子模型的处理,例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?