驍龍 875 要來了！高通發出邀請函：2020 驍龍技術峰會將於 12 月 1-2 日舉行
阿新 • • 發佈：2020-10-06
一 網頁佈局方式
#1 什麼是網頁佈局方式
佈局可以理解為排版，我們所熟知的文字編輯類工具都有自己的排版方式。
而網頁的佈局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的。
#2 網頁佈局
2.1 標準流
2.2 浮動流
2.3 定位流
二 標準流
標準流的排版方式，又稱為：文件流/普通流，所謂的文件流，指的是元素排版佈局過程中，元素會自動從左到右，從上往下的流式排列。 #1 瀏覽器預設的排版方式就是標準流版方式 #2 在CSS中將元素分為三類: 垂直排版，如果元素是塊級元素，那麼就會垂直排版。 水平排版，如果元素是行內元素或行內塊級元素，那麼就會水平排版
三 浮動流
浮動流是一種半脫離標準流的排版方式，那什麼是脫離文件流？什麼又是半脫離文件流？
1 什麼是脫離文件流？
1.1浮動元素脫離文件流意味著
(1)不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版
(2)無論是什麼級的元素都可以設定寬高
綜上所述，浮動流中的元素和標準流總的行內塊級元素很像
示範
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } /* 不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版：span和p都顯示到一行 無論是什麼級的元素都可以設定寬高：span這種行內元素也可以設定寬高 */ .box1 { width: 100px; height: 100px; background-color: red; float: left; } .box2 { width: 100px; height: 100px; background-color: blue; float: left; } </style> </head> <body> <span class="box1">我是span</span> <p class="box2">我是段落</p> </body> </html>
1.2浮動元素脫標文件流意味著
(1)當某一個元素浮動走之後，那麼這個元素看上去就像從標準流中刪除了一樣，這個就是浮動元素脫標
(2)如果前面一個元素浮動走了，而後面一個元素沒有浮動，那麼垂直方向的元素會自動填充，
浮動元素重新歸位後就會覆蓋該元素
示範
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素脫標</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { width: 150px; height: 150px; background-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
box1漂浮到了左上角，那麼box2就會向上填充，然後由於預設是向左對齊於是box1與box2重疊。
注意點
1.浮動流只有一種排版方式，就是水平排版，它只能設定某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值
2.一旦使用了浮動流，則margin:0 auto; 失效
2 那什麼又是半脫離文件流？
脫離分為：半脫離與完全脫離
其中完全脫離指的是元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣
而之所以稱為半脫離：是因為浮動元素浮動之後的位置取決於它在浮動之前的標準流中的位置，
跟標準流還是有一定的關係(本來在哪一行，浮動之後就在那一行水平移動)
1.同一個方向上誰先浮動，誰在前面
2.不同方向上左浮動找左浮動，右浮動找右浮動
3 浮動元素貼靠問題
當父元素的寬度足夠顯示所有元素時，浮動的元素就會並列顯示
當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素
直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了
4 浮動元素的字圍現象
浮動文字、圖片、超連結等元素會給浮動的元素讓位置，並圍繞在浮動元素的周圍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動元素字圍現象</title>
<style>
img {
float: left;
width:300px;
}
p {
background-color: #b9950c;
}
</style>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526318630409&di=8186a1ab56ed36696ade3e23a228acfc&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F58be1c554d5f0.jpg" alt="">
<p>
迪麗熱巴（Dilraba），1992年6月3日出生於新疆烏魯木齊市，中國內地影視女演員。2013年，迪麗熱巴因主演個人首部電視劇《阿娜爾罕》而出道。2014年，她主演了奇幻劇《逆光之戀》。2015年，迪麗熱巴憑藉愛情劇《克拉戀人》贏得高人氣，並獲得國劇盛典最受歡迎新人女演員獎。2016年，其主演的現代劇《麻辣變形計》播出；同年，她還憑藉喜劇片《傲嬌與偏見》獲得中英電影節最佳新人獎。2017年，迪麗熱巴因在玄幻劇《三生三世十里桃花》中飾演青丘白鳳九而獲得白玉蘭獎最佳女配角提名。2018年 ...
迪麗熱巴（Dilraba），1992年6月3日出生於新疆烏魯木齊市，中國內地影視女演員 [1] 。
2013年，迪麗熱巴因主演個人首部電視劇《阿娜爾罕》而出道 [2] 。2014年，她主演了奇幻劇《逆光之戀》 [3] 。2015年，迪麗熱巴憑藉愛情劇《克拉戀人》贏得高人氣，並獲得國劇盛典最受歡迎新人女演員獎 [4] 。2016年，其主演的現代劇《麻辣變形計》播出 [5] ；同年，她還憑藉喜劇片《傲嬌與偏見》獲得中英電影節最佳新人獎 [6] 。2017年，迪麗熱巴因在玄幻劇《三生三世十里桃花》中飾演青丘白鳳九而獲得白玉蘭獎最佳女配角提名 [7] 。2018年4月20日，主演的愛情喜劇電影《21克拉》上映 [8] 。
迪麗熱巴出生於新疆烏魯木齊市，父親是新疆歌舞團的獨唱演員。因受父親影響，迪麗熱巴從小便對各種藝術類的東西頗感興趣，並主動要求學習鋼琴、舞蹈、小提琴、吉他等 [9] 。
2001年，9歲的迪麗熱巴被父親帶去一所藝術學院參加考試，當時她以為是上興趣班，結果被錄取後才發現是一個專業的舞蹈院校，而迪麗熱巴也開始了為期六年的民族舞、芭蕾舞專業學習。2007年，從藝術學院畢業的迪麗熱巴成為了新疆歌舞團的舞蹈演員 [10] 。2009年，迪麗熱巴還在東北師範大學民族學院讀了一年預科，在此期間她還參加了吉林省的首屆少數民族新歌大賽，並最終獲得了省級三等獎的成績 [11] 。
之後，迪麗熱巴卻慢慢發現這並不是自己想要的生活。於是決定繼續求學，去看看外面的世界，因為有不錯鋼琴基礎，所以本來想報考的是中央音樂學院，可報名時卻看到了中戲和上戲在招生，便突然決定改學表演。而迪麗熱巴會有這樣的決定則是受到了她鋼琴老師的指點。2010年，迪麗熱巴順利考入了上海戲劇學院表演系戲劇影視專業；同年，她參加了陸川執導的古裝片《王的盛宴》女主角“虞姬”的上海站海選 [12] ，並因此獲得了頗多關注 [13] 。
</p>
</body>
</html>
標籤img向左浮動後，標籤p會自動向上填充，那麼正好與標籤img覆蓋，然後因為字圍現象文字內容會環繞浮動元素img。
6 浮動元素高度問題(又稱父級塌陷)
1.在標準流，內容的高度可以撐起父元素的高度
2.在浮動流中，浮起的元素是不可以撐起父元素的高度的，當子元素都浮動起來後，父元素的內容高度即變為0，即在整個網頁佈局中不存在，父元素就好像塌陷了一樣，又稱為父級塌陷
就比如在父類div下設定子類div1,div2且都讓其漂浮，那麼div因其內容都脫離隨之高度變為0，那再檢視網頁佈局中的原始碼會發現div已不存在。
7 清除浮動
clear屬性規定元素的哪一側不允許其他浮動元素。
| 值 | 描述 |
|---|---|
| left | 在左側不允許浮動元素。 |
| right | 在右側不允許浮動元素。 |
| both | 在左右兩側均不允許浮動元素。 |
| none | 預設值。允許浮動元素出現在兩側。 |
| inherit | 規定應該從父元素繼承 clear 屬性的值。 |
注意：clear屬性只會對自身起作用，而不會影響其他元素。
清除浮動的副作用（父標籤塌陷問題）
主要有三種方式：
- 固定高度
- 偽元素清除法
- overflow:hidden
偽元素清除法（使用較多）：
.clearfix:after {
content: "";
display: table;
clear: both;
}
四 定位流
1 相對定位
相對定位就是相對於自己以前在標準流中的位置來移動
格式:
postition:relative
需要配合以下三個屬性一起使用
top:20px;
left:20px;
background-color: green;
1.1 相對定位的注意點
1.在相對定位中同一個方向上的定位屬性只能使用一個
top/bottom 只能用一個
left/right 只能用一個
2.相對定位是不脫離標準流的，會繼續在標準流中佔一份空間
3.由於相對定位是不脫離標準流的，所以相對定位中區分塊級、行內、行內塊級元素
4.由於相對定位是不脫離標準流的，並且相對定位的元素會佔用標準流中的位置，所以當給相對定位元素設定margin/padding等屬性時會影響到標準流的佈局，即，給相對定位的標籤設定marin或padding，是以該標籤原來的位置為基礎來進行偏移的
1.2 相對定位的應用場景
1.用於對元素進行微調
2.配合後面學習的絕對定位來使用
img {
height: 50px;
position: relative;
top: 20px;
}
只需要區域性進行微調即可
2 絕對定位
絕對定位就是相對於body或者某個定位流中的祖先元素來定位
.box2 {
position: absolute;
background-color: green;
width: 100px;
height: 100px;
}
在絕對定位下綠色盒子脫離了標準流，因此藍色盒子會認為前面是空的於是向上填充，結果會與綠色盒子重合。
2.1 絕對定位的參考點
#1.預設情況下所有的絕對定位的元素，無論有無祖先元素，都會以body作為參考點
#2.如果一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
2.1 只要這個絕對定位元素的祖先元素都可以
2.2 祖先必須是定位流，此處的定位流指的是絕對定位、相對定位、固定定位(定位流中只有靜態定位不行)
2.2 如果一個絕對定位的元素有祖先元素，而且祖先元素中有多個元素都是定位流，那麼這個絕對定位的元素以離它最近
的那個定位流的祖先元素為參考點
2.2 絕對定位的注意點
1.絕對定位的元素是脫離標準流的，所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素
2.如果一個絕對定位的元素是以body作為參考點，那麼其實是以網頁首屏的寬度和高度作為參考點，而不是以整個網頁的寬度和高度作為參考點，會相對body定位的滾動而滾動
3.一個絕對定位的元素會忽略祖先元素的padding
2.3 絕對定位水平居中
1.注意當一個盒子絕對定位之後不能使用margin: 0 auto;讓盒子自身居中
2.如果想讓過一個絕對定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素寬度一半px;
2.4 絕對定位的應用場景
#1、用於對元素進行微調
#2、配合相對定位來使用
企業開發中一般相對定位和絕對定位都是一起出現, 很少單獨使用===>子絕父相
那為何要用子絕父相呢，請看下圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 800px;
height: 50px;
list-style: none;
margin: 0 auto;
}
ul li {
float: left;
width: 100px;
/*height: 50px;*/
line-height: 50px;
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
width: 100px;
height: 50px;
background-color: #5c5c62;
}
a:link {
color: white;
}
a:visited {
color: #b9950c;
}
a:hover{
background-color: yellow;
}
a:hover {
color: #55BBBB;
}
a:active {
background-color: #003399;
}
ul li:nth-of-type(4) {
position: relative;
}
img {
width: 20px;
/*
相對定位弊端
相對定位不會脫離標準流
會繼續在標準流中佔用一份空間
所以不利於佈局介面
*/
/*position: relative;*/
/*top: -60px;*/
/*left: 30px;*/
/*
絕對定位弊端
絕對定位會脫離標準流，
不會繼續在標準流中佔用一份空間
但問題是預設情況下絕對定位的元素會以body為參考點
所以會隨著瀏覽器的寬度高度的變化而變化
*/
/*
position: absolute;
top: 0px;
left: 608px;
*/
/*
子絕父相
子元素用絕對定位，父元素用相對定位
*/
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">服裝城</a>
</li>
<li>
<a href="#">美妝館</a>
</li>
<li>
<a href="#">京東超市</a>
</li>
<li>
<a href="#">全球購</a>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600687022092&di=53010bc08d76711e860edb0eb349b7ad&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F57%2F93%2F24%2F58face867aabf.png" alt="圖示">
</li>
<li>
<a href="#">閃購</a>
</li>
<li>
<a href="#">團購</a>
</li>
<li>
<a href="#">拍賣</a>
</li>
<li>
<a href="#">金融</a>
</li>
</ul>
</body>
</html>
3 固定定位
#1.固定定位(和絕對定位高度相似，和背景的關聯方式也高度相似)
背景的關聯方式background-attachment: fixed;可以讓圖片不隨著滾動條的滾動而滾動
而固定定位可以讓某一個元素不隨著滾動條的滾動而滾動
#2.注意點
1.固定定位，就是相對瀏覽器視窗定位。頁面如何滾動，這個盒子顯示的位置不變
2.固定定位的元素是脫離標準流的，不會佔用標準流的空間
3.固定定位和絕對定位一樣不區分行內、塊級、行內塊級
4.E6不支援固定定位
示範
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.bg {
width: 600px;
height: 1000px;
border: 1px solid #000;
background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
border: 1px solid #000;
border-radius: 50%;
text-align: center; /*定義盒子中文件的位置*/
line-height: 100px;
background-color: green;
position: fixed;
right: 0; /*定義盒子在整個網頁佈局中的位置*/
bottom: 0;
}
.box3 {
background-color: blue;
}
.box4 {
background-color: yellow;
height: 2000px;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="box1"></div>
<div class="box2">回到頂部</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
固定定位應用場景
- 網頁對聯廣告
- 網頁頭部通欄(穿透效果)
4 靜態定位
#什麼是靜態定位
預設情況下標準流中的元素position屬性就等於static，所以靜態定位其實就是預設的標準流
5 z-index
#1 z-index屬性：用於指定定位的元素的覆蓋關係
1.1 z-index值表示誰壓著誰。數值大的壓蓋數值小的
1.2 只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，
都可以使用z-index值。而浮動的東西不能用
1.3 z-index值沒有單位，就是一個正整數。預設的z-index的值是0
1.4 如果大家都沒有z-index值(預設所有元素z-index值為0)，或者z-index值一樣，
那麼誰寫在html後面，誰在上面壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。
#2 注意點：從父現象(父親慫了，兒子再牛逼都沒用)
父元素沒有z-index值或z-index值相等，那麼子元素誰的z-index大誰蓋住誰。
父元素z-index值不一樣，那麼父元素誰的z-index大誰蓋住誰。
如果父元素z-index相等，子元素的z-index的值也相等，那麼後來的覆蓋前面的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index屬性</title>
<style>
.father1 {
width: 100px;
height: 100px;
background-color: #b9950c;
position: relative;
}
.son1 {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
right: 0;
bottom: -20px;
z-index: 1;
}
.father2 {
width: 100px;
height: 100px;
position: relative;
background-color: saddlebrown;
z-index: 2;
}
.son2 {
width: 50px;
height: 50px;
background-color: aquamarine;
right: 0;
top:-20px;
position: absolute;
text-decoration: none;
}
</style>
</head>
<body>
<div class="father1">
<div class="son1"></div>
</div>
<div class="father2">
<div class="son2"></div>
</div>
</body>
</html>