摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規則層疊算法等之后，那么該來學習的也就是都支持哪些屬性樣式表了。

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

聲明

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

• 《HTML5權威指南》
• 《JavaScript權威指南》
• MDN web docs
• Github:smyhvae/web

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

正文-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-xxx, line-xxx 屬性具有繼承性，后代會繼承祖先標簽內的這些屬性。

3.文本 text-xxx

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; 可以達到水平居中的效果。

標簽，瀏覽器通常默認給了 margin: 8px

默認有設置 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 時，這時這個元素就不會霸占一整行了，而是根據設置的寬高來布局繪制，因此這種情況下，可以解決并排的場景。

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

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

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

8.浮動 float

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

瀏覽器默認是按照標準文檔流從上到下，從左到右布局繪制各個元素，此時這些元素可以說位于同一個層面，但當碰到元素設置了 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 并不是說參考元素的左下角坐標，也不是當前頁面參考元素的左下角坐標，而是首屏狀態時，也可以理解成，沒有發生滑動前，參考元素在當前頁面的左下角坐標作為參考點。

舉個例子：

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

而如果沒有使用 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），如果你覺得本篇內容有幫助到你，可以轉載但記得要關注，要標明原文哦，謝謝支持~