当前位置:首页 > 站长笔记 > 正文
运行天数:2999 天 最后更新:2020-7-7

CSS3 box-sizing 属性

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2015年06月16日 | 作者: 影子 | 分类: 站长笔记 | 点击量: 1,434

WDJA网站内容管理系统,免费开源可商用 点我获取,简单好用的PHP版CMS

当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。这里有一个例子,两个元素都设置了 box-sizing: border-box; :

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

CSS3 box-sizing 属性

既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

既然 box-sizing 是个很新的属性,目前你还应该像我之前在例子中那样使用 -webkit-和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。



手机扫码浏览本文


关键词:

本文网址:https://www.menglei.net/1763/,转载请以链接形式注明出处,谢谢合作!

*本站部分内容转载自其他媒体,版权归其所有。如若内容或图片侵犯您的权益,请与本站联系,我们将在24小时内处理完毕。

作者:清晨@深圳网站建设专家. | 清晨,领先的深圳网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com