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特性绘制简易版围棋效果
Sep 28 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
python类参数self使用示例
2014/02/17 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python微信撤回监测代码
2019/04/29 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
css3的transition属性详解
2014/12/15 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
护士节策划方案
2014/05/19 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
优秀党员事迹材料
2014/12/18 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
三八节祝酒词
2015/08/11 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫