首页 > 代码库 > box-sizing重置盒子模型计算规则
box-sizing重置盒子模型计算规则
目标大纲
一.语法声明
box-sizing : content-box | border-box | inherit
二.属性值说明
content-box 在宽度和高度之外绘制元素的内边距和边框
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
inherit 继承 父元素 box-sizing属性的值
三.浏览器的兼容性
说明IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-
推荐写法
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
测试代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>box-sizing</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .box { 12 background-color: #fff; 13 font-size: 12px; 14 width: 200px; 15 height: 200px; 16 border-width: 10px; 17 border-color: #34538b; 18 border-style: solid; 19 padding: 20px; 20 box-sizing: border-box; 21 -moz-box-sizing: border-box; 22 -webkit-box-sizing: border-box; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="box"> 28 该盒子边框是10px像素,内边距是20px像素,是算在盒子的宽高内的 29 即:<span style="color: red;">box-sizing:border-box</span><span style="color: red;">内边距和边框</span>都将<span style="color: red;">在已设定的宽度和高度内进行绘制</span> 30 </div> 31 </body> 32 </html>
参考资料
Css3 使用参考指南
学会使用box-sizing布局
box-sizing重置盒子模型计算规则
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。