题外话:
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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
