盒子模型实际占用空间

最新推荐文章于 2020-05-06 21:17:30 发布

weixin_33896726

最新推荐文章于 2020-05-06 21:17:30 发布

阅读量334

点赞数

文章标签： c#

原文链接：http://www.cnblogs.com/yoran-yang/p/5299613.html

版权

一个盒子模型设置width，height，border，padding，magin后它在一个网页中最终占用多少空间？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
    body{
        margin: 0px;
    }
    #div1{
        width: 300px;
        height: 300px;
        background: blue;
        border-width: 50px;
        border-style:solid;
        border-color: yellow;
        padding: 50px;
        margin: 50px;
    }
    </style>
</head>
<body>
    <div id="div1">
        盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
        盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
        盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
        盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
        盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
        盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
        盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试
    </div>
</body>
</html>

效果如下图所示：

由此可见，一个盒子模型占用的空间为：(width+padding-right+padding-left+margin-right+margin-left)*(height+padding-top+padding-bottom+margin-top+margin-bootom)。

转载于:https://www.cnblogs.com/yoran-yang/p/5299613.html