柚子快報激活碼778899分享：前端 CSS（3）（學習筆記）

http://yzkb.51969.com/

一、浮動（float）

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

網(wǎng)頁布局的本質(zhì)------用CSS來擺放盒子。把盒子擺放到相應(yīng)位置。

CSS提供了三種傳統(tǒng)布局方式（簡單說，就是盒子如何進行排列順序）：

普通流（標準流）浮動定位

1.2標準流（普通流/文檔流）

所謂的標準流：就是標簽按照規(guī)定好默認方式排列。（標準流是最基本的布局方式）

1.塊級元素會獨占一行，從上向下順序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2.行內(nèi)塊元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。

常用元素：span、a、i、em等

網(wǎng)頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

1.3浮動

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

語法：

浮動特性：

脫離標準普通流的控制（?。┮苿拥街付ㄎ恢茫▌樱?，（俗稱脫標）浮動的盒子不再保留原先的位置如果多個盒子都設(shè)置了浮動，則它們會按照屬性值一行內(nèi)顯示并且頂端對齊排列。（浮動的元素是互相貼靠在一起的，不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。浮動元素會具有行內(nèi)塊元素特性。任何元素都可以浮動。不管原先是什么模式的元素，添加浮動之后具有行內(nèi)塊元素相似的特性。

如果塊級盒子沒有設(shè)置寬度，默認和父級一樣寬，但是添加浮動后，它的大小根據(jù)內(nèi)容來決定浮動的盒子中間是沒有縫隙的，是緊挨著一起的行內(nèi)元素同理

1.4搭配

為了約束浮動元素位置，網(wǎng)頁布局一般采取的策略是：

先用標準流的父級元素排列上下位置，之后內(nèi)部子元素采取浮動排列左右位置。符合網(wǎng)頁布局第一準則。

二、常見網(wǎng)頁布局

注意點：一個盒子里面有多個盒子，如果其中一個盒子浮動了，那么其他兄弟也應(yīng)該浮動，以防止引起問題。

浮動的盒子只會影響浮動盒子后面的標準流，不會影響前面的標準流。

三、清除浮動

3.1為什么需要清除浮動？

由于父級盒子很多情況下，不方便給高度，但是盒子浮動又不占有位置，最后父級盒子高度為0時，就會影響下面的標準流盒子。

由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響。

3.2清除浮動的本質(zhì)

語法：

3.3清除浮動方法

1.額外標簽法：

額外標簽法也成為隔墻法，是W3C推薦的做法。

額外標簽法會在浮動元素末尾添加一個空的標簽，例如

注意：要求這個新的空標簽必須是塊級元素。

2.父級添加overflow

可以給父級添加overflow屬性，將其屬性值設(shè)置為hidden、auto或scroll。

3.：after偽元素法

雙偽元素清除浮動：

總結(jié)：

四、PS切圖

4.1常見的圖片格式

PS有很多的切圖方式：圖層切圖、切片切圖、PS插件切圖等。

4.2圖層切圖

最簡單的切圖方式：右擊圖層→快速到處為PNG。

但很多情況下，我們需要合并圖圖層再導(dǎo)出：

選中需要的圖層：圖層菜單→合并圖層（ctrl+e）右擊→快速導(dǎo)出為PNG

4.3切片切圖

①利用切片選中圖片：利用切片工具手動劃出

②導(dǎo)出選中的圖片：文件菜單→導(dǎo)出→存儲為web設(shè)備所用格式→選擇我們要的圖片格式→存儲。

4.4PS插件切圖

4.4像素大廚

省去PhotoShop的煩惱

PS因為各種原因，安裝完整版非常麻煩，現(xiàn)在開發(fā)前端測量主要使用藍湖、摹客、像素大廚等。

像素大廚官網(wǎng)：http://www.fancynode.com.cn/

五、習慣

CSS屬性書寫順序：

頁面布局整體思路：

頭部制作：

柚子快報激活碼778899分享：前端 CSS（3）（學習筆記）

http://yzkb.51969.com/

精彩文章