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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php addslashes 函数详细分析说明
2009/06/23 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php并发加锁示例
2016/10/17 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python实现解数独程序代码
2017/04/12 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
C#的几个面试问题
2016/05/22 面试题
《彩色世界》教学反思
2014/04/12 职场文书
催款通知书范文
2015/04/17 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript