2 浮動(dòng)2.1為什么需要浮動(dòng)12有很多布局效果，標(biāo)準(zhǔn)流沒(méi)有辦法完成，此時(shí)就可以利用浮動(dòng)" />

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

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 傳統(tǒng)網(wǎng)頁(yè)布局三種方式

傳統(tǒng)網(wǎng)頁(yè)布局三種方式

時(shí)間：2023-09-20 10:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-20 10:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

傳統(tǒng)網(wǎng)頁(yè)布局三種方式：

傳統(tǒng)網(wǎng)頁(yè)布局三種方式

1 標(biāo)準(zhǔn)流

所謂的標(biāo)準(zhǔn)流：就是元素（塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊元素）按照規(guī)定好的默認(rèn)方式排列。

2 浮動(dòng)

2.1為什么需要浮動(dòng)

1
2
有很多布局效果，標(biāo)準(zhǔn)流沒(méi)有辦法完成，此時(shí)就可以利用浮動(dòng)完成布局。浮動(dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列方式

2.2 什么是浮動(dòng)

float屬性用于創(chuàng)建浮動(dòng)框，將其移動(dòng)到一邊，直到左邊緣或右邊緣觸及包含塊或另一個(gè)浮動(dòng)框的邊緣。

2.3 浮動(dòng)特性

  1. 浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo))
  2. 脫離標(biāo)準(zhǔn)流的控制
  3. 浮動(dòng)的盒子不再保留原先標(biāo)準(zhǔn)流中的位置
  4. 浮動(dòng)的元素在一行內(nèi)顯示時(shí)元素頂部對(duì)齊
  5. 浮動(dòng)的元素會(huì)具有內(nèi)聯(lián)塊元素的特性
  6. 任何元素都可以浮動(dòng)。無(wú)論塊元素還是內(nèi)聯(lián)元素或是內(nèi)聯(lián)塊元素。
  7. 內(nèi)聯(lián)元素添加浮動(dòng)屬性后具有內(nèi)聯(lián)塊元素相似的特性。為什么說(shuō)相似的特性，因?yàn)閮?nèi)聯(lián)塊元素之間會(huì)有縫隙，但是添加了浮動(dòng)屬性的內(nèi)聯(lián)元素除了可以設(shè)置寬高外（類似內(nèi)聯(lián)塊元素），它們之間沒(méi)有縫隙。
  8. 塊元素添加浮動(dòng)屬性后具有內(nèi)聯(lián)塊元素相似的特點(diǎn)。為什么說(shuō)相似的特性，標(biāo)準(zhǔn)流中的塊元素沒(méi)有設(shè)置寬度，默認(rèn)父元素寬度，但是添加了浮動(dòng)屬性塊元素不設(shè)置寬度，默認(rèn)內(nèi)容寬度。

2.4 浮動(dòng)注意點(diǎn)

浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流，不會(huì)影響浮動(dòng)盒子前面的標(biāo)準(zhǔn)流。個(gè)人理解（浮動(dòng)流的開(kāi)啟位置）

2.5 清除浮動(dòng)

個(gè)人理解：什么是清除浮動(dòng)：浮動(dòng)的盒子顯示在浮動(dòng)流上，不會(huì)影響標(biāo)準(zhǔn)流的盒子顯示；清除浮動(dòng)就是將浮動(dòng)流合并到標(biāo)準(zhǔn)流的過(guò)程，從而影響后續(xù)標(biāo)準(zhǔn)流中元素的顯示效果及顯示位置（浮動(dòng)流的關(guān)閉位置）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test2 { clear: left; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father"> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div> </div> </body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { overflow: hidden; width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father"> <div class="test1"></div> <div class="test3"></div> </div> </body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7專有*/ *zoom: 1; } .father { width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father clearfix"> <div class="test1"></div> <div class="test3"></div> </div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix::before,.clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { /* IE6、7專有*/ *zoom: 1; } .father { width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father clearfix"> <div class="test1"></div> <div class="test3"></div> </div></body></html>

3 定位

3.1 為什么需要定位

盒子自由的在某一個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置，并且可以壓住其他盒子；這種情況使用標(biāo)準(zhǔn)流或浮動(dòng)完成不了

3.2 什么是定位

3
4
5

3.3 定位模式分類

  1. 靜態(tài)定位static
6
  1. 相對(duì)定位relative(重要)
7
  1. 絕對(duì)定位absolute(重要)
8
  1. 固定定位
9
  1. 粘性定位sticky
10

3.3 定位總結(jié)

11

3.4 定位的疊放次序z-index

12

3.5 定位特性

13


關(guān)鍵詞：方式,布局,傳統(tǒng)

74
73
25
news

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

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