正常盒模型和怪异盒模型

最新推荐文章于 2023-10-22 03:49:23 发布

MapVillage

最新推荐文章于 2023-10-22 03:49:23 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/gggg5643/article/details/70197837

版权

首先大概说说正常盒模型和怪异盒模型的区别：

1.用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。

2.原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。

举例说明：

以下为正常盒模型，设定两个div，分别为鞋盒和鞋子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正常盒模型和怪异盒模型</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <h2>正常盒模型</h2>
    <div class="hezi">
        <div class="xiezi">
            鞋子        </div>
    </div>
    <hr/>
    <h2>怪异盒模型</h2>
    <div class="hezi2">
        <div class="xiezi2">
            鞋子
        </div>
    </div>
</body>
</html>

设置样式如下：

body{
margin:0;
}

div[class ^= "hezi"]{
    width: 100px;
    margin:100px;
    padding:10px;
    border:5px solid #aaa;
    background-color:aqua;
    box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
}

div[class ^= "xiezi"]{
    width: 100px;
    height: 100px;
    background-color:orange;
    overflow-y: scroll;
}

我们发现当我们设置好鞋子的大小的时候，只需要设置下盒子的宽度（因为是块级元素所以必须设置宽度），如果是行内元素的话，我们并不需要设置盒子的大小。

如下是怪异盒子的CSS样式：

div[class ^= "hezi2"]{
    width:130px;
    height: 130px;
    margin-left: 100px;
    margin-top:20px;
    box-sizing: border-box;
}

设置怪异盒模型：只需要将盒子的 box-sizing设置为border-box，这是我们发现盒子的大小不在随鞋子（内容）的大小而改变，而是必须由盒子自己来控制它的大小。