完美世界txt下载,小说排行榜

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

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

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

2、基本盒模型

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

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

3、邊距

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

4、補(bǔ)白

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

5、邊框

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

常用邊框樣式

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

頁(yè)面元素布局

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

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

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

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

塊級(jí)元素	行內(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)以上這些元素單獨(dú)出現(xiàn)在XHTML頁(yè)面時(shí)，它們會(huì)按照自己本身的語(yǔ)義表現(xiàn)樣式。

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

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

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

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

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

css布局方式-浮動(dòng)

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

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

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

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

在頁(yè)面布局中，很多時(shí)候會(huì)使用來(lái)年兩個(gè)元素的浮動(dòng)應(yīng)用。例如，頁(yè)面為兩欄的結(jié)構(gòu)，圖文混排都應(yīng)用了兩個(gè)元素的浮動(dò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 >兩個(gè)元素的浮動(dòng)應(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è)置父元素的邊框?yàn)?像素黑色實(shí)線，邊距為四周10像素*/?

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

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

< / style >?

< / head >?

< body >?

< div class="father" >?

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

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

< / div >?

< / body >?

< / html >

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

在頁(yè)面布局中，多個(gè)元素的浮動(dòng)常用于相冊(cè)、列表排版等。

< !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 >三個(gè)元素的浮動(dòng)應(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è)置父元素的邊框?yàn)?像素黑色實(shí)線，四周邊距10像素*/?

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

< / style >?

< / head >?

< body >?

< div class="father" >?

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

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

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

< /div >?

< /body >?

< /html >

3、清除浮動(dòng)

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

css布局方式-相對(duì)定位

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

1、單個(gè)元素的相對(duì)定位

使用相對(duì)定位，就是子元素相對(duì)于自身偏移的位置。要確定子元素相對(duì)于自身偏移了多少，就要使用top、bottom、left、right屬性來(lái)確定。這四個(gè)屬性能使用長(zhǎng)度單位或者關(guān)鍵字auto設(shè)置。例如，設(shè)定子元素的position屬性為relative，然后設(shè)置top為10像素，那么子元素就會(huì)相對(duì)于自身的頂部邊界下移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>單個(gè)元素的相對(duì)定位< /title >?

< style >?

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

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

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

< /style >?

< /head >?

< body >?

< div class="father" >?

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

< /div >?

< /body >?

< /html >

2、兩個(gè)元素的相對(duì)定位

當(dāng)子元素增加到兩個(gè)的時(shí)候，使用相對(duì)定位的情況就變得較為復(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 >兩個(gè)元素的相對(duì)定位< /title >?

< style >?

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

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

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

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

< /style >?

< / head >?

< body >?

< div class="father" >?

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

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

< /div >?

< /body >?

< / html >

css布局方式-絕對(duì)定位

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

1、單個(gè)元素的絕對(duì)定位

使用絕對(duì)定位同樣有top、bottom、left、right四個(gè)用于移動(dò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 >單個(gè)元素的絕對(duì)定位< / title >?

< style >?

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

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

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

< / style >?

< /head >?

< body >?

< div class="father" >?

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

< /div >?

< /body >?

< /html >

2、兩個(gè)元素的絕對(duì)定位

當(dāng)子元素增加到兩個(gè)的時(shí)候，使用絕對(duì)定位的情況就變得較為復(fù)雜。使用絕對(duì)定位的元素會(huì)脫離原來(lái)的常規(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 >兩個(gè)元素的絕對(duì)定位< / title >?

< style >?

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

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

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

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

< / style >

< body >?

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

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

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

< /body >?

< /html >