HTML5基础加强css样式篇（css计算函数：calc（））（四十七）

最新推荐文章于 2025-07-12 11:36:39 发布

咸鸭蛋炒饭

最新推荐文章于 2025-07-12 11:36:39 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5基础篇文章标签： css html5 经验 html css3

本文链接：https://blog.youkuaiyun.com/u010853130/article/details/69941792

HTML5基础篇专栏收录该内容

121 篇文章

订阅专栏

本文介绍并演示了 CSS 中 calc() 函数的应用方法。通过一个具体的实例展示了如何利用 calc() 函数解决元素布局中计算宽度的问题，特别是当涉及到元素的边框、内边距等属性时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.calc计算函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box-wrapper {
            margin: 100px 0 0 100px;
            width: 600px;
            height: 500px;
            background-color: orange;
        }
        .box{
            height: 200px;
            width: 200px;
            float: left;
        }
        .box-1{
            background-color: pink;
        }
        .box-2{
            background-color: #00f;
            border: 10px solid yellow;
            padding: 10px;
            /*计算宽高 ： 盒子的边框+内边距+内容区*/
            box-sizing: border-box;
            /* margin-left: 1px; */

            /*如果是因为外边距导致的空间不足，只能修改元素的大小，可以使用计算函数（兼容性问题）*/
            /*计算函数
                运算符左右一定要添加空格符
            */
            width: calc(200px - 1px);
            width: calc(200px + 100px);
            width: calc(200px / 2);

        }
        .box-3{
            background-color: green;
        }

    </style>
</head>
<body>

<div class="box-wrapper">
    <div class="box box-1"></div>
    <div class="box box-2">Hello</div>
    <div class="box box-3"></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>