最近在做一篇文檔，有關(guān)xhtml與css的，看了不少資料，這里先把總結(jié)的東西寫一點出來。先說的是div css的問題，最基本的，怎樣使用它們來布局。
浮動
CSS允許任何元素浮動float，不論是圖像，段落" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > CSS利用浮動與定位進行網(wǎng)頁布局

CSS利用浮動與定位進行網(wǎng)頁布局

時間：2023-09-08 01:06:01 | 來源：網(wǎng)站運營

時間：2023-09-08 01:06:01 來源：網(wǎng)站運營

CSS利用浮動與定位進行網(wǎng)頁布局：

最近在做一篇文檔，有關(guān)xhtml與css的，看了不少資料，這里先把總結(jié)的東西寫一點出來。先說的是div css的問題，最基本的，怎樣使用它們來布局。
浮動
CSS允許任何元素浮動float，不論是圖像，段落還是列表。無論先前元素是什么狀態(tài)，浮動后都成為塊級元素。浮動元素的寬度缺省為auto。
浮動有一系列控制它的規(guī)則。
1.浮動元素的外邊緣不會超過其父元素的內(nèi)邊緣。
2.浮動元素不會互相重疊。
3.浮動元素不會上下浮動。
4.如果一個浮動元素在另一個浮動元素之后顯示，而且會超出容納塊，則它下降到低于先前任何浮動元素的位置。說簡單點就是沒有空間的話，就另起一行。
下面是一個例子：

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7499')">web學(xué)習(xí)群：751196913</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7499><div id="main"> <div id="box1">box1</div> <div id="box2">box2</div> <div class="clear"></div></div>#main{ width:100%; }#box1{ float:left; width:40%;}#box2{ float:right; width:60%;}.clear{ clear:both;}</td> </tr> </table>這是一個一行兩列的例子，其中clear的作用是不讓浮動元素下面的元素環(huán)繞在它周圍。
定位
position，我們通常用到的是絕對(absolute)和相對(relative)定位，運用這些定義，同樣可以進行布局，做出上面一行兩列的例子。

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下：

</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7804')">web學(xué)習(xí)群：751196913</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7804><div id="main"> <div id="box1">box1</div> <div id="box2">box2</div></div> #main{ position:relative;width:100%;}#box1{ position:absolute; top:0; left:0; width:40%;}#box2{position:absolute; top:0; right:0; width:60%;}</td> </tr> </table>通常，做彈出菜單的時候，我會用到定位，父元素相對定位position:relative，其中的子元素絕對定位position:absolute，通過top，right，bottom，left的值來控制子元素的位置，要注意的是子元素的位置將相對于父元素，而不是整個頁面。
浮動與定位的區(qū)別
通過定位雖然也可以進行布局，但是它的特點決定了它不適合做頁面的布局，因為被定義的元素在普通文檔中占有的任何空間都將被關(guān)閉，可以說，它是漂浮在整個頁面上面的，所以，它可以和頁面上其他的內(nèi)容重疊顯示。
這個特點可以方便的讓我們做出其他特殊的效果，但是相對與浮動就布局來說，我們更多的還是用浮動。

</td> </tr> </table>

關(guān)鍵詞：布局,定位,利用,浮動

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉