時間：2023-09-27 19:30:01 | 來源：網(wǎng)站運營
時間：2023-09-27 19:30:01 來源：網(wǎng)站運營
輕松學(xué)：網(wǎng)頁設(shè)計13-網(wǎng)頁布局盒子浮動：在網(wǎng)頁中，文檔流是以默認(rèn)的方向即從上到下、從左往右流動的，，采用這種默認(rèn)的文檔流搭建的結(jié)構(gòu)看起來死板、不美觀，達(dá)不到預(yù)期的效果。通過引入CSS中的浮動樣式可以進(jìn)行更多樣化的布局。| 屬性值 | 描述 |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 元素不浮動（默認(rèn)值） |
在線咨詢
.father{ /*定義父元素的樣式*/ background:#ccc; border:1px dashed #999;}.box01,.box02,.box03{ /*定義box01、box02、box03三個盒子的樣式*/ height:50px; line-height:50px; background:#FF9; border:1px solid #F33; margin:15px; padding:0px 10px; float:left; /*定義box01、box02、box03左浮動*/}p{ /*定義段落文本的樣式*/ background:#FCF; border:1px dashed #F33; margin:15px; padding:0px 10px; clear:left; /*清除左浮動*/ }<!doctype html><html><head><meta charset="utf-8"><title>空標(biāo)記清除浮動</title><style type="text/css">.father{ /*沒有給父元素定義高度*/ background:#ccc; border:1px dashed #999; }.box01,.box02,.box03{ height:50px; line-height:50px; background:#f9c; border:1px dashed #999; margin:15px; padding:0px 10px; float:left; /*定義box01、box02、box03三個盒子左浮動*/}.box04{ clear:both;} /*對空標(biāo)記應(yīng)用clear:both;*/</style></head> <body><div class="father"> <div class="box01">box01</div> <div class="box02">box02</div> <div class="box03">box03</div> <div class="box04"></div> <!--在浮動元素后添加空標(biāo)記--></div></body></html>clear屬性用于設(shè)置html組件的左，右是否允許出現(xiàn)“浮動”組件。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>visibility屬性示例</title> <style type="text/css"> h1.hidden { visibility: hidden; } h2.display { display: none; } </style> </head> <body> <h1>這是一個可見標(biāo)題</h1> <h1 class="hidden">這是一個隱藏標(biāo)題</h1> <p>注意, 本例中的visibility: hidden隱藏標(biāo)題仍然占用空間。</p> <h1 class="display">這個標(biāo)題不被保留空間</h2> <p>注意, 本例中的display: none不顯示標(biāo)題不占用空間。</p> </body></html>關(guān)鍵詞：布局,盒子,浮動,設(shè)計
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
