《圖解CSS》盒子模型

盒子模型

在HTML文檔中，每個(gè)元素都會(huì)在頁(yè)面上生成一個(gè)盒子。因此，HTML頁(yè)面實(shí)際上就是由一堆盒子組成的。默認(rèn)情況下，每個(gè)盒子的邊框不可見(jiàn)，背景也是透明的。
每個(gè)盒子由4部分構(gòu)成: 外邊距、邊框、內(nèi)邊距、內(nèi)容。

盒子模型基本示意圖

雖然瀏覽器各不相同，但是盒子模型都是由這四部分組成。

標(biāo)準(zhǔn)盒子模型

根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周?chē)?padding 和 border 值是另外計(jì)算的；即在標(biāo)準(zhǔn)模式下的盒模型，盒子實(shí)際內(nèi)容（content）的width/height=我們?cè)O(shè)置的width/height;盒子總寬度/高度=width/height+padding+border+margin。


標(biāo)準(zhǔn)盒模型
IE盒子模型

在該模式下，瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（content）寬度+內(nèi)邊距padding+邊框border寬度=我們?cè)O(shè)置的width(height也是如此)，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin。


IE盒子模型
總結(jié)：標(biāo)準(zhǔn)盒子模型和IE盒子模型的差別就在于寬度和高度包含的范圍不同。
CSS3指定盒子模型種類（box-sizing）

box-sizing： 定義了 user agent 應(yīng)該如何計(jì)算一個(gè)元素的總寬度和總高度。

  • box-sizing: content-box;
    寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。

  • box-sizing: border-box;
    為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

  • box-sizing: inherit;
    規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。

即box-sizing屬性可以指定盒子模型種類，content-box指定盒子模型為W3C（標(biāo)準(zhǔn)盒模型），border-box為IE盒子模型（怪異盒模型）。

常用的盒子

在 CSS 中我們廣泛地使用兩種“盒子” —— 塊級(jí)盒子 (block box) 和 內(nèi)聯(lián)盒子 (inline box)。這兩種盒子會(huì)在頁(yè)面流（page flow）和元素之間的關(guān)系方面表現(xiàn)出不同的行為。

塊級(jí)盒子 (block box)
  • 盒子會(huì)在內(nèi)聯(lián)的方向上擴(kuò)展并占據(jù)父容器在該方向上的所有可用空間，在絕大數(shù)情況下意味著盒子會(huì)和父容器一樣寬
  • 每個(gè)盒子都會(huì)換行
  • width 和 height 屬性可以發(fā)揮作用
  • 內(nèi)邊距（padding）, 外邊距（margin） 和 邊框（border） 會(huì)將其他元素從當(dāng)前盒子周?chē)巴崎_(kāi)”
內(nèi)聯(lián)盒子 (inline box)
  • 盒子不會(huì)產(chǎn)生換行。
  • width 和 height 屬性將不起作用。
  • 垂直方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用但是不會(huì)把其他處于 inline 狀態(tài)的盒子推開(kāi)。
  • 水平方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用而且也會(huì)把其他處于 inline 狀態(tài)的盒子推開(kāi)。

我們通過(guò)對(duì)盒子display 屬性的設(shè)置，比如 inline 或者 block ，來(lái)控制盒子的外部顯示類型。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 50px;
            width: 100px;
            border: 1px solid black;
            margin: 1px;
            padding: 1px;
        }

        span {
            height: 100px;  /* 不起作用 */
            width: 100px;   /* 不起作用 */
            margin-top: 20px; /* 不起作用 */
            margin-bottom: 20px; /* 不起作用 */
            margin-left: 10px; /* 起作用 */
            margin-right: 10px;/* 起作用 */
        }
    </style>
</head>
<body>
    <div>塊級(jí)盒子1</div>
    <div>塊級(jí)盒子2</div>

    <span>內(nèi)聯(lián)盒子1</span>
    <span>內(nèi)聯(lián)盒子2</span> <br>
    <span>內(nèi)聯(lián)盒子3</span>
    <span>內(nèi)聯(lián)盒子4</span>
</body>
</html>
盒子種類

盒子的屬性

  • 邊框（border）:可以設(shè)置邊框的寬窄、樣式和顏色
  • 內(nèi)邊框（padding）: 可以設(shè)置盒子內(nèi)容區(qū)與邊框的間距
  • 外邊距（margin）: 可以設(shè)置盒子與相鄰元素的間距
盒子邊框（border）

邊框（border）有4個(gè)相關(guān)屬性：

  • 寬度（border-width）:可以使用thin,medium和thick等文本值，也可以使用除百分比和負(fù)值之外的任何絕對(duì)值
  • 樣式（border-style）:有none,hidden，dotted,dashed,solid,double,groove,ridge,inset和outset等文本值。
  • 顏色（border-color）: 可以使用任意顏色值，包括RGB，HSL，十六進(jìn)制顏色值和顏色關(guān)鍵字。
  • 圓角（border-radius）: 設(shè)置圓角，可以使用絕對(duì)值也可以使用相對(duì)值（百分比）
屬性的縮寫(xiě)，內(nèi)邊距/外邊距這兩個(gè)屬性原理相同，以順時(shí)針開(kāi)始設(shè)置：
  • border-left: 1px; border-right: 2px; // 分別指定左右兩邊的寬度為1px, 2px
  • border: 1px; // 設(shè)置的是4邊的寬度為1px
  • border: 1px 2px; // 設(shè)置的是上、下邊為1px, 左右邊為2px
  • border: 1px 2px 3px; // 設(shè)置的是上1px, 右2px， 下3px， 左2px
  • border: 1px 2px 3px 4px; // 設(shè)置的是上1px, 右2px， 下3px， 左4px

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 30px;
            height: 30px;
            display: inline-block;
            background-color: yellow;
        }
        div:nth-child(1) {
            /* 設(shè)置邊框的寬度，樣式，顏色 */
            border: 1px solid black; /*Syntax: <line-width> || <line-style> || <color>*/
        }

        div:nth-child(2) {
            /* 只指定某一邊的邊框 */
            border-left: 1px solid black; /*border: 四邊寬度 樣式 顏色*/
        }

        div:nth-child(3) {
            border-width: 1px 2px;
            border-style: dashed dotted double inset; /*Syntax: <line-style>{1,4}*/
        }

        div:nth-child(4) {
            /*當(dāng)設(shè)置三邊時(shí)，左邊為紅色，與第二個(gè)顏色相同*/
            border: 1px solid;
            border-color: blue red green; /*Syntax: <line-style>{1,4}*/
        }

        div:nth-child(5) {
            /* 設(shè)置圓角*/
            border: 1px solid red;
            border-radius: 1px 5px 10px 15px; /* 從左上角開(kāi)始，順時(shí)針*/
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
邊框
內(nèi)邊框（padding）

內(nèi)邊距是盒子內(nèi)容區(qū)與盒子邊框之間的距離。

  • padding-left: 1px; padding-right: 2px; // 分別指定左右兩邊的內(nèi)邊距為1px, 2px
  • padding: 1px; // 設(shè)置的是4邊的內(nèi)邊距為1px
  • padding: 1px 2px; // 設(shè)置的是上、下內(nèi)邊距為1px, 左右內(nèi)邊距為2px
  • padding: 1px 2px 3px; // 設(shè)置的是內(nèi)邊距上1px, 右2px， 下3px， 左2px
  • padding: 1px 2px 3px 4px; // 設(shè)置的是內(nèi)邊距上1px, 右2px， 下3px， 左4px

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
            border: 1px solid black;
        }

        div:nth-child(2) {
            padding: 30px 20px;
        }

        div:nth-child(3) {
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div>沒(méi)有內(nèi)邊距</div>
    <div>上下內(nèi)邊距30px，左右內(nèi)邊距20px</div>
    <div>左內(nèi)邊距30px</div>
</body>
</html>
內(nèi)邊距
外邊距（margin）
  • margin-left: 1px; margin-right: 2px; // 分別指定左右兩邊的外邊距為1px, 2px
  • margin: 1px; // 設(shè)置的是4邊的外邊距為1px
  • margin: 1px 2px; // 設(shè)置的是上、下外邊距為1px, 左右外邊距為2px
  • margin: 1px 2px 3px; // 設(shè)置的是外邊距上1px, 右2px， 下3px， 左2px
  • margin: 1px 2px 3px 4px; // 設(shè)置的是外邊距上1px, 右2px， 下3px， 左4px

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        div:nth-child(2) {
            margin: 30px 20px;
        }

        div:nth-child(3) {
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div>沒(méi)有外邊距</div>
    <div>上下外邊距30px，左右外邊距20px</div>
    <div>左外邊距30px</div>
</body>
</html>
外邊距

如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “點(diǎn)贊” “評(píng)論” “收藏” 一鍵三連哦！
聽(tīng)說(shuō) ?? 點(diǎn)贊 ?? 的人運(yùn)氣不會(huì)太差，每一天都會(huì)元?dú)鉂M滿哦 嘿嘿!!! ?? ?? ??
大家的支持就是我堅(jiān)持下去的動(dòng)力。點(diǎn)贊后不要忘了?? 關(guān)注 ??我哦！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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