CSS盒模型科普

2021-02-26 10:15 更新

盒子模型

前言

盒子模型，英文即box model。無論是div、span、還是a都是盒子。

但是，圖片、表單元素一律看作是文本，它們并不是盒子。這個(gè)很好理解，比如說，一張圖片里并不能放東西，它自己就是自己的內(nèi)容。

盒子中的區(qū)域

一個(gè)盒子中主要的屬性就5個(gè)：width、height、padding、border、margin。如下：

  • width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）。
  • padding：內(nèi)邊距。
  • border：邊框。
  • margin：外邊距。

盒子模型的示意圖：

img

代碼演示：

img

上面這個(gè)盒子，width:200px; height:200px; 但是真實(shí)占有的寬高是302*302。 這是因?yàn)檫€要加上padding、border。

注意：寬度和真實(shí)占有寬度，不是一個(gè)概念！來看下面這例子。

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

我們目前所學(xué)習(xí)的知識(shí)中，以標(biāo)準(zhǔn)盒子模型為準(zhǔn)。

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

img

IE盒子模型：

img

上圖顯示：

在 CSS 盒子模型 (Box Model) 規(guī)定了元素處理元素的幾種方式：

  • width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）。
  • padding：內(nèi)邊距。
  • border：邊框。
  • margin：外邊距。

CSS盒模型和IE盒模型的區(qū)別：

  • 在 標(biāo)準(zhǔn)盒子模型中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。
  • IE盒子模型中，width 和 height 指的是內(nèi)容區(qū)域+border+padding的寬度和高度。

注：Android 中也有 margin 和 padding 的概念，意思是差不多的，如果你會(huì)一點(diǎn) Android，應(yīng)該比較好理解吧。區(qū)別在于，Android 中沒有 border 這個(gè)東西，而且在 Android中，margin 并不是控件的一部分，我覺得這樣做更合理一些，呵呵。

<body>標(biāo)簽也有margin

<body>標(biāo)簽有必要強(qiáng)調(diào)一下。很多人以為<body>標(biāo)簽占據(jù)的是整個(gè)頁面的全部區(qū)域，其實(shí)是錯(cuò)誤的，正確的理解是這樣的：整個(gè)網(wǎng)頁最大的盒子是<document>，即瀏覽器。而<body>是<document>的兒子。瀏覽器給<body>默認(rèn)的margin大小是8個(gè)像素，此時(shí)<body>占據(jù)了整個(gè)頁面的一大部分區(qū)域，而不是全部區(qū)域。來看一段代碼。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
?
    <style type="text/css">
?
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            padding: 20px;
            margin: 30px;
        }
?
    </style>
?
 </head>
?
 <body>
?
    <div>有生之年</div>
    <div>狹路相逢</div>
?
 </body>
?
</html>

上面的代碼中，我們對(duì)div標(biāo)簽設(shè)置了邊距等信息。打開google瀏覽器，按住F12，顯示效果如下：

img

認(rèn)識(shí)width、height

一定要知道，在前端開發(fā)工程師眼中，世界中的一切都是不同的。

比如說，丈量稿紙，前端開發(fā)工程師只會(huì)丈量?jī)?nèi)容寬度：

img

下面這兩個(gè)盒子，真實(shí)占有寬高，都是302*302：

盒子1：

    .box1{
        width: 100px;
        height: 100px;
        padding: 100px;
        border: 1px solid red;
    }

盒子2：

    .box2{
        width: 250px;
        height: 250px;
        padding: 25px;
        border: 1px solid red;
    }

真實(shí)占有寬度 = 左border + 左padding + width + 右padding + 右border

上面這兩個(gè)盒子的盒模型圖如下：

img

如果想保持一個(gè)盒子的真實(shí)占有寬度不變，那么加width的時(shí)候就要減padding。加padding的時(shí)候就要減width。因?yàn)楹凶幼兣至耸菫?zāi)難性的，這會(huì)把別的盒子擠下去。

認(rèn)識(shí)padding

padding區(qū)域也有顏色

padding就是內(nèi)邊距。padding的區(qū)域有背景顏色，css2.1前提下，并且背景顏色一定和內(nèi)容區(qū)域的相同。也就是說，background-color將填充所有border以內(nèi)的區(qū)域。

效果如下：

img

padding有四個(gè)方向

padding是4個(gè)方向的，所以我們能夠分別描述4個(gè)方向的padding。

方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。

小屬性的寫法：

    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 100px;

綜合屬性的寫法：(上、右、下、左)（順時(shí)針方向，用空格隔開。margin的道理也是一樣的）

padding:30px 20px 40px 100px;

如果寫了四個(gè)值，則順序?yàn)椋荷?、右、下、左?/p>

如果只寫了三個(gè)值，則順序?yàn)椋荷稀⒂?、下??和右一樣。

如果只寫了兩個(gè)值，比如說：

padding: 30px 40px;

則順序等價(jià)于：30px 40px 30px 40px;

要懂得，用小屬性層疊大屬性。比如：

padding: 20px;
padding-left: 30px;

上面的padding對(duì)應(yīng)盒子模型為：

img

下面的寫法：

padding-left: 30px;
padding: 20px;

第一行的小屬性無效，因?yàn)楸坏诙械拇髮傩詫盈B掉了。

下面的題，會(huì)做了，說明你明白了。

一些題目

題目1：說出下面盒子真實(shí)占有寬高，并畫出盒模型圖。

    div{
        width: 200px;
        height: 200px;
        padding: 10px 20px 30px;
        padding-right: 40px;
        border: 1px solid #000;
    }

答案：

img

題目2：說出下面盒子真實(shí)占有寬高，并畫出盒模型圖。

    div{
        width: 200px;
        height: 200px;
        padding-left: 10px;
        padding-right: 20px;
        padding:40px 50px 60px;
        padding-bottom: 30px;
        border: 1px solid #000;
    }

答案：

padding-left:10px； 和padding-right:20px; 沒用，因?yàn)楹竺娴膒adding大屬性，層疊掉了他們。

盒子模型如下：

img

題目3：現(xiàn)在給你一個(gè)盒子模型圖，請(qǐng)寫出代碼，試著用最最簡(jiǎn)單的方法寫。

img

答案：

    width:123px;
    height:123px;
    padding:20px 40px;
    border:1px solid red;

題目4：現(xiàn)在給你一個(gè)盒子模型圖，請(qǐng)寫出代碼，試著用最最簡(jiǎn)單的方法寫。

img

答案：

    width:123px;
    height:123px;
    padding:20px;
    padding-right:40px;
    border:1px solid red;

一些元素，默認(rèn)帶有padding

一些元素，默認(rèn)帶有padding，比如ul標(biāo)簽。如下：

img

上圖顯示，不加任何樣式的ul，也是有40px的padding-left。

所以，我們做站的時(shí)候，為了便于控制，總是喜歡清除這個(gè)默認(rèn)的padding。

可以使用*進(jìn)行清除：

        *{
            margin: 0;
            padding: 0;
        }

但是，*的效率不高，所以我們使用并集選擇器，羅列所有的標(biāo)簽（不用背，有專業(yè)的清除默認(rèn)樣式的樣式表，今后學(xué)習(xí)）：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}

認(rèn)識(shí)border

border就是邊框。邊框有三個(gè)要素：像素（粗細(xì)）、線型、顏色。

顏色如果不寫，默認(rèn)是黑色。另外兩個(gè)屬性不寫，要命了，顯示不出來邊框。

border-style

border的所有的線型如下：（我們可以通過查看CSS參考手冊(cè)得到）

img

比如border:10px ridge red;這個(gè)屬性，在chrome和firefox、IE中有細(xì)微差別：（因?yàn)榭梢燥@示出效果，因此并不是兼容性問題，只是有細(xì)微差別而已）

img

如果公司里面的設(shè)計(jì)師是處女座的，追求極高的頁面還原度，那么不能使用css來制作邊框。就要用到圖片，就要切圖了。

所以，比較穩(wěn)定的border-style就幾個(gè)：solid、dashed、dotted。

border拆分

border是一個(gè)大綜合屬性。比如說：

border:1px solid red;

就是把4個(gè)邊框，都設(shè)置為1px寬度、線型實(shí)線、red顏色。

PS：小技巧：在sublime text中，為了快速輸入border:1px solid red;這個(gè)屬性，可以直接輸入bd，然后選第二個(gè)后回車。

border屬性是能夠被拆開的，有兩大種拆開的方式：

  • （1）按三要素拆開：border-width、border-style、border-color。（一個(gè)border屬性是由三個(gè)小屬性綜合而成的）
  • （2）按方向拆開：border-top、border-right、border-bottom、border-left。

現(xiàn)在我們明白了：一個(gè)border屬性，是由三個(gè)小屬性綜合而成的。如果某一個(gè)小屬性后面是空格隔開的多個(gè)值，那么就是上右下左的順序。舉例如下：

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

效果如下：

img

（1）按三要素拆：

border-width:10px;    //邊框?qū)挾?br>border-style:solid;   //線型
border-color:red;     //顏色。

等價(jià)于：

border:10px solid red;

(2)按方向來拆：

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

等價(jià)于：

border:10px solid red;

（3）按三要素和方向來拆：(就是把每個(gè)方向的，每個(gè)要素拆開。3*4 = 12)

    border-top-width:10px;
    border-top-style:solid;
    border-top-color:red;
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:red;
    border-bottom-width:10px;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-left-width:10px;
    border-left-style:solid;
    border-left-color:red;

等價(jià)于：

border:10px solid red;

工作中到底用什么？很簡(jiǎn)答：什么簡(jiǎn)單用什么。但要懂得，用小屬性層疊大屬性。舉例如下：

img

為了實(shí)現(xiàn)上方效果，寫法如下：

border:10px solid red;
border-right-color:blue;

img

為了實(shí)現(xiàn)上方效果，寫法如下：

border:10px solid red;
border-style:solid dashed;

border可以沒有：

border:none;

可以某一條邊沒有：

border-left: none;

也可以調(diào)整左邊邊框的寬度為0：

border-left-width: 0;

舉例：利用border屬性畫一個(gè)三角形（小技巧）

步驟如下：

（1）當(dāng)我們?cè)O(shè)置盒子的width和height為0時(shí)，此時(shí)效果如下：

img

（2）然后將border的底部取消：

img

（3）最后設(shè)置border的左邊和右邊為白色：

img

這樣，一個(gè)三角形就畫好了。


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)