怪異盒模型與標準盒模型的區(qū)別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪異盒模型與標準盒模型的區(qū)別</title>
    <style type="text/css">
        html,body,div,p{padding: 0;margin: 0;}
        .borderBox{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        div{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 10px solid #000;
            margin: 10px;
        }
    </style>    
</head>
<body>
    <div class="borderBox">
        <p>我是怪異盒模型</p>
        <p>盒子總寬度包含內(nèi)邊距和邊框，盒子總寬度不會根據(jù)邊框和內(nèi)邊距發(fā)生變化</p>
        <p>內(nèi)容 = 寬度 - 內(nèi)邊距 - 邊框  </p>
        <p>160 = 200-10*2-10*2</p>
    </div>
    <div>
        <p>我是標準盒模型</p>
        <p>盒子寬度為內(nèi)容寬度，總寬度為內(nèi)容寬度加內(nèi)邊距和邊框，根據(jù)內(nèi)邊距和邊框變化</p>
        <p>寬度 = 內(nèi)容 + 內(nèi)邊距 + 邊框</p>
        <p>240 = 200 + 20 + 20</p>
    </div>
</body>
</html>
怪異盒模型與標準盒模型的區(qū)別.jpg
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容