CSS3 Box-sizing属性
来源:互联网 发布:软件体系架构图 编辑:程序博客网 时间:2024/05/17 22:59
1、语法:box-sizing:content-box | border-box | inherit
content-box为默认值
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包含了元素内容宽度、边框宽度、内距宽度)
1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height)
即:Element Width/Height = border+padding+content width/height。
==>
Element Height = content height + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)
2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。
(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)。
==>
Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)
更详细的理解可以看http://blog.sina.com.cn/s/blog_877284510101kt87.html
- CSS3 box-sizing 属性
- css3:box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing 属性
- CSS3 box-sizing 属性
- CSS3 Box-sizing属性
- 【CSS3】box-sizing 属性
- CSS3 box-sizing属性
- 【CSS3】Box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- CSS3 box-sizing 属性
- css3 box-sizing属性
- SAP PI的50个常见问题及对策
- Codeforces 165E Compatible Numbers 题解&代码
- PHP实现http与https转化
- git资源整理--罕见好用
- input 只能输入数字
- CSS3 Box-sizing属性
- 将QJsonObject对象转换成qstring类型
- 三人行必有我师
- 学习计划
- Python第三方模块
- error C2664: “int CWnd::GetWindowTextW(LPTSTR,int) const”: 不能将参数 1 从“char [15]”转换为“LPTSTR”
- 合唱队
- 深入理解JVM:OutOfMemory实战
- nginx配置https方法