HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程課件-項(xiàng)目4 網(wǎng)頁(yè)布局與元素的精確定位-DIV+CSS應(yīng)用

HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目1網(wǎng)頁(yè)布局與元素的精確定位——CSS+DIV應(yīng)用目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識(shí)鏈接02.學(xué)習(xí)目標(biāo)01.項(xiàng)目導(dǎo)入項(xiàng)目導(dǎo)入PART01項(xiàng)目導(dǎo)入【項(xiàng)目導(dǎo)入】“旅行家——住宿”頁(yè)面效果展示CSS+DIV可實(shí)現(xiàn)豐富的頁(yè)面布局及美化。在進(jìn)行網(wǎng)頁(yè)頁(yè)面實(shí)現(xiàn)時(shí)，我們通常使用盒子模型的定位屬性布局頁(yè)面，同時(shí)使用盒子模型的邊框及背景屬性美化頁(yè)面。本章我們將使用CSS+DIV制作“旅行家——住宿”頁(yè)面，案例完成效果如圖4.1所示。學(xué)習(xí)目標(biāo)PART02知識(shí)目標(biāo)能力目標(biāo)理解盒子模型的基本概念，熟悉盒子模型的基本屬性及高級(jí)屬性掌握盒子的浮動(dòng)屬性了解文檔流的概念，掌握盒子模型定位方法掌握HTML元素的類型及其轉(zhuǎn)換方法能夠布局網(wǎng)頁(yè)基本框架能夠靈活運(yùn)用盒子模型設(shè)計(jì)并制作網(wǎng)頁(yè)模塊知識(shí)鏈接PART03一、盒子模型及其基本屬性1、盒子模型簡(jiǎn)介我們通常所說(shuō)的盒子模型，是指將HTML中的元素看成一個(gè)矩形容器。我們通過(guò)實(shí)際生活中的手機(jī)盒子來(lái)類比CSS盒子模型，以便于更好理解盒子模型的概念，如圖4.2所示：

對(duì)于一個(gè)CSS盒子，其實(shí)際占據(jù)的寬高計(jì)算方法如下：總寬度=width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和總高度=height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和一、盒子模型及其基本屬性2、DIV結(jié)構(gòu)及其基本屬性在HTML中，我們使用div標(biāo)記來(lái)表示一個(gè)盒子，其基本語(yǔ)法格式為：<div屬性=”屬性值”>文本內(nèi)容</div>盒子模型的基本屬性包括盒子的寬高、邊框、內(nèi)邊距、外邊距，盒子模型的基本結(jié)構(gòu)如圖4.3所示：

（1）width/height：指盒子內(nèi)容部分的寬/高，其屬性值可以px為單位，也可以是百分比形式，用來(lái)表示其寬度所占其父對(duì)象的比例。（2）border：用來(lái)設(shè)置盒子的邊框?qū)傩?，其屬性如?.1所示：一、盒子模型及其基本屬性樣式屬性屬性說(shuō)明屬性值border-width設(shè)置邊框的寬度（粗細(xì)）px（像素值）border-style設(shè)置邊框的樣式（線型）none（默認(rèn)）、solid（單實(shí)線）、dashed（虛線）、dotted（電線）、double（雙實(shí)線）、groove（3D凹槽）、ridge（菱形邊框）、inset（3D凹邊）、outset（3D凸邊）border-color設(shè)置邊框的顏色顏色詞、十六進(jìn)制顏色碼、rgb值border設(shè)置綜合邊框?qū)傩詁order:寬度樣式顏色;border-radius設(shè)置圓角邊像素值、百分比border-image設(shè)置圖片邊框border-image:路徑裁剪方式/邊框?qū)挾?邊框擴(kuò)展距離重復(fù)方式;表4.1邊框?qū)傩砸弧⒑凶幽Ｐ图捌浠緦傩岳?-1邊框的基本屬性(代碼略）例4-2圓角邊(代碼略）一、盒子模型及其基本屬性border-image用來(lái)設(shè)置圖片邊框，其復(fù)合寫(xiě)法語(yǔ)法格式如下border-image:sourceslicewidthoutsetrepeat|initial|inherit;圖片邊框的屬性也可分為一下幾個(gè)屬性分別設(shè)置，具體如表4.2表4.2border-image圖片邊框?qū)傩詫傩悦Q描述border-image-source用在邊框的圖片的路徑。border-image-slice圖片邊框向內(nèi)偏移。border-image-width圖片邊框的寬度。border-image-outset邊框圖像區(qū)域超出邊框的量。border-image-repeat圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。一、盒子模型及其基本屬性例4-3圖片邊框（代碼略）

圖4.6例4-3素材圖圖4.7圖片邊框裁切屬性原理圖4.8圖片邊框超出屬性原理一、盒子模型及其基本屬性（3）padding/margin：用來(lái)設(shè)置盒子內(nèi)/外邊距的寬度，其屬性值是一個(gè)像素值也可使用auto屬性自動(dòng)設(shè)置邊距。可以將邊距設(shè)置為同樣的值，也可將邊距分四個(gè)方向設(shè)置為不同的值。其語(yǔ)法格式如下：padding/margin:邊距值padding/margin:上下邊距值左右邊距值padding/margin:上邊距值左右邊距值下邊距值padding/margin:上邊距值右邊距值下邊距值左邊距值

一、盒子模型及其基本屬性例4-4內(nèi)邊距及外邊距（代碼略）1.box-shadow屬性box-shadow屬性用于給盒子添加陰影效果，其語(yǔ)法格式如下：box-shadow:水平陰影垂直陰影模糊半徑擴(kuò)展半徑陰影顏色陰影類型

box-shadow屬性有6個(gè)屬性值，其具體含義如表4.3所示。表4.3box-shadow屬性值二、DIV高級(jí)屬性屬性值說(shuō)明水平陰影必需，水平陰影的位置。像素值垂直陰影必需，垂直陰影的位置。像素值模糊半徑陰影模糊的范圍。像素值擴(kuò)展半徑陰影的寬度。像素值，不可為負(fù)值陰影顏色CSS顏色規(guī)則陰影類型outset（默認(rèn)）外陰影，inset內(nèi)陰影例4-5盒子陰影（代碼略）二、DIV高級(jí)屬性2.box-sizing屬性 默認(rèn)狀態(tài)下，盒子模型的寬高指的是盒子中內(nèi)容部分的寬高，盒子實(shí)際所占寬高是內(nèi)容寬高加上邊框以及內(nèi)外邊距的長(zhǎng)度。在網(wǎng)頁(yè)設(shè)計(jì)是，繁瑣的計(jì)算不符合人們的思維習(xí)慣，我們可以使用CSS3的box-sizing屬性，修改盒子寬高的計(jì)算規(guī)則，定義盒子的寬高是否包含邊框及內(nèi)外邊距。box-sizing的語(yǔ)法格式如下：box-sizing:content-box/border-box;box-sizing有兩個(gè)可選屬性值，其中content-box是我們默認(rèn)狀態(tài)下的盒子，這種狀態(tài)下設(shè)置盒子的寬高指的是內(nèi)容部分的寬高；border-box狀態(tài)下設(shè)置盒子的寬高指的是盒子邊框（包含邊框）以內(nèi)的寬高，也就是內(nèi)容與邊框以及邊距的總和。下面以例4-6展示content-box與border-box的不同。二、DIV高級(jí)屬性例4-6box-sizing屬性（代碼略）二、DIV高級(jí)屬性3.background屬性在CSS中，我們可以通過(guò)background屬性設(shè)置盒子的背景，我們不僅可以設(shè)置盒子的背景顏色，也可以選用圖片作為盒子的背景。background屬性包含以下幾個(gè)屬性，幾個(gè)屬性可單獨(dú)使用，也可以用background屬性綜合設(shè)置背景樣式，具體如表4.4所示：表4.4background屬性二、DIV高級(jí)屬性屬性說(shuō)明background-color規(guī)定要使用的背景顏色。background-image規(guī)定要使用的背景圖像。background-position規(guī)定背景圖像的位置。background-size規(guī)定背景圖片的尺寸。background-repeat規(guī)定如何重復(fù)背景圖像。background-origin規(guī)定背景圖片的定位區(qū)域。background-clip規(guī)定背景的繪制區(qū)域。background-attachment規(guī)定背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。background綜合設(shè)置背景樣式。（1）background-color：背景顏色background-color屬性可以用來(lái)設(shè)置盒子的背景顏色，其屬性值可以是一個(gè)代表顏色的英文單詞，也可以使用rgb值或十六進(jìn)制顏色值，其語(yǔ)法格式如下：background-color:rgb/rgba/十六進(jìn)制顏色值;其中，rgba值可將背景顏色設(shè)置為帶有透明度的顏色。設(shè)置背景透明度有兩種方式，具體如下：

RGBA模式：RGBA是CSS3新增顏色模式，該模式在RGB模式上增加了一個(gè)參數(shù)alpha用來(lái)設(shè)置顏色的透明度，其寫(xiě)法為rgba（r,g,b,alpha）。alpha參數(shù)值可設(shè)置成為一個(gè)0-1之間的值，值越小顏色的透明度越高，當(dāng)值為0時(shí)，代表顏色完全透明，值為1時(shí)，代表顏色完全不透明。

opacity屬性：在CSS3中，使用opacity屬性可以設(shè)置元素的透明度，其屬性值和RGBA模式中alpha參數(shù)的取值方法相同。二、DIV高級(jí)屬性例4-7背景顏色設(shè)置（代碼略）二、DIV高級(jí)屬性（2）background-image：背景圖片background-image屬性可以用來(lái)設(shè)置盒子的背景圖片，其屬性值是圖片的url地址。background-image:url(圖片路徑);（3）background-position：圖片位置bacround-position屬性用來(lái)設(shè)置背景圖片的位置，屬性只有多種設(shè)置方法。background-position:xposypos|x%y%|預(yù)定義關(guān)鍵字;其中：

xposypos：使用不同單位的值來(lái)定義圖片的左上角的水平位置和垂直位置，最常用的單位是px，如果僅設(shè)置一個(gè)值，第二個(gè)值默認(rèn)為50%。

x%y%：使用百分比定義圖片左上角的水平位置和垂直位置，0%0%代表與左上角對(duì)齊，50%50%代表與中心點(diǎn)對(duì)齊，100%100%代表與右下角對(duì)齊。如果僅設(shè)置一個(gè)值，第二個(gè)值默認(rèn)為50%。預(yù)定義關(guān)鍵字：使用代表方向的單詞指定元素的位置。水平方向有：left、center、right，垂直方向有：top、center、bottom。使用兩個(gè)關(guān)鍵字定義位置時(shí)，第一個(gè)值表示其水平位置，第二個(gè)值表示其垂直位置。只有一個(gè)值時(shí)，第二個(gè)值默認(rèn)為center。二、DIV高級(jí)屬性（4）background-size：圖片大小background-size屬性用來(lái)設(shè)置背景圖片的大小，其語(yǔ)法格式如下：background-size:cover|contain|像素值|百分比;其中：

cover：保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。

contain：此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。像素值：以像素值的方式定義背景圖片的大小。百分比：將計(jì)算相對(duì)于背景定位區(qū)域的百分比，作為背景圖片的大小。二、DIV高級(jí)屬性（5）background-repeat：平鋪方式background-repeat屬性用來(lái)設(shè)置圖片的平鋪方式，其語(yǔ)法格式如下：background-repeat:repeat|no-repeat|repeat-x|repeat-y;其中：repeat：沿水平和垂直兩個(gè)方向平鋪；no-repeat：不平鋪；repeat-x：沿水平方向平鋪；repeat-y：沿垂直方向平鋪。二、DIV高級(jí)屬性例4-8背景圖片基本屬性（代碼略）二、DIV高級(jí)屬性（6）background-origin：背景繪制區(qū)域background-origin屬性規(guī)定background-position屬性相對(duì)于什么位置來(lái)定位，即背景圖片左上角的定位起點(diǎn)。其語(yǔ)法格式如下：background-origin:padding-box|border-box|content-box;其中：padding-box：背景圖像相對(duì)于內(nèi)邊距框來(lái)定位（默認(rèn)值）。border-box：背景圖像相對(duì)于邊框盒來(lái)定位。content-box：背景圖像相對(duì)于內(nèi)容框來(lái)定位。（7）background-clip：背景定位區(qū)域background-clip屬性規(guī)定背景的繪制區(qū)域。其語(yǔ)法格式如下：background-clip:border-box|padding-box|content-box;其中：border-box：背景被裁剪到邊框盒。默認(rèn)padding-box：背景被裁剪到內(nèi)邊距框。content-box：背景被裁剪到內(nèi)容框。二、DIV高級(jí)屬性例4-9background-origin及background-clip屬性（代碼略）二、DIV高級(jí)屬性（8）background-attachment：背景圖片固定方式background-attachment屬性用來(lái)設(shè)置圖片的固定方式，其語(yǔ)法格式如下：background-attachment:scroll|fixed;其中：

scroll：圖像跟隨頁(yè)面滾動(dòng)（默認(rèn)值）。

fixed：圖像不跟隨頁(yè)面滾動(dòng)，固定在屏幕某一位置。二、DIV高級(jí)屬性例4-10背景圖片固定方式（代碼略）二、DIV高級(jí)屬性（9）background：背景復(fù)合屬性我們可以分別設(shè)置以上背景樣式屬性，也可以使用background屬性綜合設(shè)置背景樣式，其語(yǔ)法格式如下：background:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position/background-sizebackground-originbackground-clip;

這里有三個(gè)非常重要的問(wèn)題需要我們注意：屬性的順序官方?jīng)]有強(qiáng)制要求。background-position和background-size兩個(gè)屬性的值非常的類似，兩個(gè)屬性值都規(guī)定的話，需要用斜杠分隔；如果規(guī)定一個(gè)，那么僅對(duì)background-position屬性有效，background-size采用默認(rèn)值。background-origin與background-clip兩個(gè)屬性值完全相同，如果只規(guī)定一個(gè)，對(duì)兩個(gè)屬性都有效，如果規(guī)定兩個(gè)，它們之間不需要使用斜線分隔。二、DIV高級(jí)屬性例4-11復(fù)合背景設(shè)置（代碼略）二、DIV高級(jí)屬性（10）設(shè)置多重背景圖像

CSS3以前的版本中，一個(gè)容器只能設(shè)置一張背景圖片，CSS3增強(qiáng)了背景圖片屬性，我們可以在一個(gè)容器中設(shè)置多張圖像作為背景圖片。使用多張圖片作為背景圖片時(shí)不同圖片的屬性用逗號(hào)隔開(kāi)。多張圖片url地址寫(xiě)在前面的圖片顯示在最頂層，寫(xiě)在后面的圖片顯示在底層。二、DIV高級(jí)屬性例4-12多重背景圖片（代碼略）二、DIV高級(jí)屬性4.漸變填充 在CSS3中，我們不僅可以將盒子的背景設(shè)置為純色或者圖片，還可以將盒子的背景設(shè)置為漸變效果。CSS3中的漸變效果主要通過(guò)background-image屬性下的函數(shù)實(shí)現(xiàn)，包括線性漸變和徑向漸變。（1）線性漸變 線性漸變指顏色沿直線方向過(guò)渡，其基本語(yǔ)法如下：background:linear-gradient(direction,color-stop1,color-stop2,...);

其中：

derection：漸變方向，其屬性值可以是“totop|right|bottom|left”，也可以是一個(gè)角度。0deg對(duì)應(yīng)totop，90deg對(duì)應(yīng)toright，180deg對(duì)應(yīng)tobottom，270deg對(duì)應(yīng)toleft。默認(rèn)值是180deg。

color-stop：漸變起止顏色，可以添加多個(gè)顏色值。二、DIV高級(jí)屬性例4-13線性漸變（代碼略）二、DIV高級(jí)屬性（2）徑向漸變徑向漸變指顏色從中心點(diǎn)沿圓形或橢圓形半徑方向過(guò)渡的漸變效果。其基本語(yǔ)法如下：background:radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);

其中：

shapesize：定義漸變形狀及形狀大小的一組參數(shù)值，兩個(gè)參數(shù)值用空格隔開(kāi)。shape及size參數(shù)值如表4.5所示。

position：定義圓心位置，定義方法如背景圖片定位方式?？梢允褂帽硎痉较虻脑~從水平方向和垂直方向描述圓心位置，例如topleft（左上）。也可以使用像素值或百分比表示圓心位置，其值可以是負(fù)值。

color-stop：漸變起止顏色，可以添加多個(gè)顏色值。二、DIV高級(jí)屬性二、DIV高級(jí)屬性shape屬性值說(shuō)明circle徑向漸變?yōu)椤皥A形”ellipse徑向漸變?yōu)椤皺E圓形”size屬性值說(shuō)明closet-side指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊closest-corner指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角farthest-side指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊f(xié)arthest-corner指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角表4.5shapesize參數(shù)值例4-14徑向漸變（代碼略）二、DIV高級(jí)屬性（3）重復(fù)漸變 重復(fù)線性漸變background:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

重復(fù)徑向漸變background:repeating-radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);重復(fù)漸變的參數(shù)設(shè)置與線性漸變及徑向漸變相似。對(duì)于線性漸變及徑向漸變中的顏色，可以用“color位置值”的形式表示某個(gè)確定位置的固定色值，其中位置值是指相對(duì)虛擬漸變射線的百分比或者長(zhǎng)度值。二、DIV高級(jí)屬性例4-15重復(fù)漸變（代碼略）二、DIV高級(jí)屬性1.float屬性float屬性定義元素在哪個(gè)方向浮動(dòng)，使元素可以沿水平方向排列。float有3個(gè)屬性值如下：

left：向左浮動(dòng)

right：向右浮動(dòng)

none：不浮動(dòng)（默認(rèn)值）三、元素的浮動(dòng)例4-16元素浮動(dòng)（代碼略）三、元素的浮動(dòng)三、元素的浮動(dòng)2.清除浮動(dòng) 在使用float屬性后，元素的浮動(dòng)會(huì)對(duì)其周圍的元素產(chǎn)生影響。清除浮動(dòng)對(duì)周圍元素的影響的常用方法有2種，一種是使用clear屬性，一種是使用overflow屬性，具體如下：1）clear屬性 在CSS中可以使用clear屬性清除浮動(dòng)，clear有3個(gè)常用的屬性值，分別是left、right、both，可以清除元素左側(cè)、右側(cè)、兩邊的浮動(dòng)影響。我們可以將例4-16中給段落標(biāo)記p添加clear屬性，文字將移動(dòng)至下方，不會(huì)受上面3個(gè)小盒子的影響，效果如圖4.24。元素浮動(dòng)時(shí)，除了會(huì)對(duì)周圍的兄弟元素產(chǎn)生影響，還會(huì)對(duì)父對(duì)象產(chǎn)生影響。在例4-16中，如果我們?nèi)サ魀標(biāo)簽及其中的文字，同時(shí)不設(shè)置外big盒子的寬高，會(huì)產(chǎn)生如下圖4.25中左側(cè)的效果，大盒子變成了細(xì)長(zhǎng)盒子。為了避免這樣的問(wèn)題，我們可以在.small盒子的后面添加一個(gè)元素，并對(duì)其設(shè)置clear屬性，消除浮動(dòng)對(duì)其父元素的影響，效果如4.25中右側(cè)所示。具體操作有兩種方法： 使用空標(biāo)記清除浮動(dòng)需要在子元素的最后一個(gè)后面再添加一個(gè)空標(biāo)記，并為其添加clear屬性。 使用after偽對(duì)象清除標(biāo)記為父對(duì)象添加一個(gè)after偽對(duì)象：三、元素的浮動(dòng)

（2）overflow屬性overflow屬性用來(lái)定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。overflow屬性有5個(gè)常用屬性值，如表所示：三、元素的浮動(dòng)值描述visible默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。hidden內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。inherit規(guī)定應(yīng)該從父元素繼承overflow屬性的值。例4-18overflow屬性用法（代碼略）三、元素的浮動(dòng)1.塊元素與行內(nèi)元素 HTML中的元素可以分為兩類，分別為塊元素及行內(nèi)元素，如圖4.27所示。四、元素的定位例4-16元素浮動(dòng)（代碼略）四、元素的定位（1）塊元素最典型的塊元素是<div>，常見(jiàn)的塊元素有<hn>、<p>、<ul>、<li>、<ol>等，塊元素具有如下特點(diǎn)： 每個(gè)塊級(jí)元素都是獨(dú)自占一行。 元素的高度、寬度、行高和邊距都是可以設(shè)置的。 元素的寬度如果不設(shè)置的話，默認(rèn)為父元素的寬度。（2）行內(nèi)元素最典型的行內(nèi)元素是<span>，常見(jiàn)的行內(nèi)元素有<strong>、<em>、<del>、<a>等，行內(nèi)元素具有如下特點(diǎn)： 每一個(gè)行內(nèi)元素可以和別的行內(nèi)元素共享一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下了，才會(huì)換行。 行內(nèi)元素不能設(shè)置width,height。 行內(nèi)水平方向的padding-left和padding-right都會(huì)產(chǎn)生邊距效果，豎直方向上的padding-top和padding-bottom都不會(huì)產(chǎn)生邊距效果。四、元素的定位（3）元素類型轉(zhuǎn)換 display屬性可用來(lái)轉(zhuǎn)換元素類型。display的常用屬性值如表4.7所示：四、元素的定位屬性值說(shuō)明block此元素將顯示為塊級(jí)元素inline此元素會(huì)被顯示為行內(nèi)元素inline-block行內(nèi)塊元素?？梢栽O(shè)置寬高對(duì)齊等屬性，但是不會(huì)獨(dú)占一行。none此元素不會(huì)被顯示。2.文檔流概念在HTML的布局中，元素自動(dòng)按照從上到下，從左到右的順序進(jìn)行排列，這種排列方式被稱為文檔流。塊元素在文檔流中按照從上到下的順序排列，行內(nèi)元素在文檔流中按照從左到右的順序排列。四、元素的定位3.position屬性

position屬性用來(lái)指定元素的定位方式，其常用屬性值如表4.8所示四、元素的定位屬性值說(shuō)明absolute絕對(duì)定位，脫離原文檔流相對(duì)其父對(duì)象進(jìn)行定位。fixed固定定位，脫離源文檔流相對(duì)瀏覽器窗口進(jìn)行定位。relative相對(duì)定位，相對(duì)于源文檔流中的位置進(jìn)行定位。static靜態(tài)定位，默認(rèn)值。對(duì)元素進(jìn)行定位時(shí)，需要設(shè)置定位模式和邊偏移。邊偏移屬性如表4.9所示，邊偏移的屬性值可以以px為單位也可以寫(xiě)作百分比的形式。四、元素的定位屬性說(shuō)明left相對(duì)其父元素左邊線的偏移量right相對(duì)其父元素右邊線的偏移量top相對(duì)其父元素上邊線的偏移量botton相對(duì)其父元素下邊線的偏移量例4-17盒子的定位（代碼略）四、元素的定位4.z-index層疊屬性當(dāng)元素發(fā)生重疊時(shí)，可以使用z-index屬性設(shè)置其堆疊的順序。z-index屬性的屬性值默認(rèn)值為0，也可取正整數(shù)或負(fù)整數(shù)。數(shù)值越大，定位的元素約靠上。四、元素的定位例4-20層疊屬性（代碼略）四、元素的定位總結(jié)提升PART04總結(jié)提升：常見(jiàn)網(wǎng)頁(yè)布局方式盒子模型及其屬性不但可以美化頁(yè)面，還有另一個(gè)重要的作用就是布局頁(yè)面。在HTML5中提供了新的結(jié)構(gòu)元素用來(lái)布局頁(yè)面。常用的頁(yè)面布局方式包括靜態(tài)布局、流式布局、彈性布局、網(wǎng)格布局、自適應(yīng)布局、表格布局以及響應(yīng)式布局，下面我們將對(duì)常見(jiàn)的頁(yè)面布局方式做簡(jiǎn)單的介紹。一、static靜態(tài)布局靜態(tài)布局是最傳統(tǒng)Web頁(yè)面布局方式，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。如圖4.31所示，大多數(shù)PC端網(wǎng)頁(yè)都是采用這種布局方式，通常會(huì)設(shè)置一個(gè)min-width，當(dāng)窗口小于這個(gè)寬度，就會(huì)出現(xiàn)滾動(dòng)條。這種布局方式的優(yōu)點(diǎn)是簡(jiǎn)單、穩(wěn)定，但是對(duì)移動(dòng)設(shè)備兼容性較差。二、Fluid流式布局流式布局使用百分比來(lái)定義盒子的寬度用像素值定義盒子的高度，以此來(lái)增加頁(yè)面的可塑性和流動(dòng)性，以適應(yīng)不同分辨率的屏幕，但對(duì)尺寸跨度較大的屏幕適應(yīng)性和穩(wěn)定性較差。流布局常使用到媒體查詢和優(yōu)化樣式技術(shù)。三、Flex彈性布局彈性布局是CSS3中基于彈性盒子的布局方式。引入彈性盒子布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。flex彈性布局是基于軸線結(jié)構(gòu)的一維布局。使用彈性布局時(shí)需要使用display：flex屬性

將容器定義為彈性盒