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

時間 2019-12-20

標籤前端入門 css 屬性樣式欄目 CSS 简体版

原文原文鏈接

本篇文章已受權微信公衆號 dasu_Android（大蘇）獨家發佈css

聲明

本系列文章內容所有梳理自如下四個來源：html

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

做爲一個前端小白，入門跟着這四個來源學習，感謝做者的分享，在其基礎上，經過本身的理解，梳理出的知識點，或許有遺漏，或許有些理解是錯誤的，若有發現，歡迎指點下。前端

正文-CSS屬性樣式表

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

1.單位

in，cm，mm，px，em，%github

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

相對單位：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 屬性具備繼承性，後代會繼承祖先標籤內的這些屬性。api

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 屬性時，會將這個元素以當前繪製的位置抽離到新的層面上進行佈局。

就像單詞直譯過來：浮動

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

瀏覽器繪製這個網頁時，按照文檔流順序，先在網頁第一行左邊開始處理 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），若是你以爲本篇內容有幫助到你，能夠轉載但記得要關注，要標明原文哦，謝謝支持~