盒子模型

盒子模型

盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

传统盒子模型（W3C标准盒模型content-box）：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型（IE盒模型border-box）：盒子的宽度 = CSS中设置的宽度width里面包含了boder和padding也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;

        }
        div:nth-child(2) {
            /*有了这句话就让盒子变成了CSS3盒子模型*/
            /*padding和border不会再撑大盒子*/
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            border: 10px solid red;
            padding: 10px;

        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

如何选择

移动端可以全部CSS3盒子模型

PC端如果完全需要兼容,就用传统模式,如果不考虑兼容性,就选择CSS3盒子模型

posted @ 2020-11-14 17:15  水熊虫喵了个咪  阅读(85)  评论(0)  编辑  收藏  举报
/* 返回顶部代码 */ TOP