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与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 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数据库连接
2006/10/09 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python set内置函数的具体使用
2019/07/02 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python使用贪婪算法解决问题
2019/10/22 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
销售总监工作职责
2013/11/21 职场文书
公司节能减排方案
2014/05/16 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
启动仪式策划方案
2014/06/14 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
授权委托书公证
2014/09/14 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
python之django路由和视图案例教程
2021/07/26 Python