好看的小说完本推荐,听中国有声小说

盒模型是div+css布局的基礎(chǔ)，要實現(xiàn)div+css布局必須了解盒模型的原理。頁面上的每個元素都能看做是一個容器。這個容器就是一個盒子。例如，p標(biāo)簽是一個能裝文字的容器，它的高度就是所承載文字的高度。使用div+css布局，div標(biāo)簽就是布局中所用到的容器。大部分人認(rèn)為只有div標(biāo)簽?zāi)茏鳛槿萜鞯陌才挪季?。其實不然，在XHTML頁面中幾乎所用的標(biāo)簽都能被當(dāng)做容器使用。頁面上的每個容器均占用一定的位置。有一定的大小，都會影響其他容器的排布，它們互相作用，從而形成一個頁面的布局。

1、div標(biāo)簽的盒模型舉例

在XHTML中插入一對div標(biāo)簽，運行后在不同瀏覽器顯示的效果不同，因為瀏覽器所設(shè)置的margin和padding的初始值不同。所以在設(shè)置頁面時，建議把頁面的整體邊距和補白設(shè)置初始值為0。

2、基本盒模型

下圖為基本盒模型，在頁面中的所有元素都遵循該模型的設(shè)置方式。

給一個元素設(shè)置了高度和寬度后，它就在頁面中占有這樣的高度和寬度。css提供的width屬性用于設(shè)置元素的寬度。

3、邊距

邊距用于設(shè)置頁面元素與其他元素的距離。Css的margin屬性就是用于設(shè)置邊距的。其語法：Margin:length
其中l(wèi)ength的值可以用長度單位定義，也可以用百分比定義，還可以使用關(guān)鍵字auto定義。margin屬性的值可以有四種表示方法。但無論使用哪種方法設(shè)置margin值都能設(shè)置元素四周的邊距。
設(shè)置四個值： Margin：10px 20px 30px 40px;分別是：上邊距、右邊距、下邊距、左邊距。
設(shè)置三個值： Margin：10px 20px 30px；分別是：上邊距、左右邊距、下邊距。
設(shè)置兩個值： Margin：10px 20px；分別是：上下邊距、左右邊距。
設(shè)置一個值： Margin：10px，當(dāng)要設(shè)置的上下左右邊距一致時，就應(yīng)使用設(shè)置一個值的方法。對于border和padding兩個屬性的值也有與上述一樣的縮寫方法。
單邊距值：若要設(shè)置一個元素的上邊距為10像素，其他邊距都為0像素，可以應(yīng)用以下方法：margin：10px 0 0；每個邊距都有對應(yīng)的css屬性，可以單獨設(shè)置某個邊距的屬性，設(shè)置單邊的屬性為margin-top,margin-bottom,margin-left,margin-right.對于border和padding也有單獨設(shè)置某一邊的屬性。
邊距重疊：對垂直排列的塊級元素應(yīng)用了邊距后，可能會發(fā)生邊距重疊的現(xiàn)象。

4、補白

補白用于增加頁面元素與內(nèi)容之間的空間。Css的padding屬性是用于設(shè)置補白的。
Paddin：length
其中l(wèi)ength的值可以用長度單位定義，也可以使用百分比定義，還可以使用關(guān)鍵字auto定義。
使用長度單位設(shè)定paddng值。
使用長度單位設(shè)定頁面元素的padding值，常使用像素或者em

5、邊框

邊框是頁面元素可視范圍的最外圈。邊框包含的范圍包括頁面元素的補白和內(nèi)容。Css提供了設(shè)置邊框的屬性。
border-width:設(shè)置邊框?qū)挾?br>css提供的border-width屬性用于改變邊框的寬度，其語法：border-width：width
其中width值可以使用長度單位和關(guān)鍵字進(jìn)行設(shè)置。通常使用px或者em作為長度單位。而關(guān)鍵字thin、medium、和thick。在設(shè)置邊框?qū)挾戎埃仨毾戎付ㄟ吙虻臉邮健?br>border-color:設(shè)置邊框顏色
css提供的border-color屬性用于改變邊框的顏色，其語法：border-color：color，其中color值與其他設(shè)置顏色的方法是一樣的。border-color是border-top,border-bottom,border-left,border-right的縮寫。分別是設(shè)置四周的邊框樣式。border-color所縮寫的順序也是順時針，與設(shè)置邊距補白一樣。
border-style:設(shè)置邊框樣式

常用邊框樣式

屬性值	樣式
none	無邊框
hidden	隱藏邊框
dotted	點線
dashed	虛線
solid	實線邊框
double	雙線邊框，兩條單線與其間隔的和等于指定的border-width值
groove	根據(jù)border-color的值畫3D凹槽
ridge	根據(jù)border-color的值畫菱形邊框
inset	根據(jù)border-color的值畫3D凸邊
outset	根據(jù)border-color的值畫3D凹邊

在了解基本盒模型后，就要開始進(jìn)入頁面元素布局的學(xué)習(xí)，細(xì)心理解每個示例能夠深入了解頁面元素布局的基本原則。頁面元素布局的核心是定位和浮動的基本原理以及塊級元素與行內(nèi)元素的區(qū)別。

1、塊級元素與行內(nèi)元素

所有的XHTML頁面元素只有兩種，一是塊級元素，二是行內(nèi)元素。

常用塊級元素和行內(nèi)元素

塊級元素	行內(nèi)元素
blockquote	a
dir	b
div	span
fieldset	cite
form	em
H1-h6	i
hr	img
dl	input
ol	label
ul	select
p	br
pre	strong
?	textarea

當(dāng)以上這些元素單獨出現(xiàn)在XHTML頁面時，它們會按照自己本身的語義表現(xiàn)樣式。

塊級元素和行內(nèi)元素的區(qū)別

?	排列方式	可控屬性	寬度
塊級元素	垂直排列	高度、行高以及上下邊距都可控制。	其寬度默認(rèn)情況下與其父級元素寬度一致?？梢栽O(shè)置width屬性改變其寬度。
行內(nèi)元素	水平排列	高度及上下邊距都不可控制。	寬度就是其包含的文字或者圖片的寬度，設(shè)置width屬性不生效。

塊級元素一般用作其他頁面元素的容器，塊元素一般都從新行開始，它可以容納行內(nèi)元素和塊元素。Form標(biāo)簽這一塊級元素比較特殊，它只能用來容納其他塊級元素。行內(nèi)元素只能容納文本或者其他行內(nèi)元素。使用css的display屬性能使塊級元素和行內(nèi)元素互相轉(zhuǎn)換。Display屬性中的block和inline，分別代表塊級元素和行內(nèi)元素。

2、css布局方式-常規(guī)流

css有三種基本的布局方式，分別是常規(guī)流、浮動和定位。常規(guī)流（normal flow）是指頁面元素按照所在XHTML文檔的位置排列的布局方式。在沒有添加其他方面布局方式的情況下，頁面遵循常規(guī)流的布局方式。

css布局方式-浮動

使用浮動布局是目前網(wǎng)頁制作中最為常用的方式。應(yīng)用了浮動的元素全部都會成為塊元素，并且脫離原來的常規(guī)流模式。應(yīng)用了浮動的元素可以向頁面的左邊或者右邊移動。直到其邊緣接觸到其父元素的邊框或者另外一個浮動元素的邊框。

css提供的float屬性用于設(shè)置元素的浮動，它包含三個值，分別是left（左）、right（右）、none（無）。

使用浮動布局是比較復(fù)雜的，影響浮動的布局因素很多。例如，一個父元素中有三個div標(biāo)簽，若對其中一個div標(biāo)簽應(yīng)用浮動，在不同瀏覽器中的結(jié)果表現(xiàn)不同，若對兩個或者三個div標(biāo)簽應(yīng)用浮動，產(chǎn)生結(jié)果也不相同，若對父元素應(yīng)用浮動，子元素的浮動效果也會不同。

1、兩個元素的浮動應(yīng)用

在頁面布局中，很多時候會使用來年兩個元素的浮動應(yīng)用。例如，頁面為兩欄的結(jié)構(gòu)，圖文混排都應(yīng)用了兩個元素的浮動。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >兩個元素的浮動應(yīng)用< / title >?

< style > *{ margin:0; padding:0; font-size:14px; }?

div.father{ width:300px; height:300px; /*設(shè)置父元素的高度和寬度都為300像素*/ border:1px solid black; margin:10px;}/*設(shè)置父元素的邊框為1像素黑色實線，邊距為四周10像素*/?

div.one{ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度都為100像素*/ background-color:#999;/*設(shè)置第一個div標(biāo)簽的背景色為灰色*/ float:left; margin:10px;}/*設(shè)置第一個div標(biāo)簽為左浮動，四周邊距為10像素*/?

div.two{ width:100px; height:100px;/*設(shè)置第二個div標(biāo)簽的高度和寬度為100像素*/ background-color:#999; /*設(shè)置第二個div標(biāo)簽的背景色為淺灰色*/ float:left; margin:10px;}/*設(shè)置第二個div標(biāo)簽為左浮動，四周邊距為10像素*/?

< / style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標(biāo)簽< / div >?

< div class="two" >第二個div標(biāo)簽< / div >?

< / div >?

< / body >?

< / html >

2、多個元素的浮動應(yīng)用

在頁面布局中，多個元素的浮動常用于相冊、列表排版等。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >三個元素的浮動應(yīng)用< / title >?

< style >?

?*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度都為300像素*/ border:1px solid #000; margin:10px;}/*設(shè)置父元素的邊框為1像素黑色實線，四周邊距10像素*/?

div.one,div.two,div.three{ background-color:#ccc;/*設(shè)置三個div標(biāo)簽的背景色為淺灰色*/ float:left;/*設(shè)置三個div標(biāo)簽為左浮動*/ width:100px; height:100px;/*設(shè)置三個div標(biāo)簽高度和寬度都為100像素*/ margin:10px;/*設(shè)置三個div標(biāo)簽四周邊距10像素*/ display:inline;}/*設(shè)置三個div標(biāo)簽的顯示屬性為inline*/?

< / style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標(biāo)簽< /div >?

< div class="two" >第二個div標(biāo)簽< /div >?

< div class="three" >第三個div標(biāo)簽< /div >?

< /div >?

< /body >?

< /html >

3、清除浮動

使用浮動后，常產(chǎn)生很多意外的結(jié)果，因為浮動的元素會脫離原來的常規(guī)流。浮動元素可能會覆蓋一些非浮動的元素，這是需要使用css的clear屬性來清除浮動。Clear屬性有四個值，分別是none、left、right、both。
None：允許兩邊都可以有浮動對象
Both：不允許有浮動對象
Left：不允許左邊有浮動對象
Right：不允許右邊有浮動對象

css布局方式-相對定位

除了使用浮動布局外，常用的布局方式還有定位。Css提供了position屬性用于定位。使用position定位可以定義元素相對其父元素或者其他元素的精確位置。position屬性共有四個關(guān)鍵字值。分別是static、absolute、relative和fixed。其中static為默認(rèn)值，表示塊保持在原來的位置上。absolute代表絕對定位，relative代表相對定位，這兩種定位方式是最常用的。

1、單個元素的相對定位

使用相對定位，就是子元素相對于自身偏移的位置。要確定子元素相對于自身偏移了多少，就要使用top、bottom、left、right屬性來確定。這四個屬性能使用長度單位或者關(guān)鍵字auto設(shè)置。例如，設(shè)定子元素的position屬性為relative，然后設(shè)置top為10像素，那么子元素就會相對于自身的頂部邊界下移10像素。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head>?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title>單個元素的相對定位< /title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度都是300像素*/ border:1px solid #000;/*設(shè)置父元素的邊框1像素黑色實線*/ margin:10px;}/*設(shè)置父元素四周邊距為10像素*/?

div.one{ background-color:#666;/*設(shè)置第一個div標(biāo)簽的背景色為淺灰色*/ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度都為100像素*/ position:relative;/*設(shè)置第一個div標(biāo)簽為相對定位*/ top:10px;}/*設(shè)置第一個div標(biāo)簽從上往下偏移10像素*/?

< /style >?

< /head >?

< body >?

< div class="father" >?

< div class="one" >< /div >?

< /div >?

< /body >?

< /html >

2、兩個元素的相對定位

當(dāng)子元素增加到兩個的時候，使用相對定位的情況就變得較為復(fù)雜。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >兩個元素的相對定位< /title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度為300像素*/ border:1px solid #000;/*設(shè)置父元素的邊框為1像素黑色實線*/ margin:10px;}/*社會組父元素四周邊距為10像素*/?

div.one{ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度為100像素*/ position:relative;/*設(shè)置第一個div標(biāo)簽為相對定位*/ top:10px;}/*設(shè)置第一個div標(biāo)簽從上往下偏移10像素*/?

div.two{ background-color:#999;/*設(shè)置第二個標(biāo)簽背景色為淺灰色*/ width:100px; height:100px}/*設(shè)置第二個div標(biāo)簽高度和寬度都是100像素*/?

< /style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標(biāo)簽< /div >?

< div class="two" >第二個div標(biāo)簽< /div >?

< /div >?

< /body >?

< / html >

css布局方式-絕對定位

使用絕對定位的子元素，其移動是相對于已經(jīng)定位的父級元素。若其父元素并未定位，那么使用絕對定位的子元素就會相對最初的包含塊來定位。通常這個最初的包含快是html標(biāo)簽。

1、單個元素的絕對定位

使用絕對定位同樣有top、bottom、left、right四個用于移動的屬性。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >單個元素的絕對定位< / title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度都是300像素*/ border:1px solid #000;/*設(shè)置父元素的邊框為1像素黑色實線*/ margin:10px;}/*設(shè)置父元素四周邊距為10像素*/?

div.one{ background-color:#333; /*設(shè)置第一個div標(biāo)簽的背景色為灰色*/ width:100px; height:300px;/*設(shè)置第一個div標(biāo)簽的高度和寬度都是100像素*/ position:absolute;/*設(shè)置第一個div標(biāo)簽為絕對定位*/ top:10px;}/*設(shè)置第一個div標(biāo)簽從上往下偏移5像素*/?

< / style >?

< /head >?

< body >?

< div class="father" >?

< div class="one" >< /div >?

< /div >?

< /body >?

< /html >

2、兩個元素的絕對定位

當(dāng)子元素增加到兩個的時候，使用絕對定位的情況就變得較為復(fù)雜。使用絕對定位的元素會脫離原來的常規(guī)流，位置停留在父元素的左上角。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >兩個元素的絕對定位< / title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div .father { width:300px; height:340px; /*設(shè)置父級元素的高度和寬度都為300像素*/ border:1px solid #000;/*設(shè)置父級元素的邊框為1像素黑色實線*/ margin:10px;/*設(shè)置父元素四周邊距為10像素*/ position:relative/*設(shè)置父元素為相對定位*/ }?

div.one{ background-color:#ccc;/*設(shè)置第一個div標(biāo)簽的背景色為淺灰色*/ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度為100像素*/ position:absolute;/*設(shè)置第一個div標(biāo)簽為絕對定位*/ }?

div.two{ background-color:#999999; /*設(shè)置第二個div標(biāo)簽的背景色為淺灰色*/ width:100px; height:100px;/*設(shè)置第二個div標(biāo)簽的高度和寬度都是100像素*/ position:absolute;}/*設(shè)置第二個div標(biāo)簽為絕對定位*/?

< / style >

< body >?

< div class="father" >< /div >?

< div class="one" >< /div >?

< div class="two" >< /div >?

< /body >?

< /html >