CSS3盒子模型

最新推荐文章于 2023-04-24 09:37:59 发布

安澜仙王

最新推荐文章于 2023-04-24 09:37:59 发布

阅读量71

点赞数

分类专栏： # CSS 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/sinat_28317385/article/details/120693840

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

CSS3中可以通过box-sizing来指定盒模型，有两个值:即可指定为content-box,boeder-box,这样我们计算盒子大小的方式就发生了改变。
可以分为两种情况:

1.box-sizing:content-box 盒子大小为width+padding+boeder(以前默认的)
2.box-sizing:border-box 盒子大小为width

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3盒子模型</title>
    <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>
</html>

安澜仙王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值:即可指定为content-box,boeder-box,这样我们计算盒子大小的方式就发生了改变。可以分为两种情况:1.box-sizing:content-box 盒子大小为width+padding+boeder(以前默认的)2.box-sizing:border-box 盒子大小为width如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(前提padding和bord
复制链接

扫一扫