盒子模型實際佔用空間

時間 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