關於W3C盒子佈局

時間 2019-11-18

標籤關於 w3c 盒子佈局欄目 C&C++ 简体版

原文原文鏈接

在學校老師出國一道題：html

第一個div盒子，id爲box, 寬度300px,spa

第二個div盒子在第一個div盒子的內部，id爲div1,寬度200px,3d

第三個div盒子在第一個div盒子的內部，id爲div2,寬度需計算,code

三個盒子的border:1px solid red;　　左浮動，　　內外邊距各5pxhtm

這道題主要是考盒子的計算：blog

<!doctype html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>內外邊寬計算</title>
    <style>
    .box, .div1, .div2{
        border: 1px solid red;
        float: left;
        padding: 5px;
        margin: 5px;
    }
    .box{
        width: 300px;
    }
    .div1{
        width: 200px;
    }
    .div2{
        width: 56px;       /*w3c標準盒子：總寬度=外邊距+邊框寬+內邊距+設置寬度;*/
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            div1
        </div>
        <div class="div2">
            div2
        </div>
    </div>
</body>
</html>

這是根據標準W3C盒子的答案；it

相關標籤/搜索