前端基礎知識第四章---CSS

一、CSS 第四章

（1）浮動（float)

網頁布局的本質：用 CSS 來擺放盒子。 把盒子擺放到相應位置。

CSS 提供了三種傳統布局方式(簡單說,就是盒子如何進行排列順序)：普通流（標準流）、浮動 、定位；

溫馨提醒：

實際開發中，一個頁面基本都包含了這三種布局方式

（后面在移動端的學習中，也會學習到新的布局方式哦）。

所謂的標準流: 就是標簽按照規定好默認方式排列。

標準流是最基本的布局方式。

塊級元素會獨占一行，從上向下順序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table；

行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em 等；

原因：有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。 因為浮動可以改變元素標簽默認的排列方式.

浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。

網頁布局第一準則：

多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

float

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

語法演示如下：

選擇器 { float: 屬性值; }

加了浮動之后的元素,會具有很多特性,需要我們掌握的。

浮動元素會脫離標準流(脫標)；

浮動的元素會一行內顯示并且元素頂部對齊；

浮動的元素會具有行內塊元素的特性；

設置了浮動（float）的元素最重要特性：

脫離標準普通流的控制（浮） 移動到指定位置（動）, （俗稱

脫標

）；

浮動的盒子

不再保留原先的位置

；

如果多個盒子都設置了浮動，則它們會按照屬性值

一行內顯示并且頂端對齊排列

。

任何元素都可以浮動。不管原先是什么模式的元素，添加浮動之后具有行內塊元素相似的特性。

如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬，但是添加浮動后，它的大小根據內容來決定；

浮動的盒子中間是沒有縫隙的，是緊挨著一起的；

為了約束浮動元素位置, 我們網頁布局一般采取的策略是：

先用標準流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置。

華為商城官網布局案例：

（2）常見網頁布局

.

浮動和標準流的父盒子搭配。

先用標準流的父元素排列上下位置, 之后內部子元素采取浮動排列左右位置。

一個元素浮動了，理論上其余的兄弟元素也要浮動。

一個盒子里面有多個子盒子，如果其中一個盒子浮動了，那么其他兄弟也應該浮動，以防止引起問題。

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

（3）清除浮動

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

清除浮動的本質是清除浮動元素造成的影響；

如果父盒子本身有高度，則不需要清除浮動；

清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了；

語法演示如下：

選擇器{clear:屬性值;}

溫馨提醒：在實際工作中，幾乎只用 clear: both；

額外標簽法

也稱為

隔墻法

，是 W3C 推薦的做法。

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

優點： 通俗易懂，書寫方便；

缺點： 添加許多無意義的標簽，結構化較差；

可以給父級添加

overflow 屬性

，將其屬性值設置為

hidden、 auto 或 scroll

。

優點：代碼簡潔；

缺點：無法顯示溢出的部分；

溫馨提醒：注意是給父元素添加代碼；

代碼演示如下：

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1; }

優點：沒有增加標簽，結構更簡單；

缺點：照顧低版本瀏覽器；

代表網站： 百度、淘寶網、網易等；

溫馨提醒：注意是給父元素添加代碼；

代碼演示如下：

.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }

優點：代碼更簡潔；

缺點：照顧低版本瀏覽器；

代表網站：小米、騰訊等；

（4）PS 切圖

jpg圖像格式： JPEG（.JPG）對色彩的信息保留較好，高清，顏色較多，

產品類的圖片經常用jpg格式的

。

gif圖像格式：GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及字體，但是可以保存透明背景和動畫效果,

實際經常用于一些圖片小動畫效果

。

png圖像格式是一種新興的網絡圖形格式，結合了GIF和JPEG的優點，具有存儲形式豐富的特點，能夠保持透明背景。

如果想要切成背景透明的圖片，請選擇png格式

。

PSD圖像格式PSD格式是Photoshop的專用格式，里面可以存放圖層、通道、遮罩等多種設計稿。

對我們前端人員來說,最大的優點,我們可以直接從上面復制文字，獲得圖片，還可以測量大小和距離

。

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

最簡單的切圖方式：右擊圖層 >> 快速導出為 PNG。

但是很多情況下,我們需要合并圖層再導出：

選中需要的圖層: 圖層菜單 >> 合并圖層(ctrl+e)

右擊 >> 快速導出為 PNG

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

導出選中的圖片：文件菜單 >> 導出 >> 存儲為 web 設備所用格式 >> 選擇我們要的圖片格式 >> 存儲；

Cutterman

是一款運行在

Photoshop

中的插件，能夠自動將你需要的圖層進行輸出，以替代傳統的手工"導出 web 所用格式" 以及使用切片工具進行挨個切圖的繁瑣流程。

官網 ：Cutterman – 最好用的切圖工具

（5）開發功法

建議遵循以下順序：

布局定位屬性：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 / text-shadow / background:linear-gradient

代碼演示如下：

.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); border-radius: 10px; }

為了提高網頁制作的效率，布局時通常有以下的整體思路：

必須確定頁面的版心（可視區），我們測量可得知。

分析頁面中的行模塊，以及每個行模塊中的列模塊。其實頁面布局第一準則。

一行中的列模塊經常浮動布局，先確定每個列的大小，之后確定列的位置。頁面布局第二準則。

制作 HTML 結構。我們還是遵循，先有結構，后有樣式的原則。結構永遠最重要。

所以，先理清楚布局結構，再寫代碼尤為重要。這需要我們多寫多積累。

二、總結

由于內容較多，所以我決定分開寫啦，我會堅持一直更新呢！喜歡的朋友們記得點哦！

CSS web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。