目錄
- 傳統網頁布局的三種方式
-
- 普通流（标準流/文檔流）
- 浮動
-
- 為什麼需要浮動？
- 什麼是浮動？
- 浮動特性（重難點）
-
- 脫标
- 浮動元素一行顯示
- 浮動元素具有行内塊元素特性
- 浮動元素經常和标準流父級搭配使用
- 浮動布局注意點
- 為什麼需要清除浮動
- 清除浮動
-
- 清除浮動本質
- 清除浮動方法
-
- 額外标簽法
- 父級添加overflow
- 父級添加after僞元素
- 父級添加雙僞元素
- 切圖
-
- 常見的圖檔格式
- PS切圖
-
- 圖層切圖
- 切片切圖
- PS插件切圖
- CSS屬性書寫順序
- 頁面布局整體思路
傳統網頁布局的三種方式
網頁布局的本質——用CSS來擺放個值，把盒子擺放到相應位置
CSS提供了三種傳統（PC端）布局方式（即盒子如何進行排列順序）：
- 普通流（标準流）
- 浮動
- 定位
普通流（标準流/文檔流）
标簽按照預設規定好方式排列，标準流是最基本的布局方式
- 塊級元素會獨占一行，從上向下順序排列。常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
- 行内元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em等
隻有标準流是不夠的，比如需要元素一左一右、搜尋欄定位在網頁最上端時。實際開發中，一個頁面基本都包含了三種布局方式（後面移動端學習新的布局方式）
浮動
為什麼需要浮動？
有很多的布局效果，标準流沒有辦法完成，此時就可以利用浮動完成布局，是以浮動可以改變元素标簽預設的排列方式
浮動的最典型應用：可以讓多個塊級元素一行内排列顯示
網頁布局第一準則：多個塊級元素縱向排列找标準流，多個塊級元素橫向排列找浮動
什麼是浮動？
float屬性用于建立浮動框，将其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣
文法：
| 屬性值 | 描述 |
|---|---|
| none | 元素不浮動（預設值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
浮動特性（重難點）
- 浮動元素會脫離标準流（脫标）
- 浮動的元素會一行内顯示并且元素頂部對齊
- 浮動的元素會具有行内塊元素的特性
脫标
設定了浮動（float）的元素最重要特性：
- 脫離标準普通流的控制（浮）移動到指定位置（動），即脫标
- 浮動的盒子不再保留原先的位置，讓其他标準流占有
舉例：兩個div盒子，第一個設定浮動，會産生疊加效果，因為第一個div不保留原始位置，第二個盒子向上移動，如下圖顯示
浮動元素一行顯示
如果多個盒子都設定了浮動，則它們會按照屬性值一行内顯示并且頂端對齊排列
注意：浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊
浮動元素具有行内塊元素特性
任何元素都可以浮動，不管原先是什麼模式的元素，添加浮動之後具有行内塊元素相似的特性
- 如果行内元素有了浮動，則不需要轉換塊級/行内塊元素就可以直接給高度和寬度
- 如果塊級盒子沒有設定寬度，預設寬度和父級一樣寬，但是添加浮動後，它的大小根據内容來決定
- 浮動的盒子中間是沒有縫隙的，是緊挨着一起的
浮動元素經常和标準流父級搭配使用
為了限制浮動元素位置，網頁布局一般采取的政策是：
先用标準流的父元素排列上下位置，之後内部子元素采取浮動排列左右位置
浮動布局注意點
-
浮動和标準流的父盒子搭配
先用标準流的父元素排列上下位置，之後内部子元素采取浮動排列左右位置
-
一個元素浮動了，理論上其餘的兄弟元素也要浮動
（第一個元素不浮動，第二個盒子浮動時，第一個盒子獨占一行，第二個盒子貼着第一個盒子下沿浮動。第二個盒子浮動不會影響第一個盒子的标準流。）
浮動盒子隻會影響浮動盒子後面的标準流，不會影響前面的标準流
為什麼需要清除浮動
前面浮動元素有一個标準流的父元素，父元素都有一個共同的特點：都是有高度的
但并不是所有父盒子都必須有高度，比如産品很多很多時、新聞不知道有多少文字不友善給高度時，理想中的狀态，讓子盒子撐開父親，有多少孩子，父盒子就有多高
但是父盒子不給高度，子盒子浮動時不占有位置，父盒子的高度變成0，就會影響下面的标準流盒子，即父盒子後面的盒子會占用父盒子的位置
清除浮動
清除浮動本質
本質：
- 清除浮動的本質是清除浮動元素造成的影響
- 如果父盒子本身有高度，則不需要清除浮動
- 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的标準流了
文法：
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both | 同時清除左右兩側浮動的影響 |
實際工作中，幾乎隻用 clear: both;
清除浮動的政策是：閉合浮動，即将浮動的影響限制在父盒子中
清除浮動方法
- 額外标簽法，也稱為隔牆法，是W3C推薦的做法
- 父級添加overflow屬性
- 父級添加after僞元素
- 父級添加雙僞元素
額外标簽法
額外标簽會在浮動元素末尾添加一個空的标簽，例如< div style=“clear: both”></div>，或者其他标簽（如<br />或塊級标簽等）
- 優點：通俗易懂，書寫友善
- 缺點：添加許多無意義的标簽，結構化較差
注意：要求這個新的空标簽必須是塊級元素
父級添加overflow
可以給父級添加overflow屬性，将其屬性值設定為hidden、auto或scroll
外邊距合并塌陷時也是通過overflow:hidden;（溢出隐藏）解決
（後面詳細講解）
- 優點：代碼簡潔
- 缺點：無法顯示溢出的部分
父級添加after僞元素
:after方式是額外标簽法的更新版，也是給父元素添加。文法：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
- 原理：在元素最後端添加一個新的行内盒子，将盒子内浮動元素與其他盒子隔開
- after僞元素預設為行内元素，需要轉換為塊級元素
- *zoom屬性為了相容IE6、7
- 優點：沒有增加标簽，結構更簡單
- 缺點：照顧低版本浏覽器
- 代表網站：百度、淘寶、網易等
（後面詳細講解僞元素）
父級添加雙僞元素
也是給父元素添加，文法：
.clearfix:before, .clearfix:after {
content: "";
/* 轉化為塊級元素并且在一行顯示 */
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix:before {
*zoom: 1;
}
- 原理：在大盒子内部前後都插入一個盒子，完全閉合
- 優點：代碼更簡潔
- 缺點：照顧低版本浏覽器
- 代表網站：小米、騰訊等
為什麼雙僞元素方法中不需要height和visibility屬性？
切圖
常見的圖檔格式
- jpg圖像格式：JPEG（JPG）對色彩的資訊保留較好，高清，顔色較多，産品類的圖檔經常用jpg格式
- gif圖像格式：GIF格式最多隻能儲存256色，通常用來顯示簡單圖形及字型，但是可以儲存透明背景和動畫效果，實際經常用于一些圖檔小動畫效果
- png圖像格式：結合GIF和JPEG的優點，具有存儲形式豐富的特點，能夠保持透明背景。如果想要切成背景透明的圖檔，選擇png格式
- PSD圖像格式：photoshop的專用格式，裡面可以存放圖層、通道、遮罩等多種設計稿。對前段來說，最大的優點是可以直接從上面複制文字，獲得圖檔，還可以測量大小和距離
PS切圖
PS有很多切圖方式：圖層切圖、切片切圖、PS插件切圖等
圖層切圖
最簡單的切圖方式：右擊圖層 —> 快速導出為png
需要合并圖層再導出：選中需要的圖層 —> 合并圖層（ctrl+E）—> 右擊 —> 快速導出為png
切片切圖
- 利用切片工具手動劃出
- 導出為web裝置所用格式 —> 選擇所需圖檔格式存儲
PS插件切圖
cutterman切圖工具
CSS屬性書寫順序
建議遵循一下順序：
- 布局定位書寫：display / position / float / clear / visibility / overflow（display建議第一個寫，關系到模式）
- 盒子屬性：width / height / margin / padding / border / background
- 文本屬性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
- 其他屬性（CSS3）：content / cursor / border-radius / box-shadow / background:line-gradient…
頁面布局整體思路
- 首先确定頁面的版心（可視區）
- 分析頁面中的行子產品，以及每個行子產品中的列子產品（标準流）
- 一行中的列子產品經常浮動布局，先确定每個列的大小，之後确定列的位置
- 先有結構，後有樣式（理清布局結構再寫代碼）