Heim > Artikel > Web-Frontend > CSS3:box-sizing:不再为盒子模型而烦恼_html/css_WEB-ITnose
CSS3:box-sizing:不再为盒子模型而烦恼_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:291118Durchsuche
题外话:
W3C奉行的标准,就是content-box,就是需要计算边框,填充还有内容的;但是就我个人而言,
比较喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局);
盒子大小计算原理
W3C标准盒子 = (边框 + 填充 + 内容块大小) ,牵一发而动全身;
传统IE6盒子 = 整体宽高(边框,填充和随盒子大小而调整变化)
若是计算占用位置,两种盒子都要算上margin(边距)
简言之,W3C标准盒子是需要相加各种大小得到总体的宽高,而传统的IE6是从整体减去内在元素大小而达到调整效果
CSS3:box-sizingbox-sizing : content-box | border-box | inherit;,针对火狐的还有个padding-box,几乎不用啊!!!
代码
简易代码,三个盒子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>box-sizing</title> <style> .demo1,.demo2,.demo3{ width:200px; height:200px; background-color: #2277AD; margin:20px; } .demo1{ box-sizing: content-box; border:30px solid #12D732; padding:10px; } .demo2{ box-sizing: border-box; border:30px solid #12D732; padding:10px; } .demo3{ box-sizing: padding-box; border:30px solid #12D732; padding:10px; } </style></head><body> <div class="demo1"> 我是盒子内部的内容啊!! </div> <div class="demo2"> 我是盒子内部的内容啊!! </div> <div class="demo3"> 我是盒子内部的内容啊!! </div></body></html> 效果图
- 这个属性支持IE8+,其他浏览器基本都支持了(应该很少人用非常老的FF,CHROME这些吧)
- 感觉border-box非常适合用来排版布局,因为不用担心内距填充这些导致盒子大于包裹层大小,导致换行,或者其他乱七八糟的问题
- 标准盒子也有他的好处,可以针对性的控制内容块的大小..很细致的做出调整,就是需要计算比较麻烦点
版权声明：本文为博主原创文章，未经博主允许不得转载。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：网页字体特效代码_html/css_WEB-ITnoseNächster Artikel：nofollow标签如何使用_html/css_WEB-ITnose