第四章盒子模型

1、讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效計(jì)算機(jī)學(xué)院計(jì)算機(jī)學(xué)院Web基礎(chǔ)第四章 盒子模型盒子模型的概念元素的類型盒子相關(guān)屬性元素的轉(zhuǎn)換 目錄2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)24.14.1認(rèn)識(shí)盒子模型4.24.2盒子模型相關(guān)屬性4.34.3元素的類型與轉(zhuǎn)換4.44.4塊元素垂直外邊距的合并4.54.5階段案例制作音樂盒2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)34.1 認(rèn)識(shí)盒子模型 盒子模型的概念盒子模型的概念所謂盒子模型盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容內(nèi)容、內(nèi)邊距內(nèi)邊距（padding）、邊框邊框（border）和外邊距外邊距（

2、margin）組成。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)44.1 認(rèn)識(shí)盒子模型以手機(jī)盒子手機(jī)盒子為例，更形象地認(rèn)識(shí)CSS盒子模型盒子模型如果把手機(jī)想象成HTML元素，那么手機(jī)盒子就是一個(gè)CSS盒子模型，其中手機(jī)為CSS盒子模型的內(nèi)容，填充泡沫的厚度為CSS盒子模型的內(nèi)邊距，紙盒的厚度為CSS盒子模型的邊框。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)54.1 認(rèn)識(shí)盒子模型多個(gè)手機(jī)盒子放在一起時(shí)，它們之間的距離就是CSS盒子模型的外邊距。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)64.1 認(rèn)識(shí)盒子模型example 01盒子模型的結(jié)構(gòu)盒子模型的結(jié)構(gòu)P87，圖，圖4-4網(wǎng)頁網(wǎng)頁就是多個(gè)盒子嵌套排列多個(gè)盒子

3、嵌套排列的結(jié)果。內(nèi)邊距內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周圍，當(dāng)給元素添加背景色或背景圖像時(shí)，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中。外邊距外邊距是該元素與相鄰元素之間的距離。如果給元素定義邊框邊框?qū)傩?，邊框?qū)⒊霈F(xiàn)在內(nèi)邊距和外邊距之間。注意：注意：雖然盒子模型擁有內(nèi)邊距、邊框、外邊距、寬和高這些基本屬性，但是并不要求每個(gè)元素都必須定義這些屬性。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)74.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃吙驅(qū)傩栽O(shè)置內(nèi)容設(shè)置內(nèi)容樣式屬性樣式屬性常用屬性值常用屬性值 上邊框 border-top-style:樣式; border-top-width:寬度; border-top-

4、color:顏色; border-top:寬度 樣式 顏色; 下邊框 border-bottom-style:樣式; border- bottom-width:寬度; border- bottom-color:顏色; border-bottom:寬度 樣式 顏色; 左邊框border-left-style:樣式; border-left-width:寬度; border-left-color:顏色; border-left:寬度 樣式 顏色; 右邊框border-right-style:樣式; border-right-width:寬度; border-right-color:顏色; bord

5、er-right:寬度 樣式 顏色; 樣式綜合設(shè)置border-style:上邊 右邊 下邊 左邊;none無（默認(rèn)）、solid單實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線寬度綜合設(shè)置border-width:上邊 右邊 下邊 左邊;像素值顏色綜合設(shè)置border-color:上邊 右邊 下邊 左邊;顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)邊框綜合設(shè)置border:四邊寬度 四邊樣式 四邊顏色; 2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)84.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃吙驅(qū)傩栽O(shè)置邊框樣式（設(shè)置邊框樣式（border-style） 邊

6、框樣式邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值常用屬性值如下：l none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）l solid：邊框?yàn)閱螌?shí)線l dashed：邊框?yàn)樘摼€l dotted：邊框?yàn)辄c(diǎn)線l double：邊框?yàn)殡p實(shí)線2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)94.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃吙驅(qū)傩栽O(shè)置邊框樣式（設(shè)置邊框樣式（border-style） 既可以對盒子的單邊進(jìn)行設(shè)置，也可以綜合設(shè)置四條邊的樣式：l border-top-style:上邊框樣式l border-right-style:右邊框樣式l border-bottom-style:下邊框樣式l bo

7、rder-left-style:左邊框樣式l border-style:上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式l border-style:上邊框樣式 左右邊框樣式 下邊框樣式l border-style:上下邊框樣式 左右邊框樣式l border-style:上下左右邊框樣式使用border-style屬性綜合設(shè)置四邊樣式時(shí)，必須按上右下左的上右下左的順時(shí)針順序順時(shí)針順序。省略時(shí)采用值復(fù)制的原則，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)104.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃吙驅(qū)傩栽O(shè)置邊框樣式（設(shè)置邊框樣式（bord

8、er-style） 只有上邊為虛線dashed，其他三邊為單實(shí)線solid，可以使用border-style綜合屬性分別設(shè)置各邊樣式：p border-style:dashed solid solid solid;p border-style:solid; /*綜合設(shè)置四邊樣式*/p border-top-style:dashed; /*上邊樣式覆蓋*/或綜合設(shè)置四條邊，然后采用上邊覆蓋：example 022022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)114.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃吙驅(qū)傩栽O(shè)置邊框?qū)挾龋ㄔO(shè)置邊框?qū)挾龋╞order-width）l border-top-width：

9、上邊框?qū)挾萳 border-right-width：右邊框?qū)挾萳 border-bottom-width：下邊框?qū)挾萳 border-left-width：左邊框?qū)挾萳 border- width：上邊框?qū)挾?右邊框?qū)挾?下邊框?qū)挾?左邊框?qū)挾染C合設(shè)置四邊寬度必須按上右下左的順時(shí)針順序采用值復(fù)制，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。 邊框?qū)挾纫部梢葬槍λ臈l邊分別設(shè)置分別設(shè)置，或綜合設(shè)置綜合設(shè)置四條邊的寬度：自己創(chuàng)建example 03:邊框?qū)挾壬?px，下左右1px。邊框樣式單實(shí)線。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)124.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃?/p>

10、框?qū)傩栽O(shè)置邊框顏色（設(shè)置邊框顏色（border-color） 邊框顏色的單邊與綜合設(shè)置如下：l border-top-color:上邊框顏色l border-right-color:右邊框顏色l border-bottom-color:下邊框顏色l border-left-color:左邊框顏色l border-color:上邊框顏色 右邊框顏色 下邊框顏色 左邊框顏色 順時(shí)針順序，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。其取值可為預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼rgb(r,g,b)，最常用的是十六進(jìn)制#RRGGBB。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)1

11、3 4.2.1 邊框?qū)傩赃吙驅(qū)傩栽O(shè)置邊框顏色（設(shè)置邊框顏色（border-color） 設(shè)置段落的邊框樣式為實(shí)線，上下邊灰色，左右邊紅色，代碼如下4.2 盒子模型相關(guān)屬性p border-style:solid; /*綜合設(shè)置邊框樣式*/ border-color:#CCC #FF0000; /*設(shè)置邊框顏色：兩個(gè)值為上下、左右*/h2border-style:solid; /*綜合設(shè)置邊框樣式*/border-bottom-color:red; /*單獨(dú)設(shè)置下邊框顏色*/設(shè)置二級(jí)標(biāo)題的邊框樣式為實(shí)線，且下邊框?yàn)榧t色，其余邊框采用默認(rèn)文本的顏色，代碼如下：2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)

12、14 4.2.1 邊框?qū)傩赃吙驅(qū)傩栽O(shè)置邊框顏色（設(shè)置邊框顏色（border-color） 注意：注意：設(shè)置邊框顏色時(shí)同樣必須設(shè)置邊框樣式必須設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則其他的邊框?qū)傩詿o效。4.2 盒子模型相關(guān)屬性2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)154.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃吙驅(qū)傩跃C合設(shè)置邊框綜合設(shè)置邊框l border-top:上邊框?qū)挾?樣式 顏色l border-right:右邊框?qū)挾?樣式 顏色l border-bottom:下邊框?qū)挾?樣式 顏色l border-left:左邊框?qū)挾?樣式 顏色l border:四邊寬度 樣式 顏色該設(shè)置

13、方式中，寬度、樣式、顏色順序任意，不分先后，可以只指定需要設(shè)置的屬性，省略的部分將取默認(rèn)值（樣式不能省略）。 CSS提供了更簡單的邊框設(shè)置方式：2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)164.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩赃吙驅(qū)傩跃C合設(shè)置邊框綜合設(shè)置邊框 像border、border-top等這樣，能夠一個(gè)屬性定義元素的多種樣式在CSS中稱之為復(fù)合屬性復(fù)合屬性。 常用的復(fù)合屬性復(fù)合屬性有font、border、margin、padding和background等。 復(fù)合屬性可以簡化代碼簡化代碼，提高提高頁面的運(yùn)行速度運(yùn)行速度，但是如果只有一項(xiàng)值，最好不要應(yīng)用復(fù)合屬性，以免樣式不被兼容

14、。 example 042022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)174.2 盒子模型相關(guān)屬性 4.2.2 內(nèi)邊距屬性內(nèi)邊距屬性l padding-top:上內(nèi)邊距l(xiāng) padding-right:右內(nèi)邊距l(xiāng) padding-bottom:下內(nèi)邊距l(xiāng) padding-left:左內(nèi)邊距l(xiāng) padding:上內(nèi)邊距右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距padding相關(guān)屬性的取值可為auto自動(dòng)（默認(rèn)值）、不同單位的數(shù)值、相對于父元素（或?yàn)g覽器）寬度的百分比%，實(shí)際工作中最常用的是像素值px，不允許使用負(fù)值。padding取14個(gè)值的情況與border相同example 05 padding屬性用于設(shè)置內(nèi)邊距，

15、也是復(fù)合屬性，相關(guān)設(shè)置如下：2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)184.2 盒子模型相關(guān)屬性 4.2.3 外邊距屬性外邊距屬性l margin-top:上外邊距l(xiāng) margin-right:右外邊距l(xiāng) margin-bottom:下外邊距l(xiāng) margin-left:上外邊距l(xiāng) margin:上外邊距 右外邊距 下外邊距 左外邊距margin相關(guān)屬性的值，以及復(fù)合屬性margin取14個(gè)值的情況與padding相同。外邊距可以使用負(fù)值，使相鄰元素重疊。 margin屬性用于設(shè)置外邊距，也是復(fù)合屬性，相關(guān)設(shè)置如下：2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)19 4.2.3 外邊距屬性外邊距屬性 對塊

16、元素應(yīng)用寬度屬性width，并將左右的外邊距都設(shè)置為auto，可使塊級(jí)元素水平居中，實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下： 為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距： example 064.2 盒子模型相關(guān)屬性.header width:960px; margin:0 auto;*padding:0; /*清除內(nèi)邊距*/margin:0; /*清除外邊距*/2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)204.2 盒子模型相關(guān)屬性 4.2.3 外邊距屬性外邊距屬性使用margin定義塊元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。合并后的外邊距的高度等

17、于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。 注意：注意：2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)211、設(shè)置背景顏色、設(shè)置背景顏色 background-color屬性值可使用預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼rgb(r,g,b)設(shè)置。background-color的默認(rèn)值為transparent，這時(shí)子元素會(huì)顯示其父元素的背景。 example 072、設(shè)置背景圖像、設(shè)置背景圖像 通過background-image屬性實(shí)現(xiàn)背景圖像的設(shè)置。 給example 07加背景圖像jianbian.jpg4.2 盒子模型相關(guān)屬性 4.2.4 背景屬性背景屬性2022-3-9計(jì)算機(jī)學(xué)院

18、web基礎(chǔ)224.2 盒子模型相關(guān)屬性 4.2.4 背景屬性背景屬性3、設(shè)置背景圖像平鋪、設(shè)置背景圖像平鋪 默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望圖像平鋪或只沿著一個(gè)方向平鋪，可以通過background-repeat屬性來控制，該屬性的取值如下：l repeat：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）l no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）l repeat-x：只沿水平方向平鋪l repeat-y：只沿豎直方向平鋪2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)234.2 盒子模型相關(guān)屬性 4.2.4 背景屬性背景屬性3、設(shè)置背景圖像平鋪、設(shè)置背景圖像平鋪

19、 默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望圖像平鋪或只沿著一個(gè)方向平鋪，可以通過background-repeat屬性來控制，該屬性的取值如下：l repeat：沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）l no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）l repeat-x：只沿水平方向平鋪l repeat-y：只沿豎直方向平鋪 round會(huì)讓background-image自動(dòng)縮放直到適應(yīng)且填充滿整個(gè)容器 space會(huì)讓background-image以相同的間距平鋪且填充滿整個(gè)容器或某個(gè)方向2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)244.2 盒子模型相關(guān)屬性re

20、peat roundspaceexample 082022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)254.2 盒子模型相關(guān)屬性 4.2.4 背景屬性背景屬性4、設(shè)置背景圖像的位置、設(shè)置背景圖像的位置 background-position屬性的值通常有兩個(gè)，中間用空格隔開，水平和垂直方向的坐標(biāo)。 background-position屬性的取值有多種，具體如下：l 使用不同單位的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標(biāo)，例如“background-position:20px 20px;”l 使用預(yù)定義的關(guān)鍵字：指定背景圖像在元素中的對齊方式l 水平方向：left center rightl 垂直方向：to

21、p center bottom2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)264.2 盒子模型相關(guān)屬性 4.2.4 背景屬性背景屬性4、設(shè)置背景圖像的位置、設(shè)置背景圖像的位置 使用百分比：按背景圖像和元素的指定點(diǎn)對齊 0% 0% 圖像左上角與元素左上角對齊 20% 30% 圖像20% 30%的點(diǎn)與元素20% 30%的點(diǎn)對齊 100% 100% 圖像右下角與元素右下角對齊 只有一個(gè)百分?jǐn)?shù)時(shí)，將作為水平值，垂直值默認(rèn)為50%2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)274.2 盒子模型相關(guān)屬性 4.2.4 背景屬性背景屬性5、設(shè)置背景圖像固定、設(shè)置背景圖像固定 用background-attachment屬

22、性來設(shè)置背景圖像固定，其屬性值如下：l scroll：圖像隨頁面元素一起滾動(dòng)（默認(rèn)值）l fixed：圖像固定在屏幕上，不隨頁面元素滾動(dòng)2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)284.2 盒子模型相關(guān)屬性 4.2.4 背景屬性背景屬性6、綜合設(shè)置元素的背景、綜合設(shè)置元素的背景 背景屬性是一個(gè)復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。其語法格式如下： 在上面的語法格式中，各個(gè)樣式順序任意，中間用空格隔開，不需要的樣式可以省略。但實(shí)際工作中通常按照背景色、url(圖像)、平鋪、定位、固定的順序來書寫。background:背景色 url(圖像) 平鋪 定位 固定;

23、2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)294.2 盒子模型相關(guān)屬性 4.2.5 盒子的寬與高盒子的寬與高 使用寬度屬性width和高度屬性height可以對盒子的大小進(jìn)行控制。 width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比%，實(shí)際工作中最常用的是像素值像素值。 example 09 大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：l 盒子的總寬度= width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和l 盒子的總高度= height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和2

24、022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)304.2 盒子模型相關(guān)屬性 4.2.5 盒子的寬與高盒子的寬與高 注意：注意：1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對行內(nèi)元素?zé)o效（標(biāo)記和除外）。2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)314.3 元素的類型與轉(zhuǎn)換 4.3.1 元素的類型元素的類型 HTML標(biāo)記一般分為塊標(biāo)記塊標(biāo)記和行內(nèi)標(biāo)記行內(nèi)標(biāo)記兩種類型，它們也稱塊元素和行內(nèi)元素。具體如下：l 塊元素每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。常見

25、的塊元素有、等，其中標(biāo)記是最典型的塊元素。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)324.3 元素的類型與轉(zhuǎn)換 4.3.1 元素的類型元素的類型l 行內(nèi)元素行內(nèi)元素不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。常見的行內(nèi)元素有、等，其中標(biāo)記最典型的行內(nèi)元素。example 102022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)334.3 元素的類型與轉(zhuǎn)換 4.3.1 元素的類型元素的類型在行內(nèi)元素中有幾個(gè)特殊的標(biāo)記、，可以對它們設(shè)置寬高和對齊屬性，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。 注意：注意：2022-3-9計(jì)算機(jī)學(xué)院 web

26、基礎(chǔ)344.3 元素的類型與轉(zhuǎn)換 4.3.2 與與標(biāo)記標(biāo)記1、標(biāo)記標(biāo)記標(biāo)記將網(wǎng)頁分割為獨(dú)立的、不同的部分，以實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。與之間相當(dāng)于一個(gè)容器容器，可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁元素。標(biāo)記通過與id、class等屬性配合，然后使用CSS設(shè)置樣式，可以替代大多數(shù)的塊級(jí)文本標(biāo)記。example 112022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)354.3 元素的類型與轉(zhuǎn)換 4.3.2 與與標(biāo)記標(biāo)記 注意：注意：1、標(biāo)記最大的意義在于和浮動(dòng)屬性float配合，實(shí)現(xiàn)網(wǎng)頁的布局，這就是常說的DIV+CSS網(wǎng)頁布局。2、可以替代塊級(jí)元素如、等，但是他們在語義上有一定的區(qū)別。例如和的不同在于，具有

27、特殊的含義，語義較重，代表著標(biāo)題，而是一個(gè)通用的塊級(jí)元素，主要用于布局。2022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)364.3 元素的類型與轉(zhuǎn)換 4.3.2 與與標(biāo)記標(biāo)記2、標(biāo)記標(biāo)記標(biāo)記是行內(nèi)元素，與之間只能包含文本和各種行內(nèi)標(biāo)記，如加粗標(biāo)記、傾斜標(biāo)記等，中還可以嵌套多層。標(biāo)記常用于定義網(wǎng)頁中某些特殊顯示的文本，配合class屬性使用。example 122022-3-9計(jì)算機(jī)學(xué)院 web基礎(chǔ)374.3 元素的類型與轉(zhuǎn)換 4.3.3 元素的轉(zhuǎn)換元素的轉(zhuǎn)換 使用display屬性對塊元素和行內(nèi)元素進(jìn)行轉(zhuǎn)換。其屬性值及含義如下：l inline：此元素顯示為行內(nèi)元素（行內(nèi)元素默認(rèn)display屬性值）l block：此元素顯示為塊元素（塊元素默認(rèn)display屬性值）l inline-block：此元素將顯示為行內(nèi)塊