盒子模型实际占用空间

时间 2019-11-10

标签盒子模型实际占用空间栏目 CSS 繁體版

原文原文链接

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

<!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)。spa