CSS3:box-sizing:不再为盒子模型而烦恼

时间：2015-08-19 20:36:29 阅读：308 评论：0 收藏：0 [点我收藏+]

标签：box-sizing 盒子模型 border-box content-bo

题外话:

W3C奉行的标准,就是content-box,就是需要计算边框,填充还有内容的;但是就我个人而言,
比较喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局);

盒子模型差异

盒子大小计算原理

W3C标准盒子 = (边框 + 填充 + 内容块大小) ,牵一发而动全身;
传统IE6盒子 = 整体宽高(边框,填充和随盒子大小而调整变化)

若是计算占用位置,两种盒子都要算上margin(边距)

简言之,W3C标准盒子是需要相加各种大小得到总体的宽高,而传统的IE6是从整体减去内在元素大小而达到调整效果

CSS3:box-sizing

box-sizing : content-box | border-box | inherit;,针对火狐的还有个padding-box,几乎不用啊!!!

content-box : 标准的W3C盒子模型
border-box: 传统IE6的盒子模型
padding-box: 目前只对火狐生效,也是减去适应..但是从padding开始

验证及效果

代码

简易代码,三个盒子

<!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>