黄色a级在线观看,久久青草福利免费资源网站,欧美级毛片

盒模型是div+css布局的基礎，要實現div+css布局必須了解盒模型的原理。頁面上的每個元素都能看做是一個容器。這個容器就是一個盒子。例如，p標簽是一個能裝文字的容器，它的高度就是所承載文字的高度。使用div+css布局，div標簽就是布局中所用到的容器。大部分人認為只有div標簽能作為容器的安排布局。其實不然，在XHTML頁面中幾乎所用的標簽都能被當做容器使用。頁面上的每個容器均占用一定的位置。有一定的大小，都會影響其他容器的排布，它們互相作用，從而形成一個頁面的布局。

1、div標簽的盒模型舉例

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

2、基本盒模型

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

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

3、邊距

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

4、補白

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

5、邊框

邊框是頁面元素可視范圍的最外圈。邊框包含的范圍包括頁面元素的補白和內容。Css提供了設置邊框的屬性。
border-width:設置邊框寬度
css提供的border-width屬性用于改變邊框的寬度，其語法：border-width：width
其中width值可以使用長度單位和關鍵字進行設置。通常使用px或者em作為長度單位。而關鍵字thin、medium、和thick。在設置邊框寬度之前，必須先指定邊框的樣式。
border-color:設置邊框顏色
css提供的border-color屬性用于改變邊框的顏色，其語法：border-color：color，其中color值與其他設置顏色的方法是一樣的。border-color是border-top,border-bottom,border-left,border-right的縮寫。分別是設置四周的邊框樣式。border-color所縮寫的順序也是順時針，與設置邊距補白一樣。
border-style:設置邊框樣式

常用邊框樣式

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

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

1、塊級元素與行內元素

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

常用塊級元素和行內元素

塊級元素	行內元素
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

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

塊級元素和行內元素的區別

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

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

2、css布局方式-常規流

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

css布局方式-浮動

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

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

使用浮動布局是比較復雜的，影響浮動的布局因素很多。例如，一個父元素中有三個div標簽，若對其中一個div標簽應用浮動，在不同瀏覽器中的結果表現不同，若對兩個或者三個div標簽應用浮動，產生結果也不相同，若對父元素應用浮動，子元素的浮動效果也會不同。

1、兩個元素的浮動應用

在頁面布局中，很多時候會使用來年兩個元素的浮動應用。例如，頁面為兩欄的結構，圖文混排都應用了兩個元素的浮動。

< !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; /*設置父元素的高度和寬度都為300像素*/ border:1px solid black; margin:10px;}/*設置父元素的邊框為1像素黑色實線，邊距為四周10像素*/?

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

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

< / style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標簽< / div >?

< div class="two" >第二個div標簽< / div >?

< / div >?

< / body >?

< / html >

2、多個元素的浮動應用

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

< !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;/*設置父元素的高度和寬度都為300像素*/ border:1px solid #000; margin:10px;}/*設置父元素的邊框為1像素黑色實線，四周邊距10像素*/?

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

< / style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標簽< /div >?

< div class="two" >第二個div標簽< /div >?

< div class="three" >第三個div標簽< /div >?

< /div >?

< /body >?

< /html >

3、清除浮動

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

css布局方式-相對定位

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

1、單個元素的相對定位

使用相對定位，就是子元素相對于自身偏移的位置。要確定子元素相對于自身偏移了多少，就要使用top、bottom、left、right屬性來確定。這四個屬性能使用長度單位或者關鍵字auto設置。例如，設定子元素的position屬性為relative，然后設置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;/*設置父元素的高度和寬度都是300像素*/ border:1px solid #000;/*設置父元素的邊框1像素黑色實線*/ margin:10px;}/*設置父元素四周邊距為10像素*/?

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

< /style >?

< /head >?

< body >?

< div class="father" >?

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

< /div >?

< /body >?

< /html >

2、兩個元素的相對定位

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

< !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;/*設置父元素的高度和寬度為300像素*/ border:1px solid #000;/*設置父元素的邊框為1像素黑色實線*/ margin:10px;}/*社會組父元素四周邊距為10像素*/?

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

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

< /style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標簽< /div >?

< div class="two" >第二個div標簽< /div >?

< /div >?

< /body >?

< / html >

css布局方式-絕對定位

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

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;/*設置父元素的高度和寬度都是300像素*/ border:1px solid #000;/*設置父元素的邊框為1像素黑色實線*/ margin:10px;}/*設置父元素四周邊距為10像素*/?

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

< / style >?

< /head >?

< body >?

< div class="father" >?

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

< /div >?

< /body >?

< /html >

2、兩個元素的絕對定位

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

< !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; /*設置父級元素的高度和寬度都為300像素*/ border:1px solid #000;/*設置父級元素的邊框為1像素黑色實線*/ margin:10px;/*設置父元素四周邊距為10像素*/ position:relative/*設置父元素為相對定位*/ }?

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

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

< / style >

< body >?

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

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

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

< /body >?

< /html >