CSS3学习笔记-04-border-sizing实现固定盒子大小

最新推荐文章于 2024-05-06 13:10:01 发布

手撕键盘

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量1.3k

点赞数 1

分类专栏：前端学习之css3 文章标签： css3

本文链接：https://blog.csdn.net/eatkeyborad/article/details/119581801

版权

前端学习之css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS3学习笔记-04-border-box实现固定盒子大小

border-sizing是css3提供的很实用的一个工具,设置它可以让你的盒子大小固定为你给盒子设置的宽度和高度,不需要在加padding和border后计算内部盒子的大小
注意:兼容性不高,css3的东西都这样,不多说
当我们定一个div盒子给他一个高200,宽200的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- box-sizing
        默认content-box
        border-box 不撑开盒子
    -->
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        我是盒子
    </div>
</body>
</html>

显示如图:
在这里插入图片描述

当我们加入padding,盒子然后加入border-box:box-box;

div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px;
            box-sizing: border-box;
        }

最后,我们可以看到,width和height已经被减掉了,不需要我们在主动的手动调整
在这里插入图片描述
如果我们吧padding改成border呢？

div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 20px solid blue;
            box-sizing:border-box;
        }

结果也是帮我们减掉了
在这里插入图片描述

当然,当我们吧属性值改成content-box就又变成了原来的样子

div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px;
            box-sizing:content-box;
        }

在这里插入图片描述
可以看到,又回来了,说明默认就是conten-box

总结:这个功能可以让我们设置宽度后增加padding和border后不需要重新计算盒子的宽和高,可以说非常人性化。

手撕键盘

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3学习笔记-04-border-sizing实现固定盒子大小

CSS3学习笔记-04-border-box实现固定盒子大小border-sizing是css3提供的很实用的一个工具,设置它可以让你的盒子大小固定为你给盒子设置的宽度和高度,不需要在加padding和border后计算内部盒子的大小注意:兼容性不高,css3的东西都这样,不多说当我们定一个div盒子给他一个高200,宽200的大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫