CSS 盒模型_第四天

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


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

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

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

今日課程預覽

這里寫圖片描述

CSS 盒模型 概述

首先大家看到的是什么?

有月餅和月餅盒,對么?

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

yuebing
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在瀏覽器中的樣子

</img>

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

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

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

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

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

添加代碼之后,效果如下:

</img>

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


注意事項

看下如下情況:

</img>

上面的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 屬性的值。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,790評論 1 92
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,038評論 1 4
  • CSS盒模型 在CSS中盒模型被分為兩種,第一種是W3C的標準模型,第二種是IE怪異盒模型。兩種盒子模型都包括pa...
    _空空閱讀 3,398評論 0 3
  • 引言 這次給大家?guī)砹薈SS-盒子模型部分的筆記,大家一同交流?? 認識盒子模型之前,先來了解一下CSS元素的分類吧...
    zhaolion閱讀 4,327評論 9 85
  • 余秋雨說 我等不到了 可是我會等 也愿意等 因為該來的一定會來 不過是要看時間愿意給你幾分薄面還你幾份人情 人這一...
    Hare韓熙語閱讀 145評論 0 1