明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

詳細說明div對齊與頁面布局

發(fā)表時間：2023-12-29 來源：明輝站整理相關軟件相關文章人氣：

[摘要]p布局是學習的重點，這篇文章主要為大家詳細介紹了p對齊與網(wǎng)頁布局的相關學習資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下p布局之所以要學懂學透，是因為table的布局實在是難堪大用，如果是同處于一個表格之內，各行的規(guī)格分布根本就沒法調，例如下面的一段非常簡單的代碼：<!DOCTYPE...
p布局是學習的重點，這篇文章主要為大家詳細介紹了p對齊與網(wǎng)頁布局的相關學習資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

p布局之所以要學懂學透，是因為table的布局實在是難堪大用，如果是同處于一個表格之內，各行的規(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>  
</head>  
  
<body>  
<table border="1">  
<tr>  
<td width="5%">11111111111111</td>  
<td width="85%">11111111111111</td>  
<td width="5%">11111111111111</td>  
<td width="5%">11111111111111</td>  
</tr>  
<tr>  
<td width="5%">11111111111111</td>  
<td width="5%">11111111111111</td>  
<td width="85%">11111111111111</td>  
<td width="5%">11111111111111</td>  
</tr>  
</table>  
</body>  
</html>

本想寫出這樣的布局：

詳解div對齊與網(wǎng)頁布局

但實際上出來的效果卻是這樣：

詳解div對齊與網(wǎng)頁布局

這很正常，因為table布局中僅有第一行對于td的設置是起作用的，余下行的td設置都會給第一行的td設置所覆蓋。

這個問題很嚴重，尤其是各位網(wǎng)頁設計師，把table的border屬性設置成0的情況下，很難想出發(fā)生了什么？

解決這樣的問題，如果還是用table布局，那你有兩種方法，一是讓這兩行不處于同一個表格，二是使用表格嵌套的方式。

不過這也太蛋疼了吧，每次布局都要用一個新的表格？而且腳本對這么多表格如何編號？如何控制？

所以說table的網(wǎng)頁布局不堪大用，只能用于行內的布局，table在行內布局的作用對于p確實強大很多。

但是p布局同樣可以完成行內布局，只不過要定義好style中的float屬性，并且完成了一次行內布局，要使用style中的clear:both換行。

詳解div對齊與網(wǎng)頁布局

如上的圖層排放是通過如下的代碼所實現(xiàn)的：


<!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>p</title>  
</head>  
  
<body>  
<!--默認情況下的p對齊-->  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>  
<!--更換對齊方式，必須使用clear:both換行，這個換行符的高度為10px，默認為0px，顏色同網(wǎng)頁的背景色-->  
<p style="clear:both; height:10px;"></p>  
<!--使用了行內右對齊的方式，是先寫最右圖層，再寫次右圖層，與常人思維相反-->  
<p style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></p>  
<p style="background:#00f; width:10%; height:100px; float:right;"></p>  
<p style="clear:both; height:10px;"></p>  
<!--使用行內左對齊方式-->  
<p style="background:#0f0; width:10%; height:100px; float:left;"></p>  
<p style="background:#F00; width:10%; height:100px; float:left;"></p>  
<p style="clear:both; height:10px;"></p>  
<p style="background:#00f; width:10%; height:100px; float:left;"></p>  
<!--如果你更換對齊方式，這里是希望從行內左對齊更變成一個無論大小的圖層占用一行，而不用clear:both換行的話，這兩個圖層會疊放在一起，出錯-->  
<p style="background:#0af; width:15%; height:100px;"></p>  
<!--此乃正確的使用方式。-->  
<p style="clear:both; height:10px;"></p>  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>  
</body>  
</html>

而對于一些如導航條等固定在頁面首部或者頁面尾部的圖層，一些游離于體系之外的廣告圖層，則需要用到position的對齊方式，前者是fixed后者是absolute。

在上面的代碼中，繼續(xù)加入如下代碼：


<p style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游離于體系之外</p>  
<p style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游離于體系之外</p>  
<!--下面兩個圖層，只是為了說明上面兩行代碼可以放在任何位置，但不影響網(wǎng)頁布局之用-->  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>

則能夠出現(xiàn)如下效果：

詳解div對齊與網(wǎng)頁布局

被position:fixed的圖層，即使?jié)L動條拉下來也是一直掛著頭部的：

詳解div對齊與網(wǎng)頁布局

上述關于“導航條”圖層與“廣告”圖層的兩行代碼可以放在任何位置，不影響網(wǎng)絡布局。那么，網(wǎ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>p</title>  
</head>  
  
<body>  
<!--默認情況下的p對齊-->  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>  
<!--更換對齊方式，必須使用clear:both換行，這個換行符的高度為10px，默認為0px，顏色同網(wǎng)頁的背景色-->  
<p style="clear:both; height:10px;"></p>  
<!--使用了行內右對齊的方式，是先寫最右圖層，再寫次右圖層，與常人思維相反-->  
<p style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></p>  
<p style="background:#00f; width:10%; height:100px; float:right;"></p>  
<p style="clear:both; height:10px;"></p>  
<!--使用行內左對齊方式-->  
<p style="background:#0f0; width:10%; height:100px; float:left;"></p>  
<p style="background:#F00; width:10%; height:100px; float:left;"></p>  
<p style="clear:both; height:10px;"></p>  
<p style="background:#00f; width:10%; height:100px; float:left;"></p>  
<!--如果你更換對齊方式，這里是希望從行內左對齊更變成一個無論大小的圖層占用一行，而不用clear:both換行的話，這兩個圖層會疊放在一起，出錯-->  
<p style="background:#0af; width:15%; height:100px;"></p>  
<!--此乃正確的使用方式。-->  
<p style="clear:both; height:10px;"></p>  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>  
<p style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游離于體系之外</p>  
<p style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游離于體系之外</p>  
<!--下面兩個圖層，只是為了說明上面兩行代碼可以放在任何位置，但不影響網(wǎng)頁布局之用-->  
<p style="background:#aa0; width:15%; height:100px;"></p>  
<p style="background:#0a0; width:15%; height:100px;"></p>  
</body>  
</html>

所以說，p布局比table布局強大得多，可控，可用

以上就是詳解div對齊與網(wǎng)頁布局的詳細內容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。