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制作的20种loading动效
Jul 05 HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php explode函数实例代码
2012/02/27 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
Array对象方法参考
2006/10/03 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
详解vue-cli3使用
2018/08/14 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python PyTorch预训练示例
2018/02/11 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
关于python 跨域处理方式详解
2020/03/28 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
大学军训感言1000字
2014/02/25 职场文书
二手房买卖协议书
2014/04/10 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
世界红十字日活动总结
2015/02/10 职场文书
建国大业观后感600字
2015/06/01 职场文书