網(wǎng)站桌面圖標(biāo)怎么做百度問一問官網(wǎng)
1.浮動
1. 浮動最初用于實(shí)現(xiàn)文字環(huán)繞效果
2. 現(xiàn)在，浮動是主流的布局方式之一
1.1元素浮動之后的特點(diǎn)
元素浮動之后，稱為浮動元素，具有如下特點(diǎn)：
1. 浮動元素脫離文檔流
2. 多個浮動的元素會水平排列，一行放不下自動換行
3. 不論元素原來的顯示模式是什么，設(shè)置成浮動之后，就是浮動元素，具有自己的顯示特點(diǎn)：
? ?① 水平排列，自動換行，不存在外邊距的塌陷和合并，設(shè)置左右外邊距auto不會居中（與塊級區(qū)別）
? ?② 設(shè)置寬高、內(nèi)外邊距都沒有問題（與行內(nèi)區(qū)別）
? ?③ 不會被父元素作為文本去處理（與行內(nèi)塊和行內(nèi)區(qū)別）
文檔流： 文檔流里的元素會按照順序從上到小，從左到右排列。?
1.2浮動元素產(chǎn)生的影響
1.2.1 對后面的元素的影響
后面兄弟元素會占據(jù)浮動元素原來的位置，可能造成位置的重疊，浮動元素顯示在上
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{margin-top: 20px;padding: 20px;border: 2px solid #eda;width: 600px;height: 400px;background: rgb(221, 240, 255);}.box{width: 150px;height: 120px;}.box1{background: #900;}.box2{background: #080;float: left;}.box3{width: 180px;background: #ff0;}</style>
</head>
<body><div class="me"><div class="box box1">三才洪。</div><div class="box box2">三才洪。</div><div class="box box3">三才洪。</div></div>
</body>
</html>?
解決：
方案一： 給緊鄰這浮動元素的后面的兄弟元素設(shè)置 clear:both
方案二： 兄弟元素要浮動都浮動，浮動元素不要跟不浮動的元素做兄弟
解決方案一：
.box3{clear: both;width: 180px;background: #ff0;}
1.2.3對父元素的影響
子元素浮動之后，不能撐起父元素高度，造成高度塌陷
1.2.3.1解決對父元素的影響：
方案一： 父元素設(shè)置固定高度
方案二： 父元素設(shè)置浮動
方案三： 父元素設(shè)置 overflow, 值只要不是 visible 都可以
方案四： 給父元素添加個子元素，放在所有浮動元素的后面，該元素要求是塊級元素，設(shè)置 clear:both
方案五： 原理同方案四相同，使用偽元素給父元素添加子元素，設(shè)置 clear:both (推擠)
父元素::after {content: "";display: block;clear:both;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{margin-top: 20px;padding: 20px;border: 2px solid #eda;/* width: 600px;height: 400px; */background: rgb(221, 240, 255);}.me::after{content: "";display: block;clear: both;}/* 這種寫法是為了兼容老版本的瀏覽器 */.me:after{content: "";display: block;clear: both;}.box{width: 150px;height: 120px;}.box1{background: #900;float: left;}.box2{background: #080;float: left;}.box3{clear: both;width: 180px;background: #ff0;float: left;}</style>
</head>
<body><div class="me"><div class="box box1">三才洪。</div><div class="box box2">三才洪。</div><div class="box box3">三才洪。</div></div>
</body>
</html>
1.3 浮動相關(guān)的 CSS 屬性
| CSS 屬性 | 功能 | 屬性值 |
| float | 設(shè)置浮動 | left、right、none |
| clear | 清除浮動的影響 | left、right、both |
?2.行內(nèi)元素或行內(nèi)塊元素在布局中的特點(diǎn)
父元素設(shè)置的文本屬性可以作用于行內(nèi)元素和行內(nèi)塊元素
?2.1行內(nèi)塊居中
讓行內(nèi)塊元素在父元素中水平居中
給父元素設(shè)置 text-align:center
讓行內(nèi)塊元素在父元素中縱向居中
1. 給父元素設(shè)置行高
2. 給行內(nèi)塊元素設(shè)置 vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{width: 600px;height: 400px;border: 2px solid #a36060;text-align: center;line-height: 400px;}.box{display: inline-block;vertical-align: middle;/* 行高要與子元素一致才可以將文字居中 */line-height: 80px;width: 100px;height: 80px;background: #900;}</style>
</head>
<body><div class="me"><div class="box box01">行內(nèi)塊</div><!-- <div class="box box02"></div><div class="box box03"></div> --></div>
</body>
</html>
2.2 行內(nèi)元素或行內(nèi)塊元素之間的空白問題
2.2.1元素之間的空白（左右）
產(chǎn)生原因：
代碼中，元素之間的換行
2.2.2解決方案：
方案一： 代碼中，元素之間不寫換行（不推薦）
方案二： 父元素設(shè)置字體大小為0； 如果行內(nèi)塊元素中還有文字單獨(dú)設(shè)置字體大小。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{width: 600px;height: 400px;border: 2px solid #a36060;font-size: 0;}.box{display: inline-block;vertical-align: middle;font-size: 16px;width: 100px;height: 80px;background: #900;}.boxx{display: inline;width: 100px;height: 80px;background: blue;font-size: 16px;}.boxxx{display: inline;width: 100px;height: 80px;background: palegreen;font-size: 16px;}</style>
</head>
<body><div class="me"><div class="box box01">行內(nèi)塊</div><div class="boxx box02">行內(nèi)1</div><div class="boxxx box03">行內(nèi)2</div></div>
</body>
</html>2.2.3底部的空白（圖片的幽靈空白）
產(chǎn)生原因：
行內(nèi)塊元素與文字基線對齊，底部的空白就是基線與底線的距離
解放方案：
方案一： 父元素設(shè)置字體大小 0
方案二： 給行內(nèi)塊元素設(shè)置 vertical-align:bottom (推薦)
方案三： 經(jīng)典解決方案，針對圖片，將圖片設(shè)置成塊級元素
2.2.4文字內(nèi)容個數(shù)不同的行內(nèi)塊元素水平排列無法對齊
產(chǎn)生原因：
1. 如果行內(nèi)塊元素中沒有文字，該元素的底部與基線對齊
2. 如果行內(nèi)塊元素中有一行文字，文字與外面的基線對齊，進(jìn)而影響行內(nèi)塊元素的位置
3. 如果行內(nèi)塊元素中有多行文字，最后一行文字與外面的基線對齊，進(jìn)而影響行內(nèi)塊元素的位置
解決方案
給行內(nèi)塊元素設(shè)置 vertical-align, 值不是 baseline 都可以解決問題
當(dāng)出現(xiàn)為了換行導(dǎo)致元素掉下來時可以設(shè)置?
.last{margin-right: 0;}