css3统一元素的宽和高

最新推荐文章于 2025-04-06 18:48:11 发布

转载最新推荐文章于 2025-04-06 18:48:11 发布 · 332 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=i0kh01ikj&title=css3%E7%BB%9F%E4%B8%80%E5%85%83%E7%B4%A0%E7%9A%84%E5%AE%BD%E5%92%8C%E9%AB%98

文章标签：

#CSS

前端专栏收录该内容

493 篇文章

订阅专栏

本文深入探讨CSS盒模型，解析元素宽度和高度计算原理，展示如何使用box-sizing属性解决布局问题，实现预期的设计效果。

通常我们设置元素的宽和高样式经常会出现一些问题,比如以下css的设置：

比如以下的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
    <br>
    <div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>

</body>
</html>