css中盒模型的理解

2021-03-19

阅读：13

简述css中盒模型的理解

css中盒模型的概念

在HTML文档中，所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素。盒模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）这四部分组成如图

盒模型的分类

盒模型分为 w3c标准盒模型、IE盒模型两种

在css中，我们可以使用 box-sizing 来设置这两种模型 box-sizing:content-box; (默认) box-sizing:border-box;

W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容，不包含padding与margin，并且盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素

元素width只包含内容区域在标准盒子模型下，元素总宽度= width+padding+border+margin

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型

元素width包含内容、内边距、边框在IE盒子模型下，元素的总宽度 = width+margin

例如，我们创建两个盒子，一个用标准盒模型、一个用IE盒模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 200px;
                height: 150px;
                line-height: 150px;
                font-size: 24px;
                color: #ffffff;
                padding: 20px;
                text-align: center;
                margin-bottom: 20px;
                background: #0000FF;
            }
            .box2{
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="box box1">
            标准盒模型
        </div>
        <div class="box box2">
            IE盒模型
        </div>
    </body>
</html>

QQ截图20210319155608.png

搜索一下

加入前端e栈