1. 浮動(float)
目標(biāo)
-
記憶
- 能夠說出 CSS 的布局的三種機(jī)制
-
理解
- 能夠說出普通流在布局中的特點
- 能夠說出我們?yōu)槭裁从酶?/li>
- 能夠說出我們?yōu)槭裁匆宄?/li>
-
應(yīng)用
- 能夠利用浮動完成導(dǎo)航欄案例
- 能夠清除浮動
- 能夠使用PS切圖工具
1.1 CSS 布局的三種機(jī)制
網(wǎng)頁布局的核心——就是用 CSS 來擺放盒子。
CSS 提供了 3 種機(jī)制來設(shè)置盒子的擺放位置，分別是普通流（標(biāo)準(zhǔn)流）、浮動和定位，其中：
-
普通流（標(biāo)準(zhǔn)流）
-
塊級元素會獨占一行，從上向下順序排列；
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
-
行內(nèi)元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
- 常用元素：span、a、i、em等
-
塊級元素會獨占一行，從上向下順序排列；
-
浮動
- 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
-
定位
- 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效。
1.2 為什么需要浮動？
思考題：
我們首先要思考以下2個布局中最常見的問題？
- 如何讓多個盒子(div)水平排列成一行？
- 如何實現(xiàn)盒子的左右對齊？
雖然我們前面學(xué)過行內(nèi)塊（inline-block） 但是他卻有自己的缺陷：
- 它可以實現(xiàn)多個元素一行顯示，但是中間會有空白縫隙，不能滿足以上第一個問題。
- 它不能實現(xiàn)以上第二個問題，盒子左右對齊
一句話總結(jié)他們
因為一些網(wǎng)頁布局要求，標(biāo)準(zhǔn)流不能滿足我們的需要了，因此我們需要浮動來完成網(wǎng)頁布局。
1.3 什么是浮動(float)
概念：元素的浮動是指設(shè)置了浮動屬性的元素會
- 脫離標(biāo)準(zhǔn)普通流的控制
- 移動到指定位置。
作用
- 讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。
- 可以實現(xiàn)盒子的左右對齊等等..
- 浮動最早是用來控制圖片，實現(xiàn)文字環(huán)繞圖片的效果。
語法
在 CSS 中，通過 float 中文， 浮 漏 特 屬性定義浮動，語法如下：
選擇器 { float: 屬性值; }
| 屬性值 | 描述 |
|---|---|
| none | 元素不浮動（默認(rèn)值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
浮動口訣。通過
float----- 浮 漏 特
1). 浮動口訣之 浮
浮動——浮浮浮~~~漂浮在普通流的上面。 脫離標(biāo)準(zhǔn)流。 俗稱 “脫標(biāo)”
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
小結(jié)：
-
float屬性會讓盒子漂浮在標(biāo)準(zhǔn)流的上面，所以第二個標(biāo)準(zhǔn)流的盒子跑到浮動盒子的底下了。
2). 浮動口訣之 漏
浮動——漏漏漏~ 浮動的盒子，把自己原來的位置漏給下面標(biāo)準(zhǔn)流的盒子，就是不占有原來位置，是脫離標(biāo)準(zhǔn)流的，我們俗稱 “脫標(biāo)”。
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
/* 讓第 1 個盒子漂浮起來，不占位置 */
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
所以，box2其實就是跑到box1盒子下面了， 被box1給壓住了，遮擋起來了
我們看個立體圖
浮動——特性 float屬性會改變元素display屬性。
任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。 生成的塊級框和我們前面的行內(nèi)塊極其相似。
體驗案例——div 水平排列
.one,
.two {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
float: left;
}
.two {
background-color: purple;
float: left;
}
注意： 浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊
1.4 浮動(float)小結(jié)
我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 因為這是我們最常見的一種布局方式
float —— 浮漏特
| 特點 | 說明 |
|---|---|
| 浮 | 加了浮動的盒子是浮起來的，漂浮在其他標(biāo)準(zhǔn)流盒子的上面。 |
| 漏 | 加了浮動的盒子是不占位置的，它原來的位置漏給了標(biāo)準(zhǔn)流的盒子。 |
| 特 | 特別注意：浮動元素會改變display屬性， 類似轉(zhuǎn)換為了行內(nèi)塊，但是元素之間沒有空白縫隙 |
1.5 浮動(float)的應(yīng)用（重要）
浮動和標(biāo)準(zhǔn)流的父盒子搭配
我們知道，浮動是脫標(biāo)的，會影響下面的標(biāo)準(zhǔn)流元素，此時，我們需要給浮動的元素添加一個標(biāo)準(zhǔn)流的父親，這樣，最大化的減小了對其他標(biāo)準(zhǔn)流的影響。
一個完整的網(wǎng)頁，是 標(biāo)準(zhǔn)流 + 浮動 + 我們后面要講的定位 一起完成的。
浮動應(yīng)用案例
導(dǎo)航欄案例
注意，實際重要的導(dǎo)航欄中，我們不會直接用鏈接a 而是用 li 包含鏈接(li+a)的做法。
- li+a 語義更清晰，一看這就是有條理的列表型內(nèi)容。
- 如果直接用a，搜索引擎容易辨別為有堆砌關(guān)鍵字嫌疑（故意堆砌關(guān)鍵字容易被搜索引擎有降權(quán)的風(fēng)險），從而影響網(wǎng)站排名
1.6 浮動(float)的擴(kuò)展
1). 浮動元素與父盒子的關(guān)系
- 子盒子的浮動參照父盒子對齊
- 不會與父盒子的邊框重疊，也不會超過父盒子的內(nèi)邊距
2). 浮動元素與兄弟盒子的關(guān)系
在一個父級盒子中，如果前一個兄弟盒子是：
- 浮動的，那么當(dāng)前盒子會與前一個盒子的頂部對齊；
- 普通流的，那么當(dāng)前盒子還是在前一個兄弟盒子的下方，位置不變化的。
浮動只會影響當(dāng)前的或者是后面的標(biāo)準(zhǔn)流盒子，不會影響前面的標(biāo)準(zhǔn)流。
建議
如果一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應(yīng)該浮動。防止引起問題
2. 清除浮動
2.1 為什么要清除浮動
因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標(biāo)準(zhǔn)流盒子。
- 總結(jié)：
- 由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響
- 準(zhǔn)確地說，并不是清除浮動，而是清除浮動后造成的影響
2.2 清除浮動本質(zhì)
清除浮動本質(zhì)：
? 清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題。清除浮動之后， 父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標(biāo)準(zhǔn)流了
2.3 清除浮動的方法
在CSS中，clear屬性用于清除浮動，在這里，我們先記住清除浮動的方法，具體的原理，等我們學(xué)完css會再回頭分析。
- 語法：
選擇器{clear:屬性值;} clear 清除
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響） |
| right | 不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響） |
| both | 同時清除左右兩側(cè)浮動的影響 |
但是我們實際工作中， 幾乎只用 clear: both;
1).額外標(biāo)簽法(隔墻法)
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可。
- 優(yōu)點： 通俗易懂，書寫方便
- 缺點： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。
2).父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實現(xiàn)。
優(yōu)點： 代碼簡潔
缺點： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
3).使用after偽元素清除浮動
:after 方式為空元素額外標(biāo)簽法的升級版，好處是不用單獨加標(biāo)簽了
使用方法：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;} /* IE6、7 專有 */
- 優(yōu)點： 符合閉合浮動思想 結(jié)構(gòu)語義化正確
- 缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
- 代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等
4).使用雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點： 代碼更簡潔
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 小米、騰訊等
2.4 清除浮動總結(jié)
我們以后什么時候用清除浮動呢？
- 父級沒高度
- 子盒子浮動了
- 影響下面布局了，我們就應(yīng)該清除浮動了。
| 清除浮動的方式 | 優(yōu)點 | 缺點 |
|---|---|---|
| 額外標(biāo)簽法（隔墻法） | 通俗易懂，書寫方便 | 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級after偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
后面兩種偽元素清除浮動，大家暫且會使用就好， 深入原理，我們后面學(xué)完偽元素再講。
3. Photoshop 切圖
常見的圖片格式
1. jpg圖像格式：
JPEG（.JPG）對色彩的信息保留較好，高清，顏色較多，我們產(chǎn)品類的圖片經(jīng)常用jpg格式的
2. gif圖像格式：
GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及字體，但是可以保存透明背景和動畫效果
3. png圖像格式
是一種新興的網(wǎng)絡(luò)圖形格式，結(jié)合了GIF和JPEG的優(yōu)點，具有存儲形式豐富的特點，能夠保持透明背景
4. PSD圖像格式
PSD格式是Photoshop的專用格式，里面可以存放圖層、通道、遮罩等多種設(shè)計草稿。
PS切圖 可以 分為 利用切片工具切圖 以及 利用PS的插件快速切圖。
1). PS切片工具
ps切圖片，分兩大步：
1). 用切片選中圖片
利用切片工具手動劃出
圖層菜單---新建基于圖層的切片
利用輔助線 來切圖 -- 基于參考線的切片
2). 導(dǎo)出切片
文件菜單 -- 存儲為web設(shè)備所用格式 ---- 選擇 我們要的圖片格式 ---- 點存儲 --- 別忘了選中的切片
輔助線和切片使用及清除
視圖菜單-- 清除 輔助線/ 清除切片
2). 切圖插件
Cutterman是一款運行在photoshop中的插件，能夠自動將你需要的圖層進(jìn)行輸出， 以替代傳統(tǒng)的手工 "導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個切圖的繁瑣流程。 它支持各種各樣的圖片尺寸、格式、形態(tài)輸出，方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規(guī)則，純點擊操作，方便、快捷，易于上手。
官網(wǎng): http://www.cutterman.cn/zh/cutterman
注意： cutterman插件要求你的ps 必須是完整版，不能是綠色版，所以大家需要從新安裝完整版本。
