柚子快報(bào)激活碼778899分享：前端 CSS（3）（學(xué)習(xí)筆記）

http://yzkb.51969.com/

一、浮動(dòng)（float）

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

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

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

普通流（標(biāo)準(zhǔn)流）浮動(dòng)定位

1.2標(biāo)準(zhǔn)流（普通流/文檔流）

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

1.塊級(jí)元素會(huì)獨(dú)占一行，從上向下順序排列。

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

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

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

網(wǎng)頁(yè)布局第一準(zhǔn)則：多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)。

1.3浮動(dòng)

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

語(yǔ)法：

浮動(dòng)特性：

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

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

1.4搭配

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

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

二、常見(jiàn)網(wǎng)頁(yè)布局

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

浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流，不會(huì)影響前面的標(biāo)準(zhǔn)流。

三、清除浮動(dòng)

3.1為什么需要清除浮動(dòng)？

由于父級(jí)盒子很多情況下，不方便給高度，但是盒子浮動(dòng)又不占有位置，最后父級(jí)盒子高度為0時(shí)，就會(huì)影響下面的標(biāo)準(zhǔn)流盒子。

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

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

語(yǔ)法：

3.3清除浮動(dòng)方法

1.額外標(biāo)簽法：

額外標(biāo)簽法也成為隔墻法，是W3C推薦的做法。

額外標(biāo)簽法會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽，例如

注意：要求這個(gè)新的空標(biāo)簽必須是塊級(jí)元素。

2.父級(jí)添加overflow

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

3.：after偽元素法

雙偽元素清除浮動(dòng)：

總結(jié)：

四、PS切圖

4.1常見(jiàn)的圖片格式

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

4.2圖層切圖

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

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

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

4.3切片切圖

①利用切片選中圖片：利用切片工具手動(dòng)劃出

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

4.4PS插件切圖

4.4像素大廚

省去PhotoShop的煩惱

PS因?yàn)楦鞣N原因，安裝完整版非常麻煩，現(xiàn)在開(kāi)發(fā)前端測(cè)量主要使用藍(lán)湖、摹客、像素大廚等。

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

五、習(xí)慣

CSS屬性書寫順序：

頁(yè)面布局整體思路：

頭部制作：

柚子快報(bào)激活碼778899分享：前端 CSS（3）（學(xué)習(xí)筆記）

http://yzkb.51969.com/

精彩文章