css3特性之box-sizing的作用
分类:计算机 | 前端 | CSS | 综合 1405
更新:2020-04-20 23:16:59编辑
参考资料
https://www.html.cn/qa/css3/13660.html
https://zhidao.baidu.com/question/1433717962750188179.html
1 定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
2 语法
box-sizing: content-box|border-box|inherit;
值 | 描述 |
---|---|
content-box | 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
border-box | 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 规定应从父元素继承 box-sizing 属性的值。 |
不同浏览器的兼容性
-moz-box-sizing: border-box; /Firefox3.5+/
-webkit-box-sizing: border-box; /Safari3.2+/
-o-box-sizing: border-box; /Opera9.6/
-ms-box-sizing: border-box; /IE8/
box-sizing: border-box; /W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的百w3c标准语法)/
注意:box-sizing属性是CSS3的属性,IE低版本不支持,注意兼容性。
3 实例说明
现在有两个div元素div1和div2,div2在div1的内部,宽度和高度都是div1的一半:
<body>
<div style="width:500px;height:300px;background-color:#ffa627;">
<div style="width:50%;height: 50%;background-color:#7ee0ff;">内部div2</div>
</div>
</body>
如果这时我们给div2元素增加30px的内边距,我们会发现div2的宽度高度已经超过了div1的一半,这个时候div2的宽度和高度就是div1的宽度和高度的一半加上30px。
<body>
<div style="width:500px;height:300px;background-color:#ffa627;">
<div style="width:50%;height: 50%;padding:30px;background-color:#7ee0ff;">内部div2</div>
</div>
</body>
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据10959
- 2three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目9509
- 3Microsoft Visual C++ Redistributable是什么,有什么作用?7287
- 4mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)5868
- 5uni-app使用经验—vue页面和html页面如何互相调用接口并传参5489
- 6Intellij IDEA下的版本控制VCS的启用与关闭4922
- 7Spring学习经验—@ResponseBody注解的使用说明4906
- 8Druid异常解决经验—java.sql.SQLException url not set4522
- 9如何用批处理命令(bat脚本)启动和停止windows服务4300
- 10nuxt.js项目中如何添加和使用全局变量4165
- 11解决SpringBoot使用maven下载不了jar包的问题3502
- 12linux中解压tar.gz文件报错“gzip: stdin: invalid compressed data--format violated”3405
- 13nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数3251
- 14在Nuxt.js项目的head中引用外部js文件3094
- 15在NVIDIA控制面板设置参数时提示“拒绝访问 无法应用选定的设置到您的系统”的解决方法之一3071