CSS盒子模型

盒子模型

前言

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

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

盒子中的區(qū)域

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

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

盒子模型的示意圖：

代碼演示：

上面這個盒子，width:200px; height:200px; 但是真實占有的寬高是302*302。 這是因為還要加上padding、border。

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

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

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

IE盒子模型：

上圖顯示：

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

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

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

  • 在 <font color="#0000FF">標(biāo)準(zhǔn)盒子模型</font>中，<font color="#0000FF">width 和 height 指的是內(nèi)容區(qū)域</font>的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。

  • <font color="#0000FF">IE盒子模型</font>中，<font color="#0000FF">width 和 height 指的是內(nèi)容區(qū)域+border+padding</font>的寬度和高度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你會一點Android，應(yīng)該比較好理解吧。區(qū)別在于，Android中沒有border這個東西，而且在Android中，margin并不是控件的一部分。

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

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

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

認(rèn)識width、height

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

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

下面這兩個盒子，真實占有寬高，都是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;
}

真實占有寬度 = 左border + 左padding + width + 右padding + 右border

上面這兩個盒子的盒模型圖如下：

如果想保持一個盒子的真實占有寬度不變，那么加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災(zāi)難性的，這會把別的盒子擠下去。

認(rèn)識padding

padding區(qū)域也有顏色

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

效果如下：

padding有四個方向

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

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

小屬性的寫法：

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

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

padding:30px 20px 40px 100px;

如果寫了四個值，則順序為：上、右、下、左。
如果只寫了三個值，則順序為：上、右和左、下。
如果只寫了兩個值，則順序為：上和下、左和右。
比如說：

padding: 30px 40px;

則順序等價于：30px 40px 30px 40px;
要懂得，用小屬性層疊大屬性。比如：

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

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



下面的寫法：

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

第一行的小屬性無效，因為被第二行的大屬性層疊掉了。
下面的題，會做了，說明你明白了。

一些題目

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

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

答案：

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

    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; 沒用，因為后面的padding大屬性，層疊掉了他們。

盒子模型如下：

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

答案：

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

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


答案：

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

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

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


上圖顯示，不加任何樣式的ul，也是有40px的padding-left。
所以，我們做站的時候，為了便于控制，總是喜歡清除這個默認(rèn)的padding。
可以使用*進行清除：

        *{
            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)識border

border就是邊框。邊框有三個要素：像素（粗細）、線型、顏色。

比如：

.div1{
    width: 10px;
    height: 10px;
    border: 2px solid red;
}

顏色如果不寫，默認(rèn)是黑色。另外兩個屬性如果不寫，則無法顯示邊框。

border-style

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

比如border:10px ridge red;這個屬性，在chrome和firefox、IE中有細微差別：（因為可以顯示出效果，因此并不是兼容性問題，只是有細微差別而已）

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

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

border拆分

border是一個大綜合屬性。比如說：

border:1px solid red;

就是把上下左右這四個方向的邊框，都設(shè)置為 1px 寬度、線型實線、red顏色。
PS：小技巧：在sublime text中，為了快速輸入border:1px solid red;這個屬性，可以直接輸入bd，然后選第二個后回車。
border屬性是能夠被拆開的，有兩大種拆開的方式：

  • （1）按三要素拆開：border-width、border-style、border-color。（一個border屬性是由三個小屬性綜合而成的）
  • （2）按方向拆開：border-top、border-right、border-bottom、border-left。
    現(xiàn)在我們明白了：一個border屬性，是由三個小屬性綜合而成的。如果某一個小屬性后面是空格隔開的多個值，那么就是上右下左的順序。舉例如下：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

效果如下：



（1）按三要素拆：

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

等價于：

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;

等價于：

border:10px solid red;

（3）按三要素和方向來拆：(就是把每個方向的，每個要素拆開。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;

等價于：

border:10px solid red;

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



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

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

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

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

border可以沒有：

border:none;

可以某一條邊沒有：

border-left: none;

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

border-left-width: 0;

border-image 屬性

比如：

border-image: url(.img.png) 30 round;

這個屬性在實際開發(fā)中用得不多，暫時忽略。

舉例1：利用 border 屬性畫一個三角形（小技巧）

完整代碼如下：

div{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
    border-bottom: none;
}

步驟如下：

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

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

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

這樣，一個三角形就畫好了。

舉例2：利用 border 屬性畫一個三角形（更推薦的技巧）

上面的例子1中，畫出來的是直角三角形，可如果我想畫等邊三角形，要怎么做呢？

完整代碼如下：（用 css 畫等邊三角形）

.div1{
    width: 0;
    height: 0;
    border-top: 30px solid red;
    /* 通過改變 border-left 和 border-right 中的像素值，來改變?nèi)切蔚男螤?*/
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

效果如下：

另外，我們在上方代碼的基礎(chǔ)之上，再加一個 border-radus: 20px; 就能畫出一個扇形。

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

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

  • CSS字體屬性 font-family：設(shè)置字體系列；字體之間的用英文狀態(tài)下的逗號隔開；盡量使用系統(tǒng)默認(rèn)自帶的字體...
    YanZi_33閱讀 347評論 0贊 0
  • 其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細節(jié)。要求這三部分，無論如何也要學(xué)的非常精通...
    王玉偉的偉閱讀 1,195評論 0贊 2
  • 盒子模型（CSS重點） css學(xué)習(xí)三大重點： css 盒子模型 、 浮動 、 定位 主題思路： 目標(biāo)： ...
    _劉彥輝閱讀 270評論 0贊 0
  • 盒子模型（CSS 重點） css 學(xué)習(xí)三大重點： css 盒子模型 、 浮動 、 定位 主題思路： 目標(biāo)...
    jovelin閱讀 1,212評論 0贊 0
  • 作為一枚前端開發(fā)工程師，首先一定要清楚盒子模型是什么，因為盒子模型是html+css中最核心的基礎(chǔ)知識，理解了這個...
    喵媛閱讀 796評論 4贊 5

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