CSS3 box-sizing属性


Posted in HTML / CSS onApril 17, 2009

说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内。这为前端工程师的工作平添了不少麻烦,几户每个需要定义尺寸的 box 都要思量一下:是否触发了“盒模型 bug”?

同时,由于另一撮浏览器对标准的遵从,我们在精确定义一个在有限空间内显示的 box 时,也需要计算一下:留给它的空间只有那么大,刨去 border 和 padding,我们该把它的 width 写成多少呢?

这种情况在 CSS3 时代有了改善,得益于这个叫做 box-sizing 的属性,它具有“content-box”和“border-box”两个值。

  • 定义 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准;
  • 定义 box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6 相同;

CSS3 box-sizing属性

为什么说这个属性“迟来”呢?IE 对于盒模型的解释固然不符合 W3C 的规范,但是也有它的好处:无论如何改动 border 与 padding 的值,都不会导致 box 总尺寸发生变化,也就不会打乱页面整体布局。而在 Firefox 等现代浏览器下,如果我们要改变一下 padding 的值,就不得不重新计算 box 的 width。现在 IE6 寿终正寝,这个 CSS 属性未免有些姗姗来迟。

试用这个新属性,Firefox 请使用 -moz-box-sizing,Safari / WebKit 请使用 -webkit-box-sizing,Opera 直接用 box-sizing 即可。

HTML / CSS 相关文章推荐
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 #HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 #HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 #HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 #HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 #HTML / CSS
介绍CSS3使用技巧5个
Apr 02 #HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 #HTML / CSS
You might like
php中AES加密解密的例子小结
2014/02/18 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
js使用心得分享
2015/01/13 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python列表的切片实例讲解
2019/08/20 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
通信工程毕业生求职信
2013/11/16 职场文书
工作自我评价分享
2013/12/01 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
大专学生求职自荐信
2014/07/06 职场文书
贷款担保书
2015/01/20 职场文书
毕业实习单位意见
2015/06/04 职场文书
小学教育见习总结
2015/06/23 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
MySQL添加索引特点及优化问题
2022/07/23 MySQL