盒子模型的大小改变

最新推荐文章于 2022-11-01 17:16:07 发布

m0_62800060

最新推荐文章于 2022-11-01 17:16:07 发布

阅读量1.2k

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_62800060/article/details/121752957

版权

盒子模型（★★★）

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况：

box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        小猪乔治
    </div>
    <p>
        小猪佩奇
    </p>
</body>

m0_62800060

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
盒子模型的大小改变

盒子模型（★★★）CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变可以分成两种情况：box-sizing: content-box 盒子大小为 width + padding + border （以前默认的） box-sizing: border-box 盒子大小为 width如果盒子模型我们改为了box-sizing: border-box ，那padding和border
复制链接

扫一扫