項(xiàng)目四 食品企業(yè)web前端基礎(chǔ)之頁面布局

食品企業(yè)WEB前端設(shè)計(jì)基礎(chǔ)項(xiàng)目四

食品企業(yè)web前端之頁面布局

項(xiàng)目任務(wù)描述綜合運(yùn)用盒子模型、浮動(dòng)、定位、溢出、多列布局等技術(shù)，實(shí)現(xiàn)“食品企業(yè)網(wǎng)站”的頁面布局。食品企業(yè)WEB前端之頁面布局盒子模型盒子模型屬性元素的浮動(dòng)目錄CONTENTS多列布局元素的定位盒子模型認(rèn)識(shí)盒子模型盒子模型就是所有HTML元素可以看作盒子，在CSS中，"boxmodel"這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。

（

創(chuàng)新思維點(diǎn)：類比）CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：外邊距，邊框，內(nèi)邊距和實(shí)際內(nèi)容。認(rèn)識(shí)盒子模型

盒子模型便于網(wǎng)頁的布局，其實(shí)就是就是多個(gè)盒子嵌套排列。例如，常用的div元素，就是英文division的縮寫，意為“分割、區(qū)域”。<div>標(biāo)記簡(jiǎn)單而言就是一個(gè)區(qū)塊容器標(biāo)記，可以將網(wǎng)頁分割為獨(dú)立的、不同的部分，以實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。盒子模型的作用盒子模型的結(jié)構(gòu)盒子結(jié)構(gòu)的縱深順序，自下而上為：外邊距、背景顏色、背景圖像、內(nèi)邊距、內(nèi)容、邊框。盒子模型屬性邊框?qū)傩?.邊框?qū)挾?border-width邊框?qū)挾扔糜谠O(shè)置元素邊框的寬度值。邊框?qū)傩钥刂圃厮加每臻g的邊緣。邊框?qū)傩灾饕ㄟ吙驅(qū)挾?、邊框樣式、邊框顏色等，此外還有border的綜合屬性，在CSS3中添加了圓角邊框、圖片邊框?qū)傩?。語法：

border-width:上邊框?qū)挾戎礫右邊框?qū)挾戎迪逻吙驅(qū)挾戎底筮吙驅(qū)挾戎礭;語法中，寬度由數(shù)字和單位組成的長(zhǎng)度值，不可為負(fù)值，常用取值單位為像素px。并且遵循值復(fù)制的原則，值可以取1到4個(gè)，設(shè)置了1個(gè)值，應(yīng)用于4個(gè)邊框；設(shè)置了2個(gè)或3個(gè)值，省略的值與對(duì)邊相等；設(shè)置了4個(gè)值，按照上、右、下、左的順序顯示結(jié)果。邊框?qū)傩岳喝绻斎?個(gè)邊框的寬度值，按照border-top-width:寬度值、border-right-width:寬度值、border-bottom-width:寬度值、border-left-width:寬度值逐個(gè)定義。舉例：“border-width:2px4px6px8px;”

等同于border-top-width:

2px;border-right-width:

4px;border-bottom-width:6px;border-left-width:8px;上右下左邊框?qū)傩耘e例：“border-width:3px;”

表示4個(gè)邊框的寬度都為3像素?！癰order-width:3px6px;”

表示上下邊框的寬度都為3像素，左右邊框的寬度都為6像素。“border-width:3px6px9px;”

表示上邊框的寬度都為3像素，左右邊框的寬度都為6像素

下邊框的寬度都為9像素。舉例：“border-width:3px6px9px;”

等同于border-top-width:3px;border-right-width:6px;border-bottom-width:

9px;border-left-width:

6px;邊框?qū)傩?.邊框樣式border-style邊框樣式屬性用以定義邊框的風(fēng)格呈現(xiàn)樣式，這個(gè)屬性必須用于指定的邊框。語法：

border-style:上邊框樣式[右邊框樣式下邊框樣式左邊框樣式];屬性含義屬性含義none不顯示邊框，為默認(rèn)屬性值groove邊框帶有立體感的溝槽dotted點(diǎn)線ridge邊框成脊形dashed虛線inset使整個(gè)方框凹陷，即在外框內(nèi)嵌入一個(gè)立體邊框solid實(shí)線outset使整個(gè)方框凸起，即在外框內(nèi)嵌外一個(gè)立體邊框double雙實(shí)線

border-style屬性為綜合屬性設(shè)置四邊樣式，必須按上右下左的順時(shí)針順序，省略時(shí)同樣采用值復(fù)制的原則，即1個(gè)值為4邊，2個(gè)值為上下/左右，3個(gè)值為上/左右/下。border-style也可以分別定義border-top-style、border-right-style、border-bottom-style、border-left-style的樣式。橙色背景的solid（實(shí)線）dashed（虛線）、dotted（點(diǎn)線）、double（雙實(shí)線）較為常用。邊框?qū)傩?.邊框顏色-border-color邊框顏色屬性用于定義邊框的顏色。語法：

border-color:上邊框顏色值[右邊框顏色值下邊框顏色值左邊框顏色值];border-color的屬性值同樣復(fù)合顏色的定義法：預(yù)定義的顏色值、十六進(jìn)制#RRGGBB和RGB代碼rgb（r，g，b）三種，其中十六進(jìn)制#RRGGBB使用的最多。border-color的值可以取1到4個(gè)，設(shè)置了1個(gè)值，應(yīng)用于4個(gè)邊框；設(shè)置了2個(gè)或3個(gè)值，省略的值與對(duì)邊相等；設(shè)置了4個(gè)值，按照上、右、下、左的順序顯示結(jié)果。同樣，border-color也可以按照border-top-color:顏色值、border-right-color:顏色值、border-bottom-color:顏色值、border-left-color:顏色值逐個(gè)定義。邊框?qū)傩?.邊框綜合屬性-borderborder為復(fù)合屬性是邊框?qū)挾萣order-width、樣式border-style和顏色border-color的簡(jiǎn)寫方式。語法：

border:<邊框?qū)挾?gt;|<邊框樣式>|<顏色>；在復(fù)合屬性中，邊框?qū)傩詁order能同時(shí)設(shè)置4種邊框。若果只需要給出一組邊框的寬度、樣式與顏色，可以通過border-top、border-right、border-bottom、border-left分別設(shè)置。例如“border:1pxsolid#F00;”表示元素的4個(gè)邊框都是1像素紅色的實(shí)線。當(dāng)網(wǎng)頁中只需要元素的底部邊框?yàn)?像素紅色的實(shí)線時(shí)，代碼修改為“border-bottom:1pxsolid#F00;”。邊框?qū)傩浴緦?shí)例】border邊框?qū)傩缘脑O(shè)置。邊距屬性1.內(nèi)邊距-padding邊距屬性分為：內(nèi)邊距padding和外邊距marign兩種。語法：

padding：上內(nèi)邊距值[右內(nèi)邊距值下內(nèi)邊距值左內(nèi)邊距值];padding屬性用于設(shè)置內(nèi)邊距，它是一個(gè)復(fù)合屬性語法格式中。邊距值由數(shù)字和單位組成的長(zhǎng)度值，不可為負(fù)值，常用取值單位為像素px，數(shù)值也可以是百分比，使用百分比時(shí)，內(nèi)邊距的寬度值隨著父元素寬度width的變化而變化而變化，與height無關(guān)。內(nèi)邊距主要用來調(diào)整內(nèi)容在盒子中的置，指的是元素內(nèi)容與邊框border之間的距離，也被常稱為內(nèi)填充。padding也遵循值復(fù)制的原則，與border屬性類似。當(dāng)只對(duì)某個(gè)方向的內(nèi)邊距進(jìn)行設(shè)置時(shí)，可以通過padding-top（上內(nèi)邊距）、padding-right（右內(nèi)邊距）、padding-bottom（下內(nèi)邊距）、padding-left（左內(nèi)邊距）分別設(shè)置。邊距屬性2.外邊距-margin語法：

margin：上外邊距值[右外邊距值下外邊距值左外邊距值];margin屬性用于設(shè)置外邊距，它是一個(gè)復(fù)合屬性，與內(nèi)邊框padding的用法類似。外邊距margin指的是元素邊框與相鄰元素之間的距離。注意：當(dāng)只需要對(duì)某個(gè)方向的外邊距進(jìn)行設(shè)置時(shí)，可以通過margin-top（上外邊距）、margin-right（右外邊距）、margin-bottom（下外邊距）、margin-left（左外邊距）分別設(shè)置。外邊距可以使用負(fù)值，使相鄰元素重疊。當(dāng)使用盒元素進(jìn)行布局時(shí)，使用了寬度屬性，同時(shí)將margin的左右外邊距設(shè)置為auto時(shí)，可以實(shí)現(xiàn)盒元素的居中。邊框?qū)傩浴緦?shí)例】?jī)?nèi)外邊距的使用。盒子模型新增屬性1.圓角邊框CSS3中新增加了圓角邊框、圖片邊框、盒子陰影等屬性。語法：

border-radius:半徑值1/半徑值2;語法中，border-radius的屬性值包含2個(gè)參數(shù)，取值可以為像素值或百分比。其中“半徑值1”表示圓角的水平半徑，“半徑值2”表示圓角的垂直半徑，兩個(gè)參數(shù)之間用“/”隔開。。在CSS3中，使用border-radius屬性實(shí)現(xiàn)了矩形邊框的圓角化。例如：

width:500px;height:500px;border:4pxsolid#F00;border-radius:80px/100px;

/*分別設(shè)置水平半徑80px、垂直半徑100px*/盒子模型新增屬性例如：

width:400px;height:400px;border:4pxsolid#4087d0;border-radius:160px/80px;/*分別設(shè)置水平半徑160px、垂直半徑80px*/圓角邊框的參數(shù)示意圖圓角邊框的設(shè)置效果【實(shí)例】圓角邊框?qū)傩缘脑O(shè)置。盒子模型新增屬性在定義border-radius屬性時(shí)，如果只保留一個(gè)參數(shù)。例如：border-radius:200px;由于圖片自身的寬高都為400px，所以整體圖片顯示為圓形。設(shè)置一個(gè)參數(shù)實(shí)現(xiàn)圓形效果盒子模型新增屬性2.圖片邊框圖片邊框的屬性與含義在CSS3中，使用圖片邊框border-image實(shí)現(xiàn)對(duì)區(qū)域整體添加一個(gè)圖片邊框。border-image屬性是綜合屬性，還包括border-image-source、border-image-slice、border-image-width、border-image-outset以及border-image-repeat等屬性。屬性名稱含義border-image-source指定圖片路徑。border-image-slice指定邊框圖像頂部、右側(cè)、底部左側(cè)內(nèi)偏移量。border-image-width指定邊框?qū)挾?，可以設(shè)置1-4個(gè)值。border-image-outset指定背景想盒子外部延伸的距離，可以設(shè)置1-4個(gè)值。border-image-repeat指定背景圖片的平鋪方式，stretch表示拉伸、repeat重復(fù)、round表示環(huán)繞。盒子模型新增屬性2.圖片邊框語法：

border-image-source：none|圖片路徑；border-image-slice：圖像頂部、右側(cè)、底部左側(cè)內(nèi)偏移值(像素或百分百；border-image-width：邊框的寬度值(像素)；border-image-outset：數(shù)值；border-image-repeat：stretch|repeat|round；綜合屬性語法如下：border-image：border-image-sourceborder-image-slice/border-image-width/border-image-outsetborder-image-repeat;盒子模型新增屬性【實(shí)例】圖片邊框的使用。素材圖片邊框圖片使用的效果border-image綜合屬性:border-image:url(img/bg.png)33%/100px/0pxrepeat;瀏覽器的兼容性的問題代碼如下修改-moz-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Chrome/safari*/-webkit-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Firefox*/注意：盒子模型新增屬性border-image綜合屬性:border-image:url(img/bg.png)33%/100px/0pxrepeat;瀏覽器的兼容性的問題代碼如下修改-moz-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Chrome/safari*/-webkit-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Firefox*/3.陰影效果box-shadowCSS中的box-shadow屬性可以實(shí)現(xiàn)陰影效果。語法：

box-shadow:水平陰影值垂直陰影值模糊距離值陰影大小值顏色陰影類型;語法中，水平陰影值表示元素水平陰影位置，可以為負(fù)值（必選屬性）；垂直陰影值表示元素垂直陰影位置，可以為負(fù)值（必選屬性）；模糊距離值表示陰影模糊半徑（可選屬性）；陰影大小值表示陰影擴(kuò)展半徑，不能為負(fù)值（可選屬性）；顏色表示陰影的顏色（可選屬性）；陰影類型主要包含內(nèi)陰影（inset）/外陰影（默認(rèn)）（可選屬性）。盒子模型新增屬性border-image綜合屬性:border-image:url(img/bg.png)33%/100px/0pxrepeat;瀏覽器的兼容性的問題代碼如下修改-moz-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Chrome/safari*/-webkit-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Firefox*/【實(shí)例】陰影效果box-shadow的使用。外陰影效果注意：box-shadow向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由2-4個(gè)長(zhǎng)度值、可選的顏色值以及可選的inset關(guān)鍵詞來規(guī)定。省略長(zhǎng)度的值是0。內(nèi)陰影效果盒子模型新增屬性border-image綜合屬性:border-image:url(img/bg.png)33%/100px/0pxrepeat;瀏覽器的兼容性的問題代碼如下修改-moz-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Chrome/safari*/-webkit-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Firefox*/4.

box-sizing屬性CSS中的盒子的實(shí)際寬等于width的值、左右內(nèi)邊距值、左右邊框?qū)捴?、左右外邊距值之和，高度也一樣。缺點(diǎn)：

這樣容易出現(xiàn)當(dāng)一個(gè)盒子的實(shí)際寬度確定之后，如果添加或者修改了邊框或內(nèi)邊距，從而影響盒子的實(shí)際寬度，為了不影響整體布局，通常會(huì)通過調(diào)整width屬性值，來保證盒子總寬度保持不變。box-sizing屬性用于定義盒子的寬度width和高度值height是否包含元素的內(nèi)邊距和邊框。語法：

box-sizing:content-box/border-box;名稱含義content-box寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。border-box為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內(nèi)邊距padding和邊框border都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。盒子模型新增屬性border-image綜合屬性:border-image:url(img/bg.png)33%/100px/0pxrepeat;瀏覽器的兼容性的問題代碼如下修改-moz-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Chrome/safari*/-webkit-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Firefox*/【實(shí)例】box-sizing屬性使用。box-sizing屬性頁面效果box1{width:500px;height:50px;margin:5px0;border:10pxsolid#4087D0;padding:050px;box-sizing:border-box;/*設(shè)置box-sizing為border-box*/}box1{width:500px;height:50px;margin:5px0;border:10pxsolid#4087D0;padding:050px;box-sizing:content-box;/*設(shè)置box-sizing為content-box*/}元素的浮動(dòng)元素的類型和轉(zhuǎn)換1.元素的類型HTML用于布局網(wǎng)頁頁面的元素主要分為塊級(jí)元素、行內(nèi)元素和行內(nèi)塊級(jí)元素。(1)塊級(jí)元素（block）塊狀元素在網(wǎng)頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區(qū)域。特點(diǎn)：

默認(rèn)情況下，塊狀元素都會(huì)占據(jù)一行，通俗地說，兩個(gè)相鄰塊狀元素不會(huì)出現(xiàn)并列顯示的現(xiàn)象；默認(rèn)情況下，塊狀元素會(huì)按順序自上而下排列。塊狀元素都可以定義自己的寬度和高度，還可以設(shè)置行高、邊距等。元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。常見的塊元素有<div>、<dl>、<dt>、<dd>、<ol>、<ul>、<fieldset>、<h1~h6>、<p>、<form>、<iframe>、<colgroup>、<table>、<tr>、<td>等，其中<div>標(biāo)簽是最典型的塊級(jí)元素，被廣泛的應(yīng)用到了頁面布局中。元素的類型和轉(zhuǎn)換1.元素的類型(2)行內(nèi)元素（inline）內(nèi)元素也稱內(nèi)聯(lián)元素，是始終一在行內(nèi)逐個(gè)進(jìn)行顯示，常用于控制頁面中文本的樣式。特點(diǎn)：

元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置。元素的寬度就是它包含的文字或圖片的寬度，不可改變。常見的行內(nèi)元素有<a>、<samp>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。其中<span>標(biāo)記是最典型的行內(nèi)元素。<span>與</span>之間只能包含文本和各種文本的修飾標(biāo)簽，如加粗標(biāo)記<strong>、傾斜標(biāo)記<em>等，<span>中還可以嵌套多層<span>。和其他元素都在一行上。元素的類型和轉(zhuǎn)換1.元素的類型(3)行內(nèi)塊級(jí)元素（inline-block）行內(nèi)塊級(jí)元素就是同時(shí)具備行內(nèi)元素、塊級(jí)元素的特點(diǎn)。本質(zhì)仍是行內(nèi)元素，但是可以設(shè)置width及height屬性。常見的行內(nèi)塊元素有<img>、<input>標(biāo)簽就是這種行內(nèi)塊級(jí)標(biāo)簽?！緦?shí)例6-8】元素的類型使用。元素的類型和轉(zhuǎn)換注意：行內(nèi)元素會(huì)在一條直線上排列，都是同一行的，水平方向排列。塊級(jí)元素各占據(jù)一行，垂直方向排列。塊級(jí)元素從新行開始結(jié)束接著一個(gè)斷行。塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素。行內(nèi)元素不能包含塊級(jí)元素。行內(nèi)元素與塊級(jí)元素屬性的不同，主要是盒模型屬性上。行內(nèi)元素設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。元素的類型和轉(zhuǎn)換2.元素的類型轉(zhuǎn)換盒子模型可通過display屬性來改變默認(rèn)的顯示類型。inline：此元素將顯示為行內(nèi)元素（行內(nèi)元素默認(rèn)的display屬性值）。block：此元素將顯示為塊元素（塊元素默認(rèn)的display屬性值）。nline-block：此元素將顯示為行內(nèi)塊元素，可以對(duì)其設(shè)置寬高和對(duì)齊等屬性，但是該元素不會(huì)獨(dú)占一行（行內(nèi)塊級(jí)元素的display屬性值）。語法：

display:inline|block|inline-block|none;none：此元素將被隱藏，不顯示，也不占用頁面空間，相當(dāng)于該元素不存在。元素的類型和轉(zhuǎn)換【實(shí)例】元素類型的轉(zhuǎn)換。元素默認(rèn)呈現(xiàn)效果元素的轉(zhuǎn)換效果塊元素與行內(nèi)元素的都轉(zhuǎn)換為行內(nèi)塊元素的效果浮動(dòng)屬性語法：

float:none|left|right;在CSS中，通過float屬性定義元素向哪個(gè)方向浮動(dòng)。應(yīng)用了浮動(dòng)后元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置。屬性值none表示元素不浮動(dòng)，默認(rèn)值。屬性值left表示元素向左浮動(dòng)屬性值right表示元素向右浮動(dòng)。浮動(dòng)屬性【實(shí)例】float浮動(dòng)屬性的使用。不設(shè)置浮動(dòng)時(shí)的頁面效果設(shè)置box1的左浮動(dòng)效果設(shè)置box2的左浮動(dòng)效果設(shè)置box2的右浮動(dòng)效果清除浮動(dòng)語法：

clear:left|right|both;在CSS中，清除浮動(dòng)屬性clear定義了元素的哪一側(cè)不允許出現(xiàn)浮動(dòng)元素。屬性值left表示不允許左側(cè)有浮動(dòng)元素屬性值right表示不允許右側(cè)有浮動(dòng)元素屬性值both同時(shí)清除左右兩側(cè)浮動(dòng)的影響。清除浮動(dòng)【實(shí)例】clear清除浮動(dòng)屬性的使用。不設(shè)置清除浮動(dòng)時(shí)的頁面效果清除box3元素的左浮動(dòng)后的效果清除box3元素的右浮動(dòng)后的效果元素的定位定位屬性語法：

position:static|relative|absolute|fixed;在CSS頁面布局時(shí)，通過position屬性定來設(shè)置元素的定位模式。static表示靜態(tài)定位，是默認(rèn)的定位方式；relative表示相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位；absolute表示絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位；fixed表示固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位。在CSS中主要通過top、right、bottom和left來精確定義定位元素的位置名稱含義top規(guī)定元素的頂部邊緣。定義元素相對(duì)于其父元素上邊線的距離right右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離bottom底部偏移量，定義元素相對(duì)于其父元素下邊線的距離left左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離發(fā)生重疊時(shí)，應(yīng)用z-index層疊等級(jí)屬性，其取可為正整數(shù)、負(fù)整數(shù)和0。定位屬性1.靜態(tài)定位static靜態(tài)定位static是元素的默認(rèn)定位方式，各個(gè)元素遵循HTML文檔流中默認(rèn)的位置。所以通常都省略在代碼中寫出來。注意：在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、right、bottom和left）來改變

元素的位置?！緦?shí)例】靜態(tài)定位static的使用。static靜態(tài)定位的頁面效果定位屬性2.相對(duì)定位relative相對(duì)定位表示他相對(duì)的參照物就是他在static狀態(tài)下的位置，即默認(rèn)的位置，通過top、right、bottom和left屬性來控制他們的位置。#box2{

background-color:#eafc8f;

position:relative;/*設(shè)置相對(duì)定位*/

left:25px;

top:25px;}【實(shí)例】相對(duì)定位relative的使用。定位屬性3.絕對(duì)定位absolute當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。。與relative相比，它的特點(diǎn)在于當(dāng)對(duì)象發(fā)生位移時(shí)，原先初始位置的內(nèi)容如同被去除了一樣，這個(gè)對(duì)象對(duì)立與其他頁面內(nèi)容，而初始位置的空白被其他內(nèi)容自然填補(bǔ)。#box2{

background-color:#eafc8f;position:absolute;/*設(shè)置絕對(duì)定位*/left:25px;top:25px;}【實(shí)例】絕對(duì)定位absolute的使用。定位屬性絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。當(dāng)區(qū)域2的父元素section的定位方式發(fā)生變化時(shí)，區(qū)塊2的位置也會(huì)發(fā)生變化。section{ border:1pxsolidred; background-color:#EEEEEE;

position:relative;/*設(shè)置相對(duì)定位*/

top:50px;/*設(shè)置距離body邊框頂部邊線50px*/ }注意：定位屬性4.固定定位fixed固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)頁面長(zhǎng)度超出瀏覽器窗口時(shí)，頁面會(huì)出現(xiàn)滾動(dòng)條，絕對(duì)定位下的元素會(huì)隨著頁面一起移動(dòng)，而固定定位下的頁面元素不會(huì)隨著頁面滾動(dòng)，會(huì)始終顯示在瀏覽器窗口的固定位置。例如:

position:fixed;/*設(shè)置絕對(duì)定位*/

bottom:0px;/*設(shè)置距離父元素左邊線0px*/

right:25px;/*設(shè)置距離父元素右部邊線25px*/溢出屬性語法：

overflow:visible|hidden|auto|scroll;在CSS中，overflow屬性主要應(yīng)用在當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容就會(huì)溢出，如果想要規(guī)范溢出內(nèi)容的顯示方式，就需要使用overflow屬性。屬性值visible為默認(rèn)值，表示內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外；hidden表示溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見的；auto表示在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容；scroll表示溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條。溢出屬性【實(shí)例】overflow屬性的使用。溢出屬性【實(shí)例】overflow屬性的使用。溢出屬性【實(shí)例】overflow屬性的使用。溢出屬性【實(shí)例】overflow屬性的使用。多列布局認(rèn)識(shí)多列布局基本語法:column-width設(shè)置對(duì)象每列的寬度column-count設(shè)置對(duì)象的列數(shù)columns是多列布局特性的基本屬性，該屬性可以同時(shí)定義每列的寬度和列數(shù)。columns：column-width|column-count;作用：columns適合應(yīng)用在網(wǎng)頁中需要顯示大量文本時(shí)，建議分列，方便閱讀。認(rèn)識(shí)多列布局column-widthcolumn-count圖片來源于網(wǎng)絡(luò)，僅用于教學(xué)認(rèn)識(shí)多列布局.test1{

width:660px;

border:1pxsolid#333333;