Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第六單元 層與區(qū)塊的頁(yè)面布局

Web前端開(kāi)發(fā)技術(shù)第六單元層與區(qū)塊的頁(yè)面布局掌握層的創(chuàng)建，掌握盒子模型，能夠使用層進(jìn)行頁(yè)面布局層的控制，層定位，層和盒子模型的應(yīng)用6.1CSS布局基礎(chǔ)6.2創(chuàng)建層6.3盒子模型6.4邊框?qū)傩?.8清除浮動(dòng)6.9元素定位6.5填充屬性6.7元素浮動(dòng)6.6邊距屬性

CSS布局基礎(chǔ)16.1.1文檔流的概念

文檔流又稱(chēng)標(biāo)準(zhǔn)文檔流(NormalFlow)，

是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。按照網(wǎng)頁(yè)文檔上的代碼出現(xiàn)的位置從上到下，從左到右進(jìn)行顯示，這也是瀏覽器解析網(wǎng)頁(yè)文檔默認(rèn)的方式。<div>標(biāo)記它默認(rèn)占用一整行，<p>標(biāo)記默認(rèn)占用寬度也是一整行，按照標(biāo)記出現(xiàn)的先后次序從上到下來(lái)顯示，而<img>標(biāo)記可以在同一行上出現(xiàn)多個(gè)，從左到右依次顯示，直到最后一個(gè)元素的右邊沒(méi)有足夠的空間容納下一個(gè)元素。網(wǎng)頁(yè)中大部分元素默認(rèn)是占用文檔流，也有一些是不占文檔流的，比如表單中隱藏域。在本單元還會(huì)詳細(xì)介紹設(shè)置元素的浮動(dòng)屬性和定位方式來(lái)使網(wǎng)頁(yè)元素脫離文檔流。在文檔流中不同的網(wǎng)頁(yè)元素所表現(xiàn)出來(lái)的特性也有不同，如<p>元素獨(dú)占一行，而<img>元素一行上可顯示多個(gè)，因此，可將網(wǎng)頁(yè)元素分為頂級(jí)元素、塊級(jí)元素和行內(nèi)元素。6.1.2塊級(jí)元素與行內(nèi)元素

頂級(jí)元素：

頂級(jí)元素(top-level)包括html標(biāo)記，body標(biāo)記，frameset標(biāo)記，表現(xiàn)如塊級(jí)元素。塊級(jí)元素：

塊級(jí)元素(blockelement)一般是其他元素的容器元素，能容納其他塊元素或行內(nèi)元素。最常見(jiàn)的就是p和div這兩個(gè)，說(shuō)的簡(jiǎn)單點(diǎn)，塊級(jí)元素就好比一個(gè)方盒子，還可以放其他的盒子。默認(rèn)情況下塊級(jí)元素，是獨(dú)占一行的。常見(jiàn)的塊級(jí)元素有<div>，<h1>…<h6>，<p>，<ul>，<ol>，<li>，<table><tr><td>，<form>等。6.1.2塊級(jí)元素與行內(nèi)元素行內(nèi)元素：

行內(nèi)元素(inlineelement)也叫內(nèi)聯(lián)元素，行內(nèi)元素只能容納文本或者其他行內(nèi)元素，它允許其他行內(nèi)元素與其位于同一行，但寬度(width)高度(height)不起作用。常見(jiàn)行內(nèi)元素為<span>，<a>，<img>等。

例如：可以給div或p應(yīng)用下面樣式，但是a標(biāo)簽卻無(wú)法應(yīng)用下面的樣式。

但是，可以通過(guò)樣式display屬性來(lái)改變?cè)氐娘@示方式。當(dāng)display的值設(shè)為block時(shí)，元素將以塊級(jí)方式呈現(xiàn)；當(dāng)display值設(shè)為inline時(shí)，元素將以行內(nèi)形式呈現(xiàn)。所以可以給a標(biāo)簽應(yīng)用以下樣式：創(chuàng)建層26.2創(chuàng)建層整個(gè)網(wǎng)頁(yè)文檔內(nèi)容需要進(jìn)行分區(qū)，把文檔分割為獨(dú)立的、不同的部分。<div>標(biāo)記可定義文檔中的分區(qū)或節(jié)（division/section），它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。<div>是一個(gè)塊級(jí)元素，這意味著它的內(nèi)容自動(dòng)地在新行上開(kāi)始。實(shí)際上，換行是<div>固有的唯一格式表現(xiàn)。可以通過(guò)<div>的class或id屬性應(yīng)用額外的樣式?？梢詫?duì)同一個(gè)<div>元素應(yīng)用class或id屬性，但是更常見(jiàn)的情況是只應(yīng)用其中一種。創(chuàng)建層的基本語(yǔ)法：語(yǔ)法說(shuō)明：<div>標(biāo)記為雙標(biāo)記，標(biāo)記中可以嵌套表示用于顯示的HTML標(biāo)記盒子模型36.3盒子模型

盒子模型是CSS的核心知識(shí)點(diǎn)之一，它指定元素如何顯示以及相

互的影響。頁(yè)面上的每個(gè)元素都被看成一個(gè)矩形盒子，這個(gè)盒子由內(nèi)容(content)、填充(padding)、邊框(border)、邊距(margin)這4個(gè)要素組成。

如圖所示6.3盒子模型

我們以照片墻為例，照片（content）周?chē)锌瞻祝╬adding）存在，使得照片可以不緊貼照片框（border），空白延伸到照片框，每幅照片之間還有間隔（margin），如下圖所示。網(wǎng)頁(yè)元素是這里的照片，設(shè)置網(wǎng)頁(yè)元素的填充可以在內(nèi)容周?chē)鷦?chuàng)建一個(gè)隔離帶，使內(nèi)容不與邊框連接在一起。如果給網(wǎng)頁(yè)元素設(shè)置背景，那么背景應(yīng)用于元素的內(nèi)容和填充組成的區(qū)域。網(wǎng)頁(yè)元素可以設(shè)置邊框樣式、寬度和顏色。外邊距是透明的，一般使用它控制元素之間的間隔。填充(padding)、邊框(border)、邊距(margin)盒子模型中的3個(gè)要素在上（top）、右（right）、下（bottom）、左（left）這4個(gè)方向上可以分別進(jìn)行設(shè)置，也可以同時(shí)進(jìn)行設(shè)置。6.3盒子模型

盒子模型在瀏覽器不同模式下的解釋有所不同，在瀏覽器標(biāo)準(zhǔn)模式與混雜模式下網(wǎng)頁(yè)元素的實(shí)際寬度(width)和實(shí)際高度(height)的計(jì)算就所有不同，公式如下表混雜模式下元素的實(shí)際寬度和高度就是width和height屬性設(shè)置的值。邊框?qū)傩?6.4邊框?qū)傩跃W(wǎng)頁(yè)元素分別有上、右、下、左四條邊框，每一條邊框上的樣式（style）、寬度（width）和顏色（color）有對(duì)應(yīng)的CSS屬性進(jìn)行設(shè)置，也可以在組合屬性中同時(shí)設(shè)置。如下圖所示。6.4邊框?qū)傩宰ⅲ喝魏蔚陌姹镜腎nternetExplorer（包括IE8）都不支持屬性值"inherit"或"hidden"6.4邊框?qū)傩詐{

border-top-style:double;border-top-width:2px;border-top-color:#FF0000;}p{border-top:double2px#FF0000;}實(shí)例6-1：設(shè)置段落文字的上邊框?yàn)殡p實(shí)線(xiàn)、寬度為2像素，顏色為紅色。第一種方案：第二種方案：第二種方案中使用的border-top屬性是一個(gè)組合屬性，該屬性是可以同時(shí)設(shè)置樣式、寬度和顏色，分別用3個(gè)值代表3個(gè)分量上的設(shè)置。其中，樣式:double，寬度2px，顏色#FF0000，值與值之間用空格分隔。其他組合屬性設(shè)置如表6-3所示。我們將通過(guò)實(shí)例6-2，3，4進(jìn)行說(shuō)明。6.4邊框?qū)傩詃iv{border-style:solid;

height:80px;}實(shí)例6-2：使用組合屬性設(shè)置div元素的四條邊框樣式為實(shí)線(xiàn)。6.4邊框?qū)傩詫?shí)例6-3：使用組合屬性設(shè)置div元素的上邊框樣式為實(shí)線(xiàn)，右邊框?yàn)樘摼€(xiàn)，下邊框?yàn)?/p>

雙實(shí)線(xiàn)，左邊框?yàn)辄c(diǎn)線(xiàn)。div{border-style:soliddasheddoubledotted;

height:80px;}p{border:solid1px#0000FF;height:80px;}實(shí)例6-4：使用組合屬性設(shè)置段落文字的四條邊框?yàn)閷?shí)線(xiàn)，寬度為1像素，藍(lán)色。

邊框border-width和border-color這兩個(gè)組合屬性的用法與border-style相似。填充屬性56.5填充屬性設(shè)置內(nèi)容樣式屬性說(shuō)明上內(nèi)邊距padding-top長(zhǎng)度|百分比，其中，百分比是相對(duì)于上級(jí)元素寬度width的百分比，隨著上級(jí)元素width的變化而變化，和高度height無(wú)關(guān)。右內(nèi)邊距padding-right下內(nèi)邊距padding-bottom左內(nèi)邊距padding-left內(nèi)邊距padding取1~4個(gè)值?？蓞⒖糱order-style設(shè)置。填充（padding）也稱(chēng)為內(nèi)邊距，在盒子模型中用于調(diào)整元素內(nèi)容到邊框的距離。設(shè)置填充的CSS屬性如表所示。6.5填充屬性實(shí)例6-5第一段落使用雙實(shí)線(xiàn)樣式，第二個(gè)段落設(shè)置了四個(gè)方向上的填充除了使用組合屬性padding進(jìn)行設(shè)置外，還可以在4個(gè)方向上分開(kāi)設(shè)置，示例代碼如下所示。.b2{border:8pxsolidred;padding-top:35px; padding-right:10px; padding-bottom:15px; padding-left:25px;}邊距屬性66.6邊距屬性邊距（margin）也稱(chēng)為外邊距，邊距用于網(wǎng)頁(yè)元素周?chē)深~外的空白區(qū)?！翱瞻讌^(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見(jiàn)的區(qū)域。如果把網(wǎng)頁(yè)元素看成是一個(gè)個(gè)盒子，盒子與盒子之間的距離通過(guò)設(shè)置邊距進(jìn)行控制。設(shè)置邊距的CSS屬性如表6-5所示。6.6邊距屬性實(shí)例6-6：設(shè)置圖片和div層這兩種元素的邊距。實(shí)例6-6網(wǎng)頁(yè)效果為了方便地控制網(wǎng)頁(yè)元素，一般情況下，會(huì)清除網(wǎng)頁(yè)元素的內(nèi)外邊距，代碼如右body{padding:0px;margin：0px;}元素浮動(dòng)76.7元素浮動(dòng)浮動(dòng)屬性（float）是CSS中頻繁用于網(wǎng)頁(yè)布局的屬性，該屬性的取值如表6-6所示6.7元素浮動(dòng)塊級(jí)元素的默認(rèn)排列方式如下圖所示，每個(gè)元素獨(dú)占一行，新的元素在新的一行上開(kāi)始。在使用div層進(jìn)行三欄式的頁(yè)面布局時(shí)，需要設(shè)置div元素的float屬性，使層浮動(dòng)起來(lái)，同在一行上顯示多個(gè)。選擇器{float:left;}/*元素向左浮動(dòng)*/選擇器{float:right;}/*元素向右浮動(dòng)*/網(wǎng)頁(yè)元素在使用了float屬性之后，會(huì)脫離標(biāo)準(zhǔn)文檔流，此時(shí)塊級(jí)元素會(huì)有明顯的變化，表現(xiàn)出類(lèi)似于行內(nèi)元素的特征，默認(rèn)元素的大小變成自適應(yīng)元素內(nèi)容的大小，能在一行上顯示多個(gè)元素，只要余下的空間能容納下一個(gè)元素，但跟行內(nèi)元素相區(qū)別的是仍可以使用“width”和“height”屬性自定義元素大小。清除浮動(dòng)86.8清除浮動(dòng)清除屬性clear規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。該屬性的取值如表6-8所示。6.8清除浮動(dòng)實(shí)例6-11：給<div>層設(shè)置float屬性，使得三個(gè)層顯示在同一行上在所有子元素的后面添加一個(gè)層<div></div>，設(shè)置該元素的CSS屬性“clear:both”，可以將非浮動(dòng)父元素的下邊框顯示在浮動(dòng)子元素下方。元素定位96.9元素定位positon屬性用于網(wǎng)頁(yè)元素定位，相對(duì)于float屬性更加靈活。該屬性的取值如表所示。值描述absolute生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20"會(huì)向元素的LEFT位置添加20像素。static默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,