前端 css 中的非佈局樣式、各種不同的佈局樣式

css 中的非佈局樣式

CSS中，有很多非佈局樣式，這些樣式（屬性）和與佈局無關，包括：

字型、字重、顏色、大小、行高

背景、邊框

滾動、換行

裝飾性屬性（粗體、斜體、下劃線）等。

這篇文章，我們來對上面的部分樣式做一個回顧。

邊框

如何用邊框畫一個三角形？詳見《02-CSS基礎/06-CSS盒模型詳解》中的最後一段。

文字換行

ovferflow-wrap：通用的屬性。用來說明當一個不能被分開的字串（單詞）太長而不能填充其包裹盒時，為防止其溢位，瀏覽器是否允許這樣的單詞中斷換行。

word-break：指定了怎樣在單詞內斷行。這裡涉及到CJK（中文/日文/韓文）的文字換行。

white-space：空白處是否換行。

上面這三個 css 屬性進行組合，可以設定各種不同的屬性。

當然，如果想讓一段很長的文字不換行，可以直接設定

white-space： nowrap

這一個屬性即可。

CSS Hack

CSS Hack 的方式：不合法但可以生效的寫法。

可以用來解決一些瀏覽器的相容性問題。

缺點：難理解、難維護、易失效（比如瀏覽器升級後，hack可能會失效）。

替代方案：特性檢測。

替代方案：針對性加 class

CSS 效果

我們可以利用 CSS 實現各種效果，常見的效果屬性有：

box-shadow：盒子的陰影

text-shadow：文字的陰影

border-radius

background

clip-path

常見的佈局屬性

（1）

display

確定元素的顯示型別：

block：塊級元素。

inline：行內元素。

inline-block：對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設定寬高）。

（2）

positon

確定元素的位置：

static：預設屬性值。

relative：相對定位。相對於元素本身進行偏移，不會改變它所佔據的空間。

absolute：絕對定位。相對於父元素中最近的 relative/absolute 進行偏移，會脫離文件流。音標：［ˈæbsəluːt］。

fixed：固定定位。相對於可視區域固定，會脫離文件流。

relative

、

absolute

、

fixed

這三個屬性，可以結合 z-index 來設定層級。

常見的佈局方法

1、table 表格佈局：早期使用的佈局，如今用得很少。

2、float 浮動 + margin：為了相容低版本的IE瀏覽器，很多網站（比如騰訊新聞、網易新聞、淘寶等）都會採用 float 佈局。

3、inline-block 佈局：對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設定寬高）。

4、flex 佈局：為佈局而生，非常靈活，是最為推薦的佈局寫法。

唯一的缺點是相容性問題：

上圖中可以看到， flex 佈局不支援 IE9 及以下的版本。如果你的頁面不需要處理 IE瀏覽器的相容性問題，則可以放心大膽地使用 flex 佈局。

flex 是一種現代的佈局方式，是 W3C 第一次提供真正用於佈局的 CSS 規範。

5、響應式佈局。

float 佈局

是 CSS 中一種比較麻煩的屬性，涉及到 BFC 和清除浮動（面試的重點）。

float 屬性的特點

元素浮動

脫離文件流，但不脫離文字流

程式碼舉例：

下面這兩個並列的

div1

和

div2

，預設是在標準流中的：

在此基礎之上，如果給

div1

增加

float： left

屬性後，效果如下：

上圖中，可以看到，

div1

設定為浮動後，會脫離文件流，不會對

div2

的佈局造成影響；但是

div1

不會脫離文字流，它會影響

div2

中文字的排列。

其實，這正是 float 屬性的作用。float 本身是用來做圖文混排、文字環繞的效果。

float 所帶來的影響

1、對自身的影響：

形成“塊”（BFC）

位置儘量靠上

位置儘量靠左/右

下面這兩個並列的

div1

和

div2

，設定為浮動之後的效果：（都是儘量靠左顯示的）

在上方程式碼的基礎之上，增加

div2

的寬度之後，會發現，

div2

掉下來了：

2、對兄弟元素的影響：

不影響其他塊級元素的位置

影響其他塊級元素的內部文字

3、對父級元素的影響：

從父級的佈局中“消失”

造成父級元素的高度塌陷：父級元素撐開 div1 之後（父級元素裡沒有其他元素的情況下），如果設定 div1 為 float 之後，，會讓父級元素的高度變為0。

inline-block 佈局

對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設定寬高）。

思路：像文字一樣去排列 block 元素，沒有清除浮動等問題。

存在的問題：需要處理間隙。程式碼舉例如下：

上面的程式碼，存在兩個問題。

問題一：如果設定

div2

的寬度為 200px 之後，

div2

掉下來。

問題二：

div1

和

div2

設定為 inline-block之後，這兩個盒子之間存在了間隙。這是因為，此時的

div1

和

div2

已經被當成文字了。文字和文字之間，本身就會存在間隙。

為了去掉這個間隙，可以有幾種解決辦法：

辦法1：設定父元素

container

的字型大小為0，即

font-size： 0

，然後設定子元素

div1

、

div2

的字型

font-size： 12px

。

辦法2：在寫法上，去掉

div1

和

div2

之間的換行。改為：

響應式佈局

移動端用得較多，本文暫時先不講。