標籤：alt 選擇 add css div+css water cin 位置 otto
DIV+CSS標準網頁布局準備工作
區塊屬性(區塊模型)
屬 性 |
描 述 |
Margin(注) |
是定義區塊外邊界與上階項目距離的屬性，用1到4個值來設定元素的邊界，每個值都是長度、百分比或者auto，百分比值參考上階項目的寬度，允許使用負值邊際。如果四個值都給出了，它們分別被應用於上、右、下和左邊界。如果只給出一個值，它被應用於所有邊界。如果兩個或三個值給出了，省略了的值與對邊相等。注意如果邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。而水平方向則不會。也可以選擇使用上邊界margin-top、下邊界margin-bottom、左邊界margin-left和右邊界margin-right屬性分別設定與上階項目的外邊距。 |
padding |
用於設定區塊的內邊距屬性，是邊框和元素內容之間的間隔距離。與margin屬性相返，但使用的是相同屬性值。是上補白padding-top、右補白padding-right、下補白padding-bottom和左補白padding-left屬性的略寫 |
float |
設定區塊漂浮屬性，允許網頁製作者將文本環繞在一個元素的周圍，可以使用左漂浮left值，右漂浮right值 |
clear |
清除屬性指定一個元素是否允許有元素漂浮在它的旁邊。值left移動元素到在其左邊的漂浮的元素的下面；同樣的值right移動到其右邊的漂浮的元素下面。其他的還有預設的none值，和移動元素到其兩邊的漂浮的元素的下面的both值 |
頁面內容置中，並隨瀏覽器的大小的變動而變動【margin、padding】
<html> <head><title>DIV+CSS</title><style> body{ background:green; margin:0px; padding:100px 50px; } #main{ width:100%; height:400px; background:yellow; }</style></head><body><div id="main"></div></body></html>
區塊框浮動【float】
雖然使用絕對位置可以實現頁面配置，但由於調整某個區塊框時其它區塊的位置並不會跟隨著改變，所以並不是布局的首選方式。而使用浮動的區塊框可以向左或向右移動，直到它的外邊緣碰到包含它區塊的邊框或另一個浮動框的邊框為止。並且由於浮動框不在文檔的普通流中，所以文檔的普通流中的區塊框表現得就像浮動框不存在一樣。
<html> <head><title>DIV+CSS</title><style> body{ margin:0px; } #one{ float:left; width:200px; height:200px; background:red; } #two{ float:left; width:220px; height:200px; background:green; } #three{ float:left; width:200px; height:220px; background:blue; }</style></head><body><div id="one"> aaaa</div><div id="two"> bbbb</div><div id="three"> ccccccc</div></body></html>
行框和清理【clear】
在進行頁面配置時，經常需要設定多個區塊框並列在一行中排列。最常見的方式就是使用float屬性，再通過left或right值移動區塊框向左或向右浮動。但當前面並列的多個區塊框總寬度不足包含框的100%時，就會在行框中留出一定的寬度，而下面的某個區塊框又恰好滿足這個寬度，則很可能會向上提，和上一行並列的區塊框在同一行排列。而這不並是我們想要的結果，所以可以使用clear屬性解決這一問題，該屬性的值可以是left、right、both或none，它表示框的哪些邊不應該挨著浮動框。 clear:both #both:兩邊都不挨著浮動塊，right：右邊不挨著 </div class="clear"> </div> #相當於換行作用
<html> <head><title>DIV+CSS</title><style> body{ margin:0px; } #one{ float:left; width:200px; height:200px; background:red; } #two{ float:left; width:200px; height:200px; background:green; } #three{ float:left; width:200px; height:200px; background:blue; } .clear{ clear:both; }</style></head><body> <div id="one"> aaaa</div> <div id="two"> bbbb</div><div class="clear"> </div><div id="three"> ccccccc</div></body></html>
使用區塊框設計頁面配置
區塊置中布局
1、高度和寬度固定的區塊置中（position、margin）
<head><title>DIV+CSS</title><style> body{ margin:0px; } #one{ width:100%; height:100%; background:red; position:absolute; left:50%; top:50%; margin-top:-100px; margin-left:-100px; }</style></head>2、高度和寬度可變的區塊置中(padding)<head><title>DIV+CSS</title><style> body{ margin:0px; padding:200px; } #one{ width:100%; height:100%; background:red; }</style></head>3、布局頁面局中
設定兩列浮動的布局
<html> <head><title>DIV+CSS</title><style> body{ margin:0px; } #one{ float:left; width:300px; height:400px; background:red; } #two{ float:right; width:200px; height:200px; background:green; ｝設定三列浮動的布局【盒子嵌套盒子】<html> <head><title>DIV+CSS</title><style> body{ margin:0px; } .left { float:left;width:600px; } #one{ float:left; width:200px; height:400px; background:red; } #two{ float:right; width:200px; height:400px; background:green; } #three{ float:right; width:200px; height:200px; background:blue; }/* .clear{ clear:both; }*/</style></head><body> <div class="left"><div id="one"> aaaa</div> <div id="two"> bbbbbbbb</div></div><div id="three"> cccccccccccccccc</div></body></html>設定多列浮動的布局
PHP.4-DIV+CSS標準網頁布局準備工作（下）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
