css1：盒模型

時間 2019-12-06

標籤 css1 css 模型欄目 CSS 简体版

原文原文鏈接

最近工做中有機會複習一下css的基本知識，那麼先從css的盒模型開始吧，由於這是當時進如今這家公司筆試的第一題：怎麼把IE盒模型變成標準盒模型？
嗯，有辦法，box-sizing: border-box;就能夠啦。
嗯，過關啦，那麼標準盒模型和怪異盒模型分別是什麼東西呢？css

盒模型

包括content-內容，padding-內邊距，border-邊框，margin-外邊距。具體參見連接描述html

常見的css盒模型分兩類：怪異（IE）盒模型和標準盒模型，兩種盒模型有着很大的不一樣。

	提出組織	元素寬度計算方式（高度計算類比寬度）
標準盒模型	w3c	content寬度
怪異（IE）盒模型	IE	content寬度 + padding值 + border值

用圖片表示可能更形象一點：
瀏覽器

上文說過，有辦法讓這兩種盒模型互相轉換，那就是經過box-sizing這個屬性：

box-sizing就是告訴瀏覽器怎麼去計算一個元素的寬高。

有兩個取值：content-box和border-box，分別對應兩種計算方式。
content-box只包含元素內容的寬度。若是給設置了border或者padding，元素的總寬度就要加上border和padding值。
border-box包含元素內容的寬度，padding和border值。
實例以下：spa

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <style>
            div{
                width: 100px;
                height: 100px;
                background: grey;
                padding: 50px;
                border: 30px solid pink;
                text-align: center;
            }
            .content-box{
                /* 默認的box-sizing: content-box; */
            }
            .border-box{
                box-sizing: border-box;
                margin-left: 30px;
            }
        </style>
    </head>
    <body>
    <div class="content-box">content box</div>
    <p>分割線</p>
    <div class="border-box">border box</div>
    </body>
</html>

結果以下：code

相關標籤/搜索

每日一句

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