CSS3属性box-sizing使用指南


Posted in HTML / CSS onDecember 09, 2014

box-sizing用于改变CSS盒子模型,从而改变元素宽高的计算方式。

box-sizing取值如下:

复制代码
代码如下:

box-sizing: content-box | padding-box | border-box

默认值是  content-box ,对应CSS2.1规范中标准的盒子模型计算方式,即 width 和 height 是内容区的宽与高, 不包括边框,内边距,外边距;

 padding-box 根据MDN的说法,目前还是一个实验性的属性, width 和 height 包括内容区和内边距,不包括边框和外边据;

 border-box 包括内边距与边框,不包括外边距。这是IE 怪异模式(Quirks mode)使用的 盒模型 。

例子(摘自MDN)

复制代码
代码如下:

/* support Firefox, WebKit, Opera and IE8+ */

.example {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

对JS的影响
根据MDN的叙述:

由window.getComputedStyle 获取height时不会考虑box-sizing, 至少 Firefox 18 (bug 520992) 与 Internet Explorer 9 是这样,  不过Chrome 24 不是(其它浏览器未测试). 注意 IE9 currentStyle 不能返回正确的height值。

关于Firefox 18及IE9之后的版本,我还没有测试。

关于jQuery中 .width() 和 .height() 的返回值
jQuery 1.8 版本之后增加了对 box-sizing 的支持,但这还与浏览器是否支持 box-sizing 有关,简而言之,1.8版本之后, .width() 和 .height() 返回的永远都是内容区的宽和高,见如下代码:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
#container {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 500px;
padding: 5px;
border: 5px solid gold;
}
</style>
<script src="js/jquery-1.8.0.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var $el = $('#container')
var w = $el.width();
console.log(w)
</script>
</body>
</html>

各浏览器打印结果如下

IE6/7 : 500
IE8/9/10: 480
Safari5/6: 480
Chrome21/Firefox14: 480
 IE6/7不支持box-sizing,内容区的宽度是500,所以输出的值也是500,而其他支持该属性的浏览器,内容区宽度减去了 padding 和 border 的值,变成了480.

另:jquery中的 .outerWidth() 和 .outerHeight() 方法不受影响。

HTML / CSS 相关文章推荐
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 #HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 #HTML / CSS
css3的transform中scale缩放详解
Dec 08 #HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 #HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 #HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 #HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 #HTML / CSS
You might like
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php实现的日历程序
2015/06/18 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
JS 继承实例分析
2008/11/04 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python编写简单爬虫资料汇总
2016/03/22 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python正则表达式知识汇总
2017/09/22 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python3.7 的新特性详解
2019/07/25 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python装饰器用法与知识点小结
2020/03/09 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
2014年中秋寄语
2014/08/11 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
Ruby处理CSV数据方法详解
2022/04/18 Ruby