重学盒子模型（w3c的标准盒模型与ie6以下的盒子模型）

最新推荐文章于 2024-07-27 09:56:28 发布

lyx9904

最新推荐文章于 2024-07-27 09:56:28 发布

阅读量205

点赞数

分类专栏：重学css3 文章标签： css

本文链接：https://blog.csdn.net/lyx9904/article/details/114380124

版权

重学css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒模型有很多种，比如inline，inline-block，block，table等等。
而盒模型由display，内距，外距，宽高，边框，position，float决定

在css3中引入了盒模型属性box-sizing，共有三个属性值

content-box:翻译过来就是内容盒，我理解为在这个属性下我设置的宽高都是只指内容（即元素）的大小，该盒子真正的大小还要加上内距，边框。（加起来是内盒），
内容盒，也是w3c的标准盒子
所以当宽高不变，给该盒子设置内距（padding）外距（margin）会撑大盒子

如果是计算元素的空间尺寸还需要加上外距。

border-box: 边框盒子，即设置的宽高是指盒子边框的宽高，改变内距并不会影响盒子的大小

计算外盒子的尺寸仍需加上外距

边框盒子，是ie6以下及怪异模式下的盒子。

可以通过设置box-sizing的属性来改变盒子的属性

使用边框盒的好处就是不会因为改变内距而影响原有的布局

<style>
        .w3cbox{
            background-color: red;
            width: 200px;
            height: 200px;
            padding-top:50px;
            border: 10px solid black;
            margin: 0 auto;
        }
        /* 如果是求元素的空间尺寸大小还要加上外边距
        w3c的标准盒子的内盒子的元素尺寸大小 = 内容 + 内距 + 边框 
        （高宽指的是内容的大小）
        所以当改变盒子的内距，边框时，盒子的元素尺寸会跟着变化
        ie6的标准盒子的内盒子的元素尺寸大小 = 内容
        （高宽指的是内容+ 内距 + 边框 ）
        所以改变宽高不会改变盒子的尺寸大小 */
        .iebox{
            background-color: rgb(25, 0, 255);
            width: 200px;
            height: 200px;
            padding-top:50px;
            border: 10px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="w3cbox">
        我是W3C的盒子 
    </div>
    
    <div class="iebox">
        我是IE6的盒子
    </div>
</body>
</html>