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

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

聲明

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

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

作為一個(gè)前端小白，入門跟著這四個(gè)來源學(xué)習(xí)，感謝作者的分享，在其基礎(chǔ)上，通過自己的理解，梳理出的知識(shí)點(diǎn)，或許有遺漏，或許有些理解是錯(cuò)誤的，如有發(fā)現(xiàn)，歡迎指點(diǎn)下。

正文-CSS屬性樣式表

了解了 CSS 具體的各種工作原理、使用方式、選擇器規(guī)則、層疊算法等之后，那么該來學(xué)習(xí)的也就是 css 都支持哪些屬性樣式表了。

1.單位

in，cm，mm，px，em，%

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

相對(duì)單位：px（像素）， em（相對(duì)于font-size的大?。?， %（百分比）

2.字體 font-xxx

font-xxx, line-xxx 屬性具有繼承性，后代會(huì)繼承祖先標(biāo)簽內(nèi)的這些屬性。

3.文本 text-xxx

text-xxx具有繼承性，后代標(biāo)簽會(huì)繼承祖先中聲明的這些屬性，想讓文本居中顯示時(shí)，如果屬性不生效，可自行計(jì)算，如下：

4.背景 background-xxx

background-color

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

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

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

background-repeat

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

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

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

background-position

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

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

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

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

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

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

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

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

background-attachment

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

• fixed 背景固定住，不會(huì)被滾動(dòng)條滾走
• scroll 默認(rèn)屬性，背景跟隨滾動(dòng)條滑動(dòng)

background-clip

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

outline

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

background

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

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è)置多個(gè)的，多個(gè)背景間會(huì)自動(dòng)重疊在一起，并不是像 Android 中只能設(shè)置一個(gè)背景。

5.盒子 width height...

width&height

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

Android 中必須給控件設(shè)置寬高，但在這里，寬高并不是必選像。當(dāng)沒有設(shè)置寬高時(shí)，會(huì)根據(jù)其顯示模式 display 來決定其默認(rèn)寬高。

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

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

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

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

借助這些配置，可以達(dá)到一些當(dāng)窗口大小變化時(shí)，變化到一定程度改變?cè)性氐谋憩F(xiàn)行為，比如某張圖片本來居中顯示，但當(dāng)窗口縮小到比圖片還小時(shí)，圖片就根據(jù)窗口進(jìn)行縮小，此時(shí)就可結(jié)合 max-width 來實(shí)現(xiàn)。

padding

padding：-top –right –bottom -left

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

border

border：-width –style –color

設(shè)置邊框

margin

margin：-top –right –bottom -left

設(shè)置外邊距

注意一點(diǎn)，margin 跟 Android 中的 margin 有些不一樣，對(duì)某個(gè)元素設(shè)置了 margin 后，margin 區(qū)域的大小也算在這個(gè)元素盒子的大小中。

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

另外，margin 通常是用于兄弟節(jié)點(diǎn)間設(shè)置間距，如果要設(shè)置兒子和父親間的間距，建議使用 padding，否則如果父節(jié)點(diǎn)沒有設(shè)置 border 時(shí)，可能效果并不是想要的。

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

標(biāo)簽，瀏覽器通常默認(rèn)給了 margin: 8px

默認(rèn)有設(shè)置 margin-left 和 padding-top

所以，通常都會(huì)有一份 reset.css，來重置這些默認(rèn)屬性值。

6.陰影 box-shadow&text-shadow

你會(huì)看到，我們?cè)?box-shadow 屬性值中有4個(gè)項(xiàng)：

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

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

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

7.顯示模式 display

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

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

而這個(gè)標(biāo)準(zhǔn)的文檔流布局方式就是按照解析 HTML 文檔元素的順序，從頁面頂部開始，從上到下，從左到右，解析一個(gè)元素就繪制一個(gè)元素，解析時(shí)碰到的是行內(nèi)元素，就忽略寬高，允許并排布局繪制，碰到的是塊級(jí)元素，就另一起一行，讓這個(gè)元素霸占父元素中的這一整行。

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

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

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

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

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

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

區(qū)分以及理解行內(nèi)元素和塊級(jí)元素對(duì)于寫網(wǎng)頁布局非常重要，因?yàn)闉g覽器是按照文檔流從上到下，從左到右來進(jìn)行繪制網(wǎng)頁的。

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

但對(duì)于塊級(jí)元素，瀏覽器會(huì)強(qiáng)制讓其霸占一整行，也就是這一行內(nèi)，只能有這個(gè)塊級(jí)元素存在，其他元素不能與其并排。如果沒有設(shè)置寬度，那么就是充滿整行。

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

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

所以，我們?cè)趯?HTML，CSS 時(shí)，腦中就要有個(gè)大概的藍(lán)圖，這些元素大概會(huì)呈現(xiàn)怎樣的排版布局。

一個(gè)元素是行內(nèi)元素還是塊級(jí)元素，可以通過 display 來設(shè)置，如果沒有設(shè)置，那么就是默認(rèn)值，不同元素的默認(rèn)值不同。

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

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

方式有以下幾種：

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

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

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

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

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

另外，并不是說，不允許行內(nèi)塊元素內(nèi)嵌塊級(jí)元素，也是可以的。

8.浮動(dòng) float

float 屬性值通常會(huì)用到這兩個(gè)：left right

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

就像單詞直譯過來：浮動(dòng)

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

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

然后它繼續(xù)處理 div2 元素，因?yàn)橹疤幚淼?div1 元素是浮動(dòng)元素，不占用文檔流，所以此時(shí)仍舊是在第一行左邊繪制 div2 元素，發(fā)現(xiàn)它是一個(gè)塊級(jí)元素，所以讓其霸占一整行。

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

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

所以此時(shí)看到的效果就是，浮動(dòng)元素 div3 是在塊級(jí)元素 div2 下。

繼續(xù)往下處理，如果發(fā)現(xiàn)的還是浮動(dòng)元素，因?yàn)樗械母?dòng)元素都處理同一層面，所有的文檔流元素都處于一個(gè)層面，所有浮動(dòng)元素 div4 并不會(huì)跟 div3 發(fā)生重疊，而是貼著它。

如果接下去處理的元素是塊級(jí)元素，那么此時(shí)的效果會(huì)是怎樣的呢？

如果接下去是塊級(jí)元素，那么它就會(huì)是繪制在浮動(dòng)元素 div3 和 dive4 下面，呈現(xiàn)出重疊的效果。

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

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

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

浮動(dòng)清除

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

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

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

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

浮動(dòng)的不足

浮動(dòng)雖然好用，既可以實(shí)現(xiàn)文字圍繞的效果，又可以實(shí)現(xiàn)多列并排的布局，但它也存在一些不足的地方，上面說的浮動(dòng)清除是其中一點(diǎn)，還有一些問題，如下：

• 整個(gè)寬度可能難以計(jì)算

? 這是因?yàn)槎鄠€(gè)浮動(dòng)元素之間并排顯示的前提的有足夠的空間讓這些元素并排，所以通常對(duì)于浮動(dòng)元素的寬度設(shè)置是通過百分比來設(shè)置，確保多個(gè)并排的元素即使窗口發(fā)生變化仍舊可以并排布局。

? 但，如果元素還需要進(jìn)行內(nèi)邊距，外邊距的設(shè)置，邊框的設(shè)置，因?yàn)檫@些大小都算在盒子的總寬度中，那么最終盒子的大小就變得很難確定，有可能導(dǎo)致某個(gè)浮動(dòng)元素被擠到下一行去。

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

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

? 非浮動(dòng)元素的外邊距不能用于它們和浮動(dòng)元素之間來創(chuàng)建空間，通常我們?cè)俑?dòng)元素之后的非浮動(dòng)元素會(huì)進(jìn)行浮動(dòng)清除，順便設(shè)置外邊距來創(chuàng)建間隔空間，但這時(shí)會(huì)發(fā)現(xiàn)這個(gè)間隔空間失效。解決方法可以在這中間插一個(gè)空的元素，在這個(gè)元素里清除浮動(dòng)，也就是所說的隔墻法。

9.位置 position

position 屬性值有三個(gè)：absolute, relative, fixed

三種雖然是不同的定位模式，但其實(shí)說白了，就是參考點(diǎn)不同。

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

releative 相對(duì)定位

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

這點(diǎn)跟 Android 中的 ReleativeLayout 布局不一樣，需要注意一下。

另外，相對(duì)定位并不會(huì)改變?cè)卦谖臋n流中的位置，也就是這個(gè)元素原本占據(jù)哪個(gè)坑，通過相對(duì)定位微調(diào)之后，仍占據(jù)那個(gè)坑，只是視覺上它發(fā)生了移動(dòng)而已。有點(diǎn)類似 Android 中的 View 動(dòng)畫。

應(yīng)用場(chǎng)景：

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

通常都是用來給后代使用絕對(duì)定位的，因?yàn)楣潭ǘㄎ缓徒^對(duì)定位都會(huì)導(dǎo)致該元素從文檔流中脫離，就像浮動(dòng)元素那樣，不再占用文檔流的坑位。

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

absolute 絕對(duì)定位

參考的對(duì)象是父類或祖先元素中有使用了position的最近一個(gè)元素。也就是說在父類元素中，不管是使用了相對(duì)定位，絕對(duì)定位，固定定位之后，都可以用來作為后代絕對(duì)定位的參考元素。

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

參考的元素決定了之后，參考點(diǎn)的選取還分兩種情況，參考元素的左上角或者左下角。

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

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

為什么強(qiáng)調(diào)首屏，因?yàn)閰⒖荚氐拇笮】赡苁浅鲆粋€(gè)屏幕的，bottom 并不是說參考元素的左下角坐標(biāo)，也不是當(dāng)前頁面參考元素的左下角坐標(biāo)，而是首屏狀態(tài)時(shí)，也可以理解成，沒有發(fā)生滑動(dòng)前，參考元素在當(dāng)前頁面的左下角坐標(biāo)作為參考點(diǎn)。

舉個(gè)例子：

另外，有點(diǎn)需要注意下，絕對(duì)定位的元素，因?yàn)槠湟呀?jīng)從文檔流中抽離，因此就不存在什么行內(nèi)元素、塊級(jí)元素的限制了。大小就是根據(jù)設(shè)置的寬高、位置就是根據(jù)參考點(diǎn)進(jìn)行調(diào)整后進(jìn)行布局繪制。

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

因?yàn)榻^對(duì)定位是將元素脫離出標(biāo)準(zhǔn)文檔流，那么絕對(duì)定位的元素顯示與否，并不會(huì)影響到原本的文檔流元素，所以，通常一些彈窗框，彈窗控制面板，可在頁面上任意拖放的元素等都會(huì)通過絕對(duì)定位來做。

應(yīng)用：

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

fixed 固定定位

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

應(yīng)用：

• 網(wǎng)頁右下角的返回頂部按鈕

• 頂部導(dǎo)航欄

z-index

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

這個(gè)屬性其實(shí)就是用于當(dāng)元素發(fā)生重疊時(shí)，決定由誰蓋在上面，默認(rèn)值為0，值越大，越上層。

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

浮動(dòng)元素造成的重疊只是盒子上的重疊，并不會(huì)造成元素內(nèi)容上的重疊，那么也就沒有使用 z-index 的必要，因?yàn)橐尸F(xiàn)的內(nèi)容并不會(huì)被覆蓋。

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

• 屬性值大的位于上層，屬性值小的位于下層
• z-index 值沒有單位，就是一個(gè)正整數(shù)。默認(rèn)的 z-index 值是0
• 如果大家都沒有 z-index 值，或者 z-index 值一樣，那么在 HTML 代碼里寫在后面，誰就在上面能壓住別人。定位了的元素，永遠(yuǎn)能夠壓住沒有定位的元素
• 只有定位了的元素，才能有 z-index 值。也就是說，不管相對(duì)定位、絕對(duì)定位、固定定位，都可以使用 z-index 值。而浮動(dòng)的元素不能用
• 從父現(xiàn)象：父親慫了，兒子再牛逼也沒用。意思是，如果父親1比父親2大，那么，即使兒子1比兒子2小，兒子1也能在最上層。

---

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