前端入門4-CSS屬性樣式表

阿新 • • 發佈：2018-12-18

本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家釋出

宣告

本系列文章內容全部梳理自以下四個來源：

作為一個前端小白，入門跟著這四個來源學習，感謝作者的分享，在其基礎上，通過自己的理解，梳理出的知識點，或許有遺漏，或許有些理解是錯誤的，如有發現，歡迎指點下。

正文-CSS屬性樣式表

瞭解了 CSS 具體的各種工作原理、使用方式、選擇器規則、層疊演算法等之後，那麼該來學習的也就是 css 都支援哪些屬性樣式表了。

1.單位

in，cm，mm，px，em，%

絕對單位：1in（英寸） = 2.54cm（釐米） = 25.4mm（毫米） = 72pt（英鎊points） = 6pc（皮卡picas）

相對單位：px（畫素）， em（相對於font-size的大小）， %（百分比）

2.字型 font-xxx

font-size: 20px;	字型大小
line-height: 30px;	行高
font-family: 微軟雅黑;	字型
font-style: italic;	斜體，normal正常字型
font-weight: bold;	粗體
font-variant: small-caps;	小寫變大寫

font-xxx, line-xxx 屬性具有繼承性，後代會繼承祖先標籤內的這些屬性。

3.文字 text-xxx

letter-spacing: 0.5cm;	單個字母之間的間距
word-spacing: 1cm;	單詞之間的間距
text-decoration: none;	字型修飾，none:去掉下劃線，underline下劃線，line-through中劃線，overline上劃線
text-transform: lowercase;	單詞小寫，uppercase大寫, capitalize首字母大寫
color:red;	字型顏色
text-align: center;	在當前容器中對齊方式，left,right,justify

text-xxx具有繼承性，後代標籤會繼承祖先中宣告的這些屬性，想讓文字居中顯示時，如果屬性不生效，可自行計算，如下：

4.背景 background-xxx

background-color

設定元素背景顏色，屬性值有三種方式：red, rgb(255, 0, 0), #ff0000

以上三種均表示紅色。以下是幾種常見的顏色：

#000（黑） #fff（白） #f00（紅） #222（深灰）#333（灰）#ccc（淺灰）

background-repeat

設定背景圖片是否重複，以及如何重複，預設平鋪滿。屬性值如下：

no-repear 不要平鋪
repeat-x 橫向平鋪
repeat-y 縱向平鋪

應用場景：可以類似於 Android 中的 .9 圖，設計一張 1px 的背景圖，指定橫向或者縱向平鋪。

background-position

指定背景圖位置，幾種格式如下：

background-position: 向右偏移量向下偏移量;

屬性值可以是正數，也可以是負數。比如：100px 200px，-50px -120px

background-position: 描述左右的詞描述上下的詞;

描述左右的詞：left、center、right

描述上下的詞：top 、center、bottom

比如說，right center表示將圖片放到右邊的中間；center center表示將圖片放到正中間。

這個屬性既可以用於在一張包含各種 icon 種只顯示指定區域的 icon，也可用於在文字四周新增 icon。

background-attachment

設定背景圖片是否固定，屬性值：

fixed 背景固定住，不會被滾動條滾走
scroll 預設屬性，背景跟隨滾動條滑動

background-clip

背景預設延伸到邊界的外邊緣，如果你只想背景擴充套件到內容區的邊緣，可通過這個屬性設定。

outline

設定盒子的輪廓，它看起來像邊界，但不是盒模型的一部分，是畫在邊界框之外，外邊距之內，但不會修改盒子的大小。

background

以上屬性的綜合屬性，如果不想一個個屬性的去寫，可以用這個屬性集中寫在一起。格式如下：

background: -color –image –repeat –position –attachment
//如
background:red url(1.jpg) no-repeat 100px 100px fixed;

等效於：

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

另外，背景是可以設定多個的，多個背景間會自動重疊在一起，並不是像 Android 中只能設定一個背景。

5.盒子 width height...

width&height

設定內容的寬高，並不是盒子的寬高，但可通過 box-sizing 來更改寬高的作用域。

Android 中必須給控制元件設定寬高，但在這裡，寬高並不是必選像。當沒有設定寬高時，會根據其顯示模式 display 來決定其預設寬高。

比如，display: block 塊級元素預設高度會霸佔父節點 100% 寬度，而高度預設會由子內容決定，類似於 Android 中的 wrap_content。

display: inline 行內元素則是無法設定寬高，預設為文字內容的寬高。

除了正常寬高外，還有其他一些可選項配置：

min-width, min-height, max-width, max-height

藉助這些配置，可以達到一些當視窗大小變化時，變化到一定程度改變原有元素的表現行為，比如某張圖片本來居中顯示，但當視窗縮小到比圖片還小時，圖片就根據視窗進行縮小，此時就可結合 max-width 來實現。

padding

padding：-top –right –bottom -left

設定內邊距

border

border：-width –style –color

設定邊框

margin

margin：-top –right –bottom -left

設定外邊距

注意一點，margin 跟 Android 中的 margin 有些不一樣，對某個元素設定了 margin 後，margin 區域的大小也算在這個元素盒子的大小中。

另外，預設的文件流中，上下方向會存在 margin 塌陷的情況，也就是上一個元素設定了 margin-bottom: 10px，下一個元素設定了 margin-top: 20px，那麼最終這兩個元素其實間距為 20px，並不是疊加的。

另外，margin 通常是用於兄弟節點間設定間距，如果要設定兒子和父親間的間距，建議使用 padding，否則如果父節點沒有設定 border 時，可能效果並不是想要的。

margin: 0 auto; 可以達到水平居中的效果。

<body>標籤，瀏覽器通常預設給了 margin: 8px

<ul> 預設有設定 margin-left 和 padding-top

所以，通常都會有一份 reset.css，來重置這些預設屬性值。

6.陰影 box-shadow&text-shadow

你會看到，我們在 box-shadow 屬性值中有4個項：

第一個長度值是水平偏移量（horizontal offset ）——即向右的距離，陰影被從原始的框中偏移(如果值為負的話則為左)。
第二個長度值是垂直偏移量（vertical offset）——即陰影從原始盒子中向下偏移的距離(或向上，如果值為負)。
第三個長度的值是模糊半徑（blur radius）——在陰影中應用的模糊度。
顏色值是陰影的基本顏色（base color）。

如果需要內部陰影，則是在上述屬性值最前面加一個 inset 如：

box-shadow: inset 2px 2px 1px black

7.顯示模式 display

標準文件流佈局方式

當沒有進行任何 CSS 控制元素的排版佈局時（float, position, flex）預設就是按照標準的文件流佈局方式進行排版佈局繪製元素。

而這個標準的文件流佈局方式就是按照解析 HTML 文件元素的順序，從頁面頂部開始，從上到下，從左到右，解析一個元素就繪製一個元素，解析時碰到的是行內元素，就忽略寬高，允許並排佈局繪製，碰到的是塊級元素，就另一起一行，讓這個元素霸佔父元素中的這一整行。

所以，清楚了瀏覽器預設的文件流佈局方式後，得再瞭解下所說的行內元素，塊級元素是什麼，怎麼切換。

inline(行內元素)&block(塊級元素)

display 有兩個很基本的屬性值：inline（行內元素） block（塊級元素）

通常，容器類的標籤預設值都是 block，而文字類的標籤預設值是 inline。

比如：div, header, main, li, h 系列這類都是塊級元素

p, span, I, a 這類都是行內元素。

區分以及理解行內元素和塊級元素對於寫網頁佈局非常重要，因為瀏覽器是按照文件流從上到下，從左到右來進行繪製網頁的。

對於行內元素（inline），瀏覽器繪製時會忽略對它設定的寬高，並且如果相鄰兩個元素都是行內元素，則直接以並排方式從左到右對其進行佈局繪製。

但對於塊級元素，瀏覽器會強制讓其霸佔一整行，也就是這一行內，只能有這個塊級元素存在，其他元素不能與其並排。如果沒有設定寬度，那麼就是充滿整行。

這個整行是想對於父元素的區域而言，並不是瀏覽器頁面的整行。

文件流佈局方式

這種預設的標準文件流的佈局繪製方式有些類似於 Android 中的 LinearLayout 容器，inline 就類似於水平方向， block 就類似於垂直方向，同一個方向內只能有一個元素霸佔，不允許並排。

所以，我們在寫 HTML，CSS 時，腦中就要有個大概的藍圖，這些元素大概會呈現怎樣的排版佈局。

一個元素是行內元素還是塊級元素，可以通過 display 來設定，如果沒有設定，那麼就是預設值，不同元素的預設值不同。

如果行內元素不支援設定寬高，塊級元素又不允許並排存在，那麼很顯然，很多佈局我們就實現不了了。是吧，如果既要能夠並排，還要支援可以設定寬高，這是該怎麼辦呢？

解決方法有很多種，說白了就是一點：脫離預設的文件流佈局方式

方式有以下幾種：

display:inline-block（行內塊元素）
浮動 float: left/right
絕對定位 position: absolute
固定定位 position: fixed

inline-block(行內塊元素)

當設定了 display: inline-block 時，這時這個元素就不會霸佔一整行了，而是根據設定的寬高來佈局繪製，因此這種情況下，可以解決並排的場景。

但需要注意下，最好不要有這樣的佈局：

<div style=”display:inline-block”>
    <div style=”display:block”>
        <div style=”display:inline-block></div>
</div>
</div>

也就是行內塊元素嵌套了塊級元素內部又嵌套了行內塊元素，這樣的話，佈局方面會有些問題，原因不清楚。但把中間的塊級元素也設定成行內塊元素就沒問題了。

另外，並不是說，不允許行內塊元素內嵌塊級元素，也是可以的。

8.浮動 float

float 屬性值通常會用到這兩個：left right

瀏覽器預設是按照標準文件流從上到下，從左到右佈局繪製各個元素，此時這些元素可以說位於同一個層面，但當碰到元素設定了 float 屬性時，會將這個元素以當前繪製的位置抽離到新的層面上進行佈局。

就像單詞直譯過來：浮動

也就是讓這個元素浮在標準文件流上面。

float

瀏覽器繪製這個網頁時，按照文件流順序，先在網頁第一行左邊開始處理 div1 元素，發現它的一個浮動元素，則將其抽離到另一個層面，浮動在文件流上面。

然後它繼續處理 div2 元素，因為之前處理的 div1 元素是浮動元素，不佔用文件流，所以此時仍舊是在第一行左邊繪製 div2 元素，發現它是一個塊級元素，所以讓其霸佔一整行。

所以，此時可以看到 div1 浮在 div2 上面的效果。

緊接著，繼續處理 div3 元素，因此之前 div2 塊級元素已經霸佔了第一行了，所以此時是在第二行處理 div3 元素，發現它也是一個浮動元素，便以當前位置將其抽離到另一層面繪製。

所以此時看到的效果就是，浮動元素 div3 是在塊級元素 div2 下。

繼續往下處理，如果發現的還是浮動元素，因為所有的浮動元素都處理同一層面，所有的文件流元素都處於一個層面，所有浮動元素 div4 並不會跟 div3 發生重疊，而是貼著它。

如果接下去處理的元素是塊級元素，那麼此時的效果會是怎樣的呢？

如果接下去是塊級元素，那麼它就會是繪製在浮動元素 div3 和 dive4 下面，呈現出重疊的效果。

但這裡需要注意一點，雖然浮動元素會造成重疊的現象，但這只是正常的文件流的元素盒子被浮動元素壓住了，但文件流元素的文字內容會自動圍繞在浮動元素周圍，就像上圖中塊級元素四個字並沒有被覆蓋住。

也就是說，浮動元素並不會造成文件流的內容被覆蓋的情況，反而它會影響到它之後文件流中元素的內容區域的顯示排版。如果不想讓後面的元素受到浮動元素的影響，那麼就要進行浮動清除處理。

另外，不考慮巢狀元素的話，兄弟元素之間，如果處於同一層面，是不會有重疊現象的。

浮動清除

由於浮動最初設計是為了讓文字可以圍繞在圖片周圍，因此，浮動元素後面的非浮動元素會自動圍繞著浮動元素進行包裝。而如果我們想讓浮動元素之後的元素另起一行，從新的位置開始佈局，那麼就要進行浮動的清除。

另外，浮動元素之後的浮動元素也會受到它的影響，比如設定了 float:left，那麼這個元素要浮動的靠左的位置會受到前面已經靠左浮動的元素的影響。

如果不想讓當前的浮動元素受到之前浮動元素的影響，那麼也要進行浮動清除的處理，方式有幾種，每種有自己的適用場景，瞭解下即可，後續寫多了，自然就懂了。

clear: both 表示當前元素不受之前浮動元素的影響
隔牆法（在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。本質上也是clear:both）

浮動的不足

浮動雖然好用，既可以實現文字圍繞的效果，又可以實現多列並排的佈局，但它也存在一些不足的地方，上面說的浮動清除是其中一點，還有一些問題，如下：

整個寬度可能難以計算

這是因為多個浮動元素之間並排顯示的前提的有足夠的空間讓這些元素並排，所以通常對於浮動元素的寬度設定是通過百分比來設定，確保多個並排的元素即使視窗發生變化仍舊可以並排佈局。

但，如果元素還需要進行內邊距，外邊距的設定，邊框的設定，因為這些大小都算在盒子的總寬度中，那麼最終盒子的大小就變得很難確定，有可能導致某個浮動元素被擠到下一行去。

有個方法可以解決，修改 box-sizing:border-box，讓 width 就是盒子總寬度，當設定了邊距時，會自動減少相應的內容區域。但如果頁面使用不同型別的 box-sizing，會使 CSS 的程式碼閱讀變得很雜亂。

浮動元素之後的元素設定 margin 失效

非浮動元素的外邊距不能用於它們和浮動元素之間來建立空間，通常我們再浮動元素之後的非浮動元素會進行浮動清除，順便設定外邊距來建立間隔空間，但這時會發現這個間隔空間失效。解決方法可以在這中間插一個空的元素，在這個元素裡清除浮動，也就是所說的隔牆法。

9.位置 position

position 屬性值有三個：absolute, relative, fixed

三種雖然是不同的定位模式，但其實說白了，就是參考點不同。

也都是通過 left, top, right, bottom 來根據參考掉調整位置。

releative 相對定位

相對定位並不是相對於父元素，而是相對於該元素原本所應該在的位置作為參考點。

這點跟 Android 中的 ReleativeLayout 佈局不一樣，需要注意一下。

另外，相對定位並不會改變元素在文件流中的位置，也就是這個元素原本佔據哪個坑，通過相對定位微調之後，仍佔據那個坑，只是視覺上它發生了移動而已。有點類似 Android 中的 View 動畫。

應用場景：

微調
讓後代元素可以使用絕對定位

通常都是用來給後代使用絕對定位的，因為固定定位和絕對定位都會導致該元素從文件流中脫離，就像浮動元素那樣，不再佔用文件流的坑位。

而相對定位並不會，所以通常父類元素設定了相對定位，而讓後代元素使用絕對定位，這樣可以讓後代元素可以脫離文件流，達到壓蓋的效果，同時還可以受限於父類元素的範圍管控。

absolute 絕對定位

參考的物件是父類或祖先元素中有使用了position的最近一個元素。也就是說在父類元素中，不管是使用了相對定位，絕對定位，固定定位之後，都可以用來作為後代絕對定位的參考元素。

但通常都是使用子絕父相的模式，其他模式並沒有什麼意義。

參考的元素決定了之後，參考點的選取還分兩種情況，參考元素的左上角或者左下角。

如果使用了 top 來調整位置，那麼參考點就是參考元素的左上角

如果使用了 bottom 來調整位置，那麼參考點就是參考元素首屏頁面的左下角

為什麼強調首屏，因為參考元素的大小可能是超出一個螢幕的，bottom 並不是說參考元素的左下角座標，也不是當前頁面參考元素的左下角座標，而是首屏狀態時，也可以理解成，沒有發生滑動前，參考元素在當前頁面的左下角座標作為參考點。

舉個例子：

absolute

另外，有點需要注意下，絕對定位的元素，因為其已經從文件流中抽離，因此就不存在什麼行內元素、塊級元素的限制了。大小就是根據設定的寬高、位置就是根據參考點進行調整後進行佈局繪製。

而如果沒有使用 position 屬性，元素預設是文件流處理的，此時的佈局繪製方式就只能按照文件流的規則來，即行內元素、塊級元素這些特性。

因為絕對定位是將元素脫離出標準文件流，那麼絕對定位的元素顯示與否，並不會影響到原本的文件流元素，所以，通常一些彈窗框，彈窗控制面板，可在頁面上任意拖放的元素等都會通過絕對定位來做。

應用：

彈窗框
壓蓋（角標之類）

fixed 固定定位

固定定位參考點就是瀏覽器的左上角，不管頁面如何發生滑動，元素顯示的位置都沒有發生改變。

應用：

網頁右下角的返回頂部按鈕
頂部導航欄

z-index

這個屬性只有當使用了 position 的元素才會生效，其他元素設定了這個屬性沒有什麼意義。

這個屬性其實就是用於當元素髮生重疊時，決定由誰蓋在上面，預設值為0，值越大，越上層。

而會發生元素重疊的現象也就只有使用了 position 調整了元素的位置，以及浮動元素兩種場景。正常的文件流方式佈局繪製元素是不會出現元素重疊，當然如果是巢狀的元素，層級關係也早就確定了，也沒必要通過這個屬性來調整了。

浮動元素造成的重疊只是盒子上的重疊，並不會造成元素內容上的重疊，那麼也就沒有使用 z-index 的必要，因為要呈現的內容並不會被覆蓋。

總結一下，這個屬性有幾個特性：

屬性值大的位於上層，屬性值小的位於下層
z-index 值沒有單位，就是一個正整數。預設的 z-index 值是0
如果大家都沒有 z-index 值，或者 z-index 值一樣，那麼在 HTML 程式碼裡寫在後面，誰就在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素
只有定位了的元素，才能有 z-index 值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用 z-index 值。而浮動的元素不能用
從父現象：父親慫了，兒子再牛逼也沒用。意思是，如果父親1比父親2大，那麼，即使兒子1比兒子2小，兒子1也能在最上層。

大家好，我是 dasu，歡迎關注我的公眾號（dasuAndroidTv），如果你覺得本篇內容有幫助到你，可以轉載但記得要關注，要標明原文哦，謝謝支援~