請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。

如果您覺得這篇文章還不錯，可以去H5專題中查看更多相關文章。

首先對于之前的拖更表示抱歉，因公派，前往上海，所以耽誤了幾天，以后會盡量按時更新.

今天課程主要介紹盒模型的基本概念，同時告訴大家，盒模型具體元素的構成。在最后面會介紹一下定位。

今日課程預覽

這里寫圖片描述

CSS 盒模型 概述

首先大家看到的是什么？

有月餅和月餅盒，對么？

所以，我們今天的課程就叫做“一個月餅盒引發(fā)的深思”。

yuebing

大家首先看到的是什么？

是不是一個盒子，很像我們中秋節(jié)的時候包裝月餅的月餅盒子，對么？

其中兩個月餅盒子之間的距離就是咱們要介紹的-->margin（外邊距）.

而咱們每個月餅都要有最外層的包裝盒，而這個包裝盒的厚度，就是咱們的--> border（邊框）.

那咱們的月餅不可能都是直接挨在一起的，對吧，那每個月餅之間的間距，咱們就叫做--> padding（內邊距）.

那咱們介紹了月餅盒，咱們的月餅總應該有吧。

對的，咱們月餅的寬度就是 --> width.

高度就是 --> height.

而咱們的月餅就叫做 --> element（元素）.

css box

內邊距、邊框和外邊距都是可選的，默認值是零。

但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。

可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。

這可以分別進行，也可以使用通用選擇器對所有元素進行設置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是內容區(qū)域的寬度和高度。

增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。

如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：

css_2

提示：內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。

提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

代碼和效果演示

在網頁中，添加一個div標簽，并設置class的值

HTML代碼:
<div class="box_model">
    我是一個div哦
</div>

設置自身大小

通常class選擇器來設置屬性值，首先是width(寬)、hegiht(高)、background-color(背景顏色)

CSS代碼:
.box_model {
    width: 200px;
    height: 200px;
    background-color: cyan;
}

效果如下：

上述操作只是添加了一個div標簽，并設置了文字、大小和顏色，并沒有特殊操作。下面，我們繼續(xù)：

設置padding 內邊距

看上面的圖，發(fā)現文字緊貼著邊框，看著不是特別友好，如果想要添加一些邊距，可以使用padding屬性，來添加內邊距

CSS代碼:
.box_model {
    width: 200px;
    height: 200px;
    background-color: cyan;

    /*內邊距*/
    padding: 20px;
}

效果如下：

現在已經實現了文字和邊框中間有了20像素的寬度，看著不是那么的緊湊了

注意：我們修改了padding的值，會導致div整體變大，因為padding屬于div內部

如果我們希望div還是原來得大小，當我們設置了padding為20px，我們就需要修改width和height，分別減去40，才可以保證div大小不變

設置border 邊框

看這樣一個色塊比較單調，來設置個有顏色的邊框

CSS代碼:
.box_model {
    width: 200px;
    height: 200px;
    background-color: cyan;

    /*內邊距*/
    padding: 20px;

    /*邊框*/
    border: 50px solid black;
}

效果圖如下：

當設置了非常變態(tài)的50像素的邊框之后，看到如下效果。通常，邊框不會有那么大的值，1像素足夠了

設置了邊框的值，div標簽的大小也會增加。邊框也屬于div本身

設置margin 外邊距

外邊距的主要作用就是設置該標簽距離其它標簽之間的距離

先來看下我們沒有添加外邊框代碼時候div在瀏覽器中的樣子

大家發(fā)現，在div標簽的上部和左側都有一段間距，這段間距是body的間距值(8px)，先暫時忽略，不管它
然后我們添加外邊距代碼

CSS代碼: 
.box_model {
    width: 200px;
    height: 200px;
    background-color: cyan;

    /*內邊距*/
    padding: 20px;

    /*邊框*/
    border: 50px solid black;

    /*外邊距*/
    margin: 50px;
}

添加代碼之后，效果如下：

現在，div標簽距離瀏覽器的上部和左側就有很大一段距離了，原因就是我們設置了外邊框

注意事項

看下如下情況：

上面的div和下面的div標簽，外邊距都分別是50px，但是我們可以注意到，上面和下面之間的間距并不是100px，而同樣也是50px，這是因為什么呢？

外邊距在垂直距離上，并不會相加，而是取較大值。

舉個例子： 如果上面的標簽設置的外邊距為100px，下面的標簽這是外邊距為80px，那么上下兩個元素之間的距離九會為100px，取較大值。

這是兩個元素豎直排列，那如果橫排呢？？

想多了，如果元素橫排，那兩個標簽之間的間距就是兩個元素的外邊距之和

屬性詳寫

內邊距屬性

• padding
• padding-left
• padding-top
• padding-right
• padding-bottom

padding: 20px; 代表上下左右內邊距均為20px
padding: 10px 20px; 代表上下內邊距為10px，左右內邊距為20px。第一個數字代表上下，第二個代表左右內邊距的值。注意中間是空格哦

邊框屬性

• border : 同時設置上下左右的邊框相關

• border-left : 設置左側邊框相關

• border-left-width : 設置左側邊框厚度

• border-left-color : 設置左側邊框的顏色

• border-left-style : 設置左側邊框的樣式

• border-top : 設置上部邊框相關

• border-top-width : 設置上部邊框厚度

• border-top-color : 設置上部邊框顏色

• border-top-style : 設置上部邊框樣式

• border-right : 設置右側邊框相關

• border-right-width : 設置右側邊框厚度

• border-right-color : 設置右側邊框顏色

• border-right-style : 設置右側邊框樣式

• border-bottom : 設置下部邊框相關

• border-bottom-width : 設置下部邊框厚度

• border-bottom-color : 設置下部邊框顏色

• border-bottom-style : 設置下部邊框樣式

border: 1px solid red; 代表上下左右邊框厚度為1px，樣式為solid，顏色為red.
border-left: 2px double red; 代表設置左側邊框厚度為2px，樣式為double，顏色為red.

外邊距屬性

• margin : 可以同時設置上下左右外邊距
• margin-left : 設置左側外邊距
• margin-top : 設置上部外邊距
• margin-right : 設置右側外邊距
• margin-bottom : 設置下部外邊距

margin: 20px; 代表上下左右外邊距均為20px
margin: 10px 20px; 代表上下外邊距為10px，左右外邊距為20px。第一個數字代表上下，第二個代表左右外邊距的值。注意中間是空格哦

display

display 屬性規(guī)定元素應該生成的框的類型。

這個屬性用于定義建立布局時元素生成的顯示框類型。

對于 HTML 等文檔類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。

對于 XML，由于 XML 沒有內置的這種層次結構，所有 display 是絕對必要的。

在這里咱們只介紹四個屬性。

*none

*inline : 行標簽，占一小塊區(qū)域

*block : 塊標簽，獨占一行，可以設置寬高

*inline-block :塊標簽，但是具有一些行標簽的屬性

注釋：CSS2 中有值 compact 和 marker，不過由于缺乏廣泛的支持，已經從 CSS2.1 中去除了。

附錄：