CSS-盒子模型

毛茸茸的奶袋瓜

于 2023-02-19 21:31:00 发布

阅读量45

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/w20180341314/article/details/129114934

版权

标准盒模型
content+padding+border+margin
box-sizing:content-box
盒子整体的宽高会随着border padding margin的加入随之变大
怪异盒模型
content+margin
box-sizing:border-box
盒子整体宽高由设置的宽高和margin决定和border padding 没有关系
并且随着border padding 的加入里面的内容宽高会随之减少

<style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #333;
            padding: 20px;
            margin: 10px;
            border: 10px solid blue
        }
    
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 20px;
            margin-top: 10px;
            box-sizing: border-box;
            border: 10px solid blue
        }
    </style>
    <div>
        <div class="box1"></div>
        <div class="box2"></div>
    </div>