本篇文章已授權(quán)微信公眾號 dasu_Android（大蘇）獨家發(fā)布

聲明

本系列文章內(nèi)容全部梳理自以下四個來源：

《HTML5權(quán)威指南》
《JavaScript權(quán)威指南》
MDN web docs
Github:smyhvae/web

作為一個前端小白，入門跟著這四個來源學(xué)習(xí)，感謝作者的分享殖侵，在其基礎(chǔ)上撩独，通過自己的理解畏线，梳理出的知識點穆咐，或許有遺漏耕陷，或許有些理解是錯誤的遇伞，如有發(fā)現(xiàn)辙喂，歡迎指點下。

正文-CSS屬性樣式表

了解了 CSS 具體的各種工作原理鸠珠、使用方式巍耗、選擇器規(guī)則、層疊算法等之后渐排，那么該來學(xué)習(xí)的也就是 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 屬性具有繼承性，后代會繼承祖先標(biāo)簽內(nèi)的這些屬性描姚。

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;	在當(dāng)前容器中對齊方式绊寻，left,right,justify

text-xxx具有繼承性花墩，后代標(biāo)簽會繼承祖先中聲明的這些屬性悬秉，想讓文本居中顯示時，如果屬性不生效观游，可自行計算搂捧，如下：

字體

4.背景 background-xxx

background-color

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

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

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

background-repeat

設(shè)置背景圖片是否重復(fù)允跑，以及如何重復(fù)，默認平鋪滿搪柑。屬性值如下：

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

應(yīng)用場景：可以類似于 Android 中的 .9 圖聋丝，設(shè)計一張 1px 的背景圖，指定橫向或者縱向平鋪工碾。

background-position

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

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

屬性值可以是正數(shù)，也可以是負數(shù)渊额。比如：100px 200px况木，-50px -120px

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

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

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

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

這個屬性既可以用于在一張包含各種 icon 種只顯示指定區(qū)域的 icon椿猎，也可用于在文本四周添加 icon惶岭。

background-attachment

設(shè)置背景圖片是否固定，屬性值：

fixed 背景固定住犯眠，不會被滾動條滾走
scroll 默認屬性按灶，背景跟隨滾動條滑動

background-clip

背景默認延伸到邊界的外邊緣，如果你只想背景擴展到內(nèi)容區(qū)的邊緣筐咧，可通過這個屬性設(shè)置兆衅。

outline

設(shè)置盒子的輪廓，它看起來像邊界嗜浮，但不是盒模型的一部分，是畫在邊界框之外摩疑，外邊距之內(nèi)危融，但不會修改盒子的大小。

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;

另外，背景是可以設(shè)置多個的蛋勺，多個背景間會自動重疊在一起瓦灶，并不是像 Android 中只能設(shè)置一個背景。

5.盒子 width height...

width&height

設(shè)置內(nèi)容的寬高抱完，并不是盒子的寬高贼陶，但可通過 box-sizing 來更改寬高的作用域。

Android 中必須給控件設(shè)置寬高巧娱，但在這里碉怔，寬高并不是必選像。當(dāng)沒有設(shè)置寬高時禁添，會根據(jù)其顯示模式 display 來決定其默認寬高撮胧。

比如，display: block 塊級元素默認高度會霸占父節(jié)點 100% 寬度老翘，而高度默認會由子內(nèi)容決定芹啥，類似于 Android 中的 wrap_content。

display: inline 行內(nèi)元素則是無法設(shè)置寬高铺峭，默認為文本內(nèi)容的寬高墓怀。

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

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

借助這些配置逛薇，可以達到一些當(dāng)窗口大小變化時捺疼，變化到一定程度改變原有元素的表現(xiàn)行為，比如某張圖片本來居中顯示永罚，但當(dāng)窗口縮小到比圖片還小時啤呼，圖片就根據(jù)窗口進行縮小，此時就可結(jié)合 max-width 來實現(xiàn)呢袱。

padding

padding：-top –right –bottom -left

設(shè)置內(nèi)邊距

border

border：-width –style –color

設(shè)置邊框

margin

margin：-top –right –bottom -left

設(shè)置外邊距

注意一點官扣，margin 跟 Android 中的 margin 有些不一樣，對某個元素設(shè)置了 margin 后羞福，margin 區(qū)域的大小也算在這個元素盒子的大小中惕蹄。

另外，默認的文檔流中治专，上下方向會存在 margin 塌陷的情況卖陵，也就是上一個元素設(shè)置了 margin-bottom: 10px，下一個元素設(shè)置了 margin-top: 20px张峰，那么最終這兩個元素其實間距為 20px泪蔫，并不是疊加的。

另外喘批，margin 通常是用于兄弟節(jié)點間設(shè)置間距撩荣，如果要設(shè)置兒子和父親間的間距铣揉，建議使用 padding，否則如果父節(jié)點沒有設(shè)置 border 時餐曹，可能效果并不是想要的逛拱。

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

<body>標(biāo)簽台猴，瀏覽器通常默認給了 margin: 8px

<ul> 默認有設(shè)置 margin-left 和 padding-top

所以朽合，通常都會有一份 reset.css，來重置這些默認屬性值卿吐。

6.陰影 box-shadow&text-shadow

陰影

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

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

如果需要內(nèi)部陰影罢坝，則是在上述屬性值最前面加一個 inset 如：

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

7.顯示模式 display

標(biāo)準(zhǔn)文檔流布局方式

當(dāng)沒有進行任何 CSS 控制元素的排版布局時（float, position, flex）默認就是按照標(biāo)準(zhǔn)的文檔流布局方式進行排版布局繪制元素恕出。

而這個標(biāo)準(zhǔn)的文檔流布局方式就是按照解析 HTML 文檔元素的順序唉铜，從頁面頂部開始筷屡，從上到下，從左到右尚骄，解析一個元素就繪制一個元素块差，解析時碰到的是行內(nèi)元素，就忽略寬高倔丈，允許并排布局繪制憨闰，碰到的是塊級元素，就另一起一行需五，讓這個元素霸占父元素中的這一整行鹉动。

所以，清楚了瀏覽器默認的文檔流布局方式后宏邮，得再了解下所說的行內(nèi)元素泽示，塊級元素是什么，怎么切換蜜氨。

inline(行內(nèi)元素)&block(塊級元素)

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

通常械筛，容器類的標(biāo)簽?zāi)J值都是 block，而文本類的標(biāo)簽?zāi)J值是 inline飒炎。

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

p, span, I, a 這類都是行內(nèi)元素变姨。

區(qū)分以及理解行內(nèi)元素和塊級元素對于寫網(wǎng)頁布局非常重要，因為瀏覽器是按照文檔流從上到下厌丑，從左到右來進行繪制網(wǎng)頁的定欧。

對于行內(nèi)元素（inline），瀏覽器繪制時會忽略對它設(shè)置的寬高怒竿，并且如果相鄰兩個元素都是行內(nèi)元素砍鸠，則直接以并排方式從左到右對其進行布局繪制。

但對于塊級元素耕驰，瀏覽器會強制讓其霸占一整行爷辱，也就是這一行內(nèi)，只能有這個塊級元素存在朦肘，其他元素不能與其并排饭弓。如果沒有設(shè)置寬度，那么就是充滿整行媒抠。

這個整行是想對于父元素的區(qū)域而言弟断，并不是瀏覽器頁面的整行。

文檔流布局方式

這種默認的標(biāo)準(zhǔn)文檔流的布局繪制方式有些類似于 Android 中的 LinearLayout 容器趴生，inline 就類似于水平方向阀趴， block 就類似于垂直方向，同一個方向內(nèi)只能有一個元素霸占苍匆，不允許并排刘急。

所以，我們在寫 HTML浸踩，CSS 時叔汁，腦中就要有個大概的藍圖，這些元素大概會呈現(xiàn)怎樣的排版布局检碗。

一個元素是行內(nèi)元素還是塊級元素据块，可以通過 display 來設(shè)置，如果沒有設(shè)置后裸，那么就是默認值瑰钮，不同元素的默認值不同。

如果行內(nèi)元素不支持設(shè)置寬高微驶，塊級元素又不允許并排存在浪谴，那么很顯然，很多布局我們就實現(xiàn)不了了因苹。是吧苟耻，如果既要能夠并排，還要支持可以設(shè)置寬高扶檐，這是該怎么辦呢凶杖？

解決方法有很多種，說白了就是一點：脫離默認的文檔流布局方式

方式有以下幾種：

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

inline-block(行內(nèi)塊元素)

當(dāng)設(shè)置了 display: inline-block 時款筑，這時這個元素就不會霸占一整行了智蝠，而是根據(jù)設(shè)置的寬高來布局繪制腾么，因此這種情況下，可以解決并排的場景杈湾。

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

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

也就是行內(nèi)塊元素嵌套了塊級元素內(nèi)部又嵌套了行內(nèi)塊元素，這樣的話漆撞，布局方面會有些問題殴泰，原因不清楚。但把中間的塊級元素也設(shè)置成行內(nèi)塊元素就沒問題了浮驳。

另外悍汛，并不是說，不允許行內(nèi)塊元素內(nèi)嵌塊級元素至会，也是可以的离咐。

8.浮動 float

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

瀏覽器默認是按照標(biāo)準(zhǔn)文檔流從上到下，從左到右布局繪制各個元素奋献，此時這些元素可以說位于同一個層面健霹，但當(dāng)碰到元素設(shè)置了 float 屬性時，會將這個元素以當(dāng)前繪制的位置抽離到新的層面上進行布局瓶蚂。

就像單詞直譯過來：浮動

也就是讓這個元素浮在標(biāo)準(zhǔn)文檔流上面糖埋。

float

瀏覽器繪制這個網(wǎng)頁時，按照文檔流順序窃这，先在網(wǎng)頁第一行左邊開始處理 div1 元素瞳别，發(fā)現(xiàn)它的一個浮動元素，則將其抽離到另一個層面杭攻，浮動在文檔流上面祟敛。

然后它繼續(xù)處理 div2 元素，因為之前處理的 div1 元素是浮動元素兆解，不占用文檔流馆铁，所以此時仍舊是在第一行左邊繪制 div2 元素，發(fā)現(xiàn)它是一個塊級元素锅睛，所以讓其霸占一整行埠巨。

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

緊接著辣垒，繼續(xù)處理 div3 元素，因此之前 div2 塊級元素已經(jīng)霸占了第一行了印蔬，所以此時是在第二行處理 div3 元素勋桶，發(fā)現(xiàn)它也是一個浮動元素，便以當(dāng)前位置將其抽離到另一層面繪制。

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

繼續(xù)往下處理，如果發(fā)現(xiàn)的還是浮動元素眠饮，因為所有的浮動元素都處理同一層面奥帘，所有的文檔流元素都處于一個層面，所有浮動元素 div4 并不會跟 div3 發(fā)生重疊仪召，而是貼著它。

如果接下去處理的元素是塊級元素松蒜，那么此時的效果會是怎樣的呢扔茅？

如果接下去是塊級元素，那么它就會是繪制在浮動元素 div3 和 dive4 下面秸苗，呈現(xiàn)出重疊的效果召娜。

但這里需要注意一點，雖然浮動元素會造成重疊的現(xiàn)象惊楼，但這只是正常的文檔流的元素盒子被浮動元素壓住了玖瘸，但文檔流元素的文本內(nèi)容會自動圍繞在浮動元素周圍，就像上圖中塊級元素四個字并沒有被覆蓋住檀咙。

也就是說雅倒，浮動元素并不會造成文檔流的內(nèi)容被覆蓋的情況，反而它會影響到它之后文檔流中元素的內(nèi)容區(qū)域的顯示排版弧可。如果不想讓后面的元素受到浮動元素的影響蔑匣，那么就要進行浮動清除處理。

另外棕诵，不考慮嵌套元素的話裁良，兄弟元素之間，如果處于同一層面校套，是不會有重疊現(xiàn)象的价脾。

浮動清除

由于浮動最初設(shè)計是為了讓文字可以圍繞在圖片周圍，因此笛匙，浮動元素后面的非浮動元素會自動圍繞著浮動元素進行包裝侨把。而如果我們想讓浮動元素之后的元素另起一行，從新的位置開始布局膳算，那么就要進行浮動的清除座硕。

另外，浮動元素之后的浮動元素也會受到它的影響涕蜂，比如設(shè)置了 float:left华匾，那么這個元素要浮動的靠左的位置會受到前面已經(jīng)靠左浮動的元素的影響。

如果不想讓當(dāng)前的浮動元素受到之前浮動元素的影響，那么也要進行浮動清除的處理蜘拉，方式有幾種萨西，每種有自己的適用場景，了解下即可旭旭，后續(xù)寫多了谎脯，自然就懂了。

clear: both 表示當(dāng)前元素不受之前浮動元素的影響
隔墻法（在兩部分浮動元素中間持寄，建一個墻源梭。隔開兩部分浮動，讓后面的浮動元素稍味，不去追前面的浮動元素废麻。本質(zhì)上也是clear:both）

浮動的不足

浮動雖然好用，既可以實現(xiàn)文字圍繞的效果模庐，又可以實現(xiàn)多列并排的布局烛愧，但它也存在一些不足的地方，上面說的浮動清除是其中一點掂碱，還有一些問題怜姿，如下：

整個寬度可能難以計算

? 這是因為多個浮動元素之間并排顯示的前提的有足夠的空間讓這些元素并排，所以通常對于浮動元素的寬度設(shè)置是通過百分比來設(shè)置疼燥，確保多個并排的元素即使窗口發(fā)生變化仍舊可以并排布局沧卢。

? 但，如果元素還需要進行內(nèi)邊距悴了，外邊距的設(shè)置搏恤，邊框的設(shè)置，因為這些大小都算在盒子的總寬度中湃交，那么最終盒子的大小就變得很難確定熟空，有可能導(dǎo)致某個浮動元素被擠到下一行去。

? 有個方法可以解決搞莺，修改 box-sizing:border-box息罗，讓 width 就是盒子總寬度，當(dāng)設(shè)置了邊距時才沧，會自動減少相應(yīng)的內(nèi)容區(qū)域迈喉。但如果頁面使用不同類型的 box-sizing，會使 CSS 的代碼閱讀變得很雜亂温圆。

浮動元素之后的元素設(shè)置 margin 失效

? 非浮動元素的外邊距不能用于它們和浮動元素之間來創(chuàng)建空間挨摸，通常我們再浮動元素之后的非浮動元素會進行浮動清除，順便設(shè)置外邊距來創(chuàng)建間隔空間岁歉，但這時會發(fā)現(xiàn)這個間隔空間失效得运。解決方法可以在這中間插一個空的元素，在這個元素里清除浮動，也就是所說的隔墻法熔掺。

9.位置 position

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

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

也都是通過 left, top, right, bottom 來根據(jù)參考掉調(diào)整位置推沸。

releative 相對定位

相對定位并不是相對于父元素，而是相對于該元素原本所應(yīng)該在的位置作為參考點券坞。

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

另外恨锚，相對定位并不會改變元素在文檔流中的位置深浮，也就是這個元素原本占據(jù)哪個坑，通過相對定位微調(diào)之后眠冈，仍占據(jù)那個坑，只是視覺上它發(fā)生了移動而已菌瘫。有點類似 Android 中的 View 動畫蜗顽。

應(yīng)用場景：

微調(diào)
讓后代元素可以使用絕對定位

通常都是用來給后代使用絕對定位的，因為固定定位和絕對定位都會導(dǎo)致該元素從文檔流中脫離雨让，就像浮動元素那樣雇盖，不再占用文檔流的坑位。

而相對定位并不會栖忠，所以通常父類元素設(shè)置了相對定位崔挖，而讓后代元素使用絕對定位，這樣可以讓后代元素可以脫離文檔流庵寞，達到壓蓋的效果狸相，同時還可以受限于父類元素的范圍管控。

absolute 絕對定位

參考的對象是父類或祖先元素中有使用了position的最近一個元素捐川。也就是說在父類元素中脓鹃，不管是使用了相對定位，絕對定位古沥，固定定位之后瘸右，都可以用來作為后代絕對定位的參考元素。

但通常都是使用子絕父相的模式岩齿，其他模式并沒有什么意義太颤。

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

如果使用了 top 來調(diào)整位置，那么參考點就是參考元素的左上角

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

為什么強調(diào)首屏瓦堵，因為參考元素的大小可能是超出一個屏幕的基协，bottom 并不是說參考元素的左下角坐標(biāo)，也不是當(dāng)前頁面參考元素的左下角坐標(biāo)菇用，而是首屏狀態(tài)時澜驮，也可以理解成，沒有發(fā)生滑動前惋鸥，參考元素在當(dāng)前頁面的左下角坐標(biāo)作為參考點杂穷。

舉個例子：

absolute

另外，有點需要注意下卦绣，絕對定位的元素耐量，因為其已經(jīng)從文檔流中抽離，因此就不存在什么行內(nèi)元素滤港、塊級元素的限制了廊蜒。大小就是根據(jù)設(shè)置的寬高、位置就是根據(jù)參考點進行調(diào)整后進行布局繪制溅漾。

而如果沒有使用 position 屬性山叮，元素默認是文檔流處理的，此時的布局繪制方式就只能按照文檔流的規(guī)則來添履，即行內(nèi)元素屁倔、塊級元素這些特性。

因為絕對定位是將元素脫離出標(biāo)準(zhǔn)文檔流暮胧，那么絕對定位的元素顯示與否锐借，并不會影響到原本的文檔流元素，所以往衷，通常一些彈窗框钞翔，彈窗控制面板，可在頁面上任意拖放的元素等都會通過絕對定位來做炼绘。

應(yīng)用：

彈窗框
壓蓋（角標(biāo)之類）

fixed 固定定位

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

應(yīng)用：

網(wǎng)頁右下角的返回頂部按鈕
頂部導(dǎo)航欄

z-index

這個屬性只有當(dāng)使用了 position 的元素才會生效驮捍，其他元素設(shè)置了這個屬性沒有什么意義。

這個屬性其實就是用于當(dāng)元素發(fā)生重疊時脚曾，決定由誰蓋在上面东且，默認值為0，值越大本讥，越上層珊泳。

而會發(fā)生元素重疊的現(xiàn)象也就只有使用了 position 調(diào)整了元素的位置鲁冯，以及浮動元素兩種場景。正常的文檔流方式布局繪制元素是不會出現(xiàn)元素重疊色查，當(dāng)然如果是嵌套的元素薯演，層級關(guān)系也早就確定了，也沒必要通過這個屬性來調(diào)整了秧了。

浮動元素造成的重疊只是盒子上的重疊跨扮，并不會造成元素內(nèi)容上的重疊，那么也就沒有使用 z-index 的必要验毡，因為要呈現(xiàn)的內(nèi)容并不會被覆蓋衡创。

總結(jié)一下，這個屬性有幾個特性：

屬性值大的位于上層晶通，屬性值小的位于下層
z-index 值沒有單位璃氢，就是一個正整數(shù)。默認的 z-index 值是0
如果大家都沒有 z-index 值狮辽，或者 z-index 值一樣一也，那么在 HTML 代碼里寫在后面，誰就在上面能壓住別人喉脖。定位了的元素塘秦，永遠能夠壓住沒有定位的元素
只有定位了的元素，才能有 z-index 值动看。也就是說，不管相對定位爪幻、絕對定位菱皆、固定定位，都可以使用 z-index 值挨稿。而浮動的元素不能用
從父現(xiàn)象：父親慫了仇轻，兒子再牛逼也沒用。意思是奶甘，如果父親1比父親2大篷店，那么，即使兒子1比兒子2小臭家，兒子1也能在最上層疲陕。

大家好，我是 dasu钉赁，歡迎關(guān)注我的公眾號（dasuAndroidTv）蹄殃，如果你覺得本篇內(nèi)容有幫助到你，可以轉(zhuǎn)載但記得要關(guān)注你踩，要標(biāo)明原文哦诅岩，謝謝支持~

dasuAndroidTv2.png

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

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

聲明

正文-CSS屬性樣式表

1.單位

2.字體 font-xxx

3.文本 text-xxx

4.背景 background-xxx

background-color

background-repeat

background-position

background-attachment

background-clip

outline

background

5.盒子 width height...

width&height

padding

border

margin

6.陰影 box-shadow&text-shadow

7.顯示模式 display

標(biāo)準(zhǔn)文檔流布局方式

inline(行內(nèi)元素)&block(塊級元素)

inline-block(行內(nèi)塊元素)

8.浮動 float

浮動清除

浮動的不足

9.位置 position

releative 相對定位

absolute 絕對定位

fixed 固定定位

z-index