盒模型的实际尺寸

最新推荐文章于 2024-09-13 15:18:19 发布

你的龙哥哥

最新推荐文章于 2024-09-13 15:18:19 发布

阅读量428

点赞数

分类专栏： HTML 文章标签： css css盒子的宽高

本文链接：https://blog.csdn.net/oyjl19961216/article/details/83063818

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

盒模型的实际尺寸

按照下面代码制作页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真实尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>

页面显示效果如下：

通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：