box-sizing 盒模型

時間 2019-12-12

標籤 box sizing 模型简体版

原文原文鏈接

這個話題在前端是繞不開的，因此，今天就來了解一下css

針對盒子模型，分爲2種，標準盒模型，怪異盒模型html

標準盒模型

盒子的寬度 = content內容寬度width + padding + border
盒子的高度 = content內容高度height + padding + border前端

<style type="text/css">
    .content {
        width: 500px;
        height: 200px;
        box-sizing: content-box;
        padding: 10px 20px;
        border: 5px solid #FF0000;
        background: #ccc;
    }           
</style>
<body>
    <div class="content">
        我設置的box-sizing: content-box <br />
        盒子的寬度是： 550px = 500px + 20x2 + 5x2; 
    </div>
</body>

怪異盒模型

盒子的寬度 = 盒子設定的width (width是包含實際的內容，padding，border)
盒子的寬度 = 盒子設定的height(height是包含實際的內容，padding，border)code

<style type="text/css">
    .border{
       width: 500px;
        height: 200px;
        box-sizing: border-box;
        padding: 10px 20px;
        border: 5px dashed #FFFF00;
        background: #808080;
    }           
</style>
<body>
    <div class="border">
        我設置的box-sizing: border-box <br />
        盒子的寬度是： 500px  就是咱們設定的width
    </div>
</body>

盒模型屬性：
一、box-sizing: content-box; 標準盒模型
二、box-sizing: border-box; 怪異盒模型
三、box-sizing: inherit 從父類繼承（說明在css中，此屬性是能夠繼承的）htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。