請各位讀者添加一下作者的微信公眾號,以后有新的文章,將在微信公眾號直接推送給各位,非常感謝。
如果您覺得這篇文章還不錯,可以去H5專題中查看更多相關文章。
首先對于之前的拖更表示抱歉,因公派,前往上海,所以耽誤了幾天,以后會盡量按時更新.
今天課程主要介紹盒模型的基本概念,同時告訴大家,盒模型具體元素的構成。在最后面會介紹一下定位。
今日課程預覽
CSS 盒模型 概述
首先大家看到的是什么?
有月餅和月餅盒,對么?
所以,我們今天的課程就叫做“一個月餅盒引發(fā)的深思”。

大家首先看到的是什么?
是不是一個盒子,很像我們中秋節(jié)的時候包裝月餅的月餅盒子,對么?
其中兩個月餅盒子之間的距離就是咱們要介紹的-->margin
(外邊距).
而咱們每個月餅都要有最外層的包裝盒,而這個包裝盒的厚度,就是咱們的--> border
(邊框).
那咱們的月餅不可能都是直接挨在一起的,對吧,那每個月餅之間的間距,咱們就叫做--> padding
(內邊距).
那咱們介紹了月餅盒,咱們的月餅總應該有吧。
對的,咱們月餅的寬度就是 --> width
.
高度就是 --> height
.
而咱們的月餅就叫做 --> element
(元素).
內邊距、邊框和外邊距都是可選的,默認值是零。
但是,許多元素將由用戶代理樣式表設置外邊距和內邊距。
可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。
這可以分別進行,也可以使用通用選擇器對所有元素進行設置:
* {
margin: 0;
padding: 0;
}
在 CSS 中,width 和 height 指的是內容區(qū)域的寬度和高度。
增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸,但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。
如果希望這個元素框達到 100 個像素,就需要將內容的寬度設置為 70 像素,請看下圖:
提示:內邊距、邊框和外邊距可以應用于一個元素的所有邊,也可以應用于單獨的邊。
提示:外邊距可以是負值,而且在很多情況下都要使用負值的外邊距。
代碼和效果演示
在網頁中,添加一個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 中去除了。
附錄:
值 | 描述 |
---|---|
none | 此元素不會被顯示。 |
block | 此元素將顯示為塊級元素,此元素前后會帶有換行符。 |
inline | 默認。此元素會被顯示為內聯(lián)元素,元素前后沒有換行符。 |
inline-block | 行內塊元素。(CSS2.1 新增的值) |
list-item | 此元素會作為列表顯示。 |
run-in | 此元素會根據上下文作為塊級元素或內聯(lián)元素顯示。 |
compact | CSS 中有值 compact,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 |
marker | CSS 中有值 marker,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 |
table | 此元素會作為塊級表格來顯示(類似 <table> ),表格前后帶有換行符。 |
inline-table | 此元素會作為內聯(lián)表格來顯示(類似 <table> ),表格前后沒有換行符。 |
table-row-group | 此元素會作為一個或多個行的分組來顯示(類似 <tbody> )。 |
table-header-group | 此元素會作為一個或多個行的分組來顯示(類似 <thead> )。 |
table-footer-group | 此元素會作為一個或多個行的分組來顯示(類似 <tfoot> )。 |
table-row | 此元素會作為一個表格行顯示(類似 <tr> )。 |
table-column-group | 此元素會作為一個或多個列的分組來顯示(類似 <colgroup> )。 |
table-column | 此元素會作為一個單元格列顯示(類似 <col> ) |
table-cell | 此元素會作為一個表格單元格顯示(類似 <td> 和 <th> ) |
table-caption | 此元素會作為一個表格標題顯示(類似 <caption> ) |
inherit | 規(guī)定應該從父元素繼承 display 屬性的值。 |