jquery源码解析(第3章元素之css3的box-sizing)
来源:互联网 发布:软件后门检测工具 编辑:程序博客网 时间:2024/06/03 19:28
Box-sizing 是 CSS3 的Box属性之一,那他当然也遵循CSS的Box model原理。CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,他们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系。
W3C的标准 Box Model:
外盒尺寸计算(元素空间尺寸)
Element空间高度 = content height + padding + border + marginElement空间宽度 = 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”。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
- jquery源码解析(第3章元素之css3的box-sizing)
- css3的box-sizing
- css3的box-sizing
- jquery源码解析(第3章元素之元素大小)
- CSS3学习之box-sizing
- 图解css3之box-sizing
- jquery源码解析(第3章元素之尺寸获取)
- jquery源码解析(第3章元素之偏移算法)
- jquery源码解析(第3章元素之坐标算法)
- 关于CSS3的box-sizing
- box-sizing是CSS3的box属性
- jquery源码解析(第3章元素之一些常见的细节)
- CSS3盒模型之box-sizing
- CSS3之box-sizing属性分析
- jquery源码解析(第4章元素之理解样式)
- CSS3教程:box-sizing属性的理解
- CSS3教程:box-sizing属性的理解
- CSS3的box-sizing属性详解
- D
- MongoDB和Redis区别
- 动态添加View和删除View的实例
- [LeetCode] 34. Search for a Range
- dp问题——Philosophers Stone
- jquery源码解析(第3章元素之css3的box-sizing)
- InputStream read()方法
- 杭电1710(纯C代码)
- 简单的进程
- 大型网站系统与Java中间件实践pdf
- c++通过cout输出字符变量的地址
- java面向对象三大特征
- linux copy_from/to_user原理
- HTML5: 标签的改变