CSS那些事兒

sarva 發布于2019-08-30 15:44 / 2298人閱讀

摘要：利用實現居中對齊首先需要父元素有固定的或者。比如如果想要讓實現橫向居中對齊，首先應該設置其父元素的，然后在文件中設置的值為被父元素包裹著的子元素可能會占據空間過大而超過父元素的容納范圍，此時可以通過設置的值來進行調整。

多個class:

css中允許多個class：

...

。

選擇器： Chaining Selectors：

舉例：如果同時有一個p元素和一個h1元素下都有一個class = uppercase，那么可以通過在類名前添加它的父類來加以區分：
注意：兩個元素之間沒有空格。(類似的，background-image: url(圖片地址)，url和后面的括號之間也不能有空格）

h1.special {

}

嵌套元素：


   ... 
   ... 
   ...

想要設置

...

的css樣式，可以通過嵌套元素的設置方法設置：

.main-list li {

}

一次選中多個選擇器，并進行css格式化：

h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}

同時選中：

h1, 
.menu {
  font-family: Georgia;
}

通過用逗號分隔.h1和.menu，這兩個類都會被相應的css格式修飾。

CSS 視覺規則：

CSS declarations are structured into property and value pairs.
CSS語句都是屬性和值相對應的結構。
font-family定義了元素的字體。
font-size 控制文字顯示的大小。
font-weight 定義文字的粗細程度。
text-align屬性控制文字的對齊方式，可以取的分別為：left, right, center。
文字可以有兩種顏色屬性：前景色——color和背景色——background-color。color控制文字的顏色，background-color控制文字的背景色。
CSS中可以用opacity屬性來令某個元素透明。
CSS中也可以通過 background-image 屬性來設置某個元素的背景為一張圖片。

盒模型： border屬性：

除了顏色、邊框樣式、邊框大小之外，還可以調節邊框的圓角大小，單位也是px：

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid rgb(22, 77, 100);
  border-radius: 100%;
}

padding屬性：

可以分別聲明padding-top、padding-right、padding-bottom以及padding-left的值。
同時也可以直接聲明padding: 3px 4px 5 px 6px，順序分別是上、右、下、左。
使用上面這種寫法時，所有邊的padding數值都必須寫明。
不過，如果上下、左右的padding值是相等的，也可以寫作：
padding: 5px 10px，這代表上下的padding都是5px，而左右的padding都是10px。

margin屬性：

margin和padding類似，也有margin-top、margin-right、margin-bottom、margin-left。
同樣可以寫作
margin: 10px 20px 10px 2opx;或者margin: 10px 20px;，表示上下邊距為10px，左右邊距為20px。
margin的疊加有一點特殊：
水平方向的疊加就是簡單的數字疊加。例如，如果左邊盒子margin-right = 10px;，而右邊盒子的margin-left = 20px;，那么這兩個盒子放置在一起時，他們交界處的margin= 10 + 20 = 30px;。
而豎直方向的情況則有所不同，對于疊放的兩個盒子，如果上面盒子的margin-bottom = 30px;，而下面盒子的margin-left = 20px;，則交界處的margin值為：30px。
利用margin實現居中對齊：
首先需要父元素有固定的width或者height。比如如果想要讓div1實現橫向居中對齊，首先應該設置其父元素div0的width= 400px，然后在css文件中設置div1的margin值為：margin: 0 auto;

overflow:

被父元素包裹著的子元素可能會占據空間過大而超過父元素的容納范圍，此時可以通過設置overflow的值來進行調整。
overflow的值可以為：scroll、hide、display。

display屬性：

可以利用display屬性來設置HTML元素的顯示方式。
可以設置為：none, block, inline-block, inline。
none表示元素不顯示；
block表示顯示為塊級元素；
inline表示顯示為行內元素；
inline-block表示顯示為行內塊級元素。
塊級元素和行內塊級元素可以設置width height屬性，
而行內元素則不能。
注：一旦給元素加上absolute或float就相當于給元素加上了display:block;。

position屬性:

static

fixed

relative

absolute

1. static屬性：
static是html元素的默認position值，也就是按照正常的文檔流排列。
2. fixed屬性：
fixed的效果參見各種定在網頁上的廣告。
3. relative屬性：
relative的元素是相對于自己的default position來定位的。

第一塊
第二塊
第三塊


.first {
  background-color: red;
  color: white;
}

.second {
  background-color: green;
  color: white;
}

.third {
  background-color: blue;
  color: white;
}

3.1 默認情況下：

3.2 當設置第二塊div的position屬性為relative時：

.second {
  background-color: green;
  position: relative; //relative定位
  color: white;
}

可以看到與默認情況并無區別，
這是因為沒有指定目標HTML元素相對其default position的偏移量。

3.3 指定偏移量之后：

.second {
  background-color: green;
  position: relative;
  color: white;
  left: 20px;
  top: 20px;
}

3.4 添加margin/padding值：
雖然單純地偏移并不會影響下面的第三塊div，但是如果設置第二塊div的padding或margin值，還是會影響到第三塊div在文檔中的位置。

.second {
  background-color: green;
  position: relative;
  color: white;
  margin-bottom: 40px; //增加底部40px的margin，觀察div3的位置變化
  padding-bottom: 10px; //增加底部10px的padding，觀察div3的位置變化
  left: 20px;
  top: 20px;
}

4. absolute定位：
4.1 只設置position：absolute而不設置偏移量：

.first {
  background-color: red;
  color: white;
  height: 40px; //為方便觀察，把div1的高度設為40px；
}

.second {
  background-color: green;
  color: white;
  position: absolute; //設置div2的position: absolute;

}

.third {
  background-color: blue;
  color: white;
  height: 40px;  //為方便觀察，把div3的高度設為40px；
}

結果：

4.2 設置偏移量：
4.2.1只設置left偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px; // 只設置left偏移40px
}

結果：
![[可以看到，div2向右偏移了40px，這樣似乎和relative定位并無不同，但區別在設置top偏移量之后就一目了然了]
](https://upload-images.jianshu...
4.2.2同時設置left偏移量和top偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px;
  top: 10px; //同時設置left偏移量和top偏移量
}

結果：

事實上，absolute屬性就是要配合relative屬性使用才能更好發揮作用的：
例如，想要在div3的任意位置顯示一個“發送”按鈕：

第一塊
第二塊

第三塊

.third {
  background-color: blue;
  color: white;
  height: 40px;
  position: relative; //relative定位
}

.send-button {
  position: absolute; //absolute定位
}

設置“發送按鈕”的偏移量：

.send-button {
  position: absolute;
  top: 20px;
  left: 80px;
}

結果：

float：

通過float屬性，可以使HTML元素脫離正常的文檔流，豎直方向上將不再占用文檔的空間，不過水平方向上不變。
比如可以利用這一特性，讓序列橫向排列:
HTML文件：


  
    語文
    英語
    數學

CSS文件：

.backPanel {
  background-color: gray;
  padding: 10px;
}

默認情況下的結果：

利用float屬性來ul元素橫向排列：

.backPanel {
  background-color: gray;
  padding: 10px;
}

li {
  list-style: none; //去掉了無序列表的小黑點
}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center; 
  background-color: white; //以上稍微調整了一下ul元素的樣式
  float: left; // 設置ul元素向左浮動
}

結果：

此時只需要設置一下backPanel的height即可：

.backPanel {
  background-color: gray;
  padding: 10px;
  height: 80px; //看起來是包住了，其實是鋪在下面了
}

float屬性雖然在豎直方向上不占空間了，但不會脫離文檔流：

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

語文

英語

數學

li {
  list-style: none;
}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center;
  background-color: black;
  color: white;
  float: left;
}

比如現在ul元素都沒有父元素包裹了，上面只有一個

元素，float之后的ul元素并不會“飛到”文檔頂端去：

顏色值(color)：

css中的color從類型上可以分為color (前景色)和background-color：

H1
h1 {
  color: white; //前景色
  background-color: black;  //背景色
}

效果：

css中的color從表現方式上可以分為三種：

十六進制表示法；

rgb表示法（還可以拓展為rgba表示法，a表示alpha，指的是opacity——不透明度）；

hsl表示法（還可以拓展為hsla表示法，a同上）。

舉例：

hex
rgb
rgba
hsl
hsla

.hex {
  background-color: #FFAA00;
  height: 80px;
  width: 80px;
}

.rgb{
  background-color: rgb(222, 22, 2);
  height: 80px;
  width: 80px;
}

.rgba {
  background-color: rgba(222, 22, 2, 0.2);
  height: 80px;
  width: 80px;
}

.hsl {
  background-color: hsl(180, 60%, 90%); //注意百分號
  height: 80px;
  width: 80px;
}

.hsla {
  background-color: hsla(180, 60%, 90%, 0.4); 
  height: 80px;
  width: 80px;
}

結果：

附上各種能叫得名字來的顏色值：有名字的顏色值。

排版： 設置字體：

font-family: 字體名稱;

設置字體權重：

font-weight: bold | normal;
也可以用數值來表示，數值的范圍為[100, 900]且必須是100的整數倍。

400 is the default font-weight of most text.

700 signifies a bold font-weight.

300 signifies a light font-weight.

舉例：

中
中
中

.default {
  font-weight: 400;
}

.bold{
  font-weight: 700;
}

.light{
    font-weight:300;
}

It"s important to note that not all fonts can be assigned a numeric font-weight. You can look up the font you are using to see which font-weight values are available.

設置字體風格：

font-style: italic; ——斜體；

設置文字大小寫：

text-transform: uppercase | lowercase;

設置文字對齊方式：

text-align: left | right | center;

設置行高：

Another property that we can set for text is line-height. This property modifies the leading of text.
The diagram beneath helps illustrate exactly what the terms "leading" and "line height" mean.

舉例：

p {
  line-height: 1.4;
}

后備字體(fallback fonts):

h1 {
  font-family: "Garamond", "Times", serif;
}

以上CSS語句的意思是：

對網頁上所有的

元素優先使用 Garamond 字體；

如果Garamond 字體不存在，那么就用 Times 字體；

如果以上兩種字體在目標客戶端上都沒有，那么就使用該客戶端上存在的任意一種襯線字體(serif)。

注：
相對應地，也存在非襯線字體：sans-serif fonts;

CSS 網格(grid)： 創建網格：

.grid {
  width: 1080px;
  height: 500px;
  display: grid;
}

定義網格列grid-template-columns：px | %;

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
}

grid-template-columns: 100px 200px;的意思是：將此網格分為兩列。
其中，第一列的width = 100px，第二列的width = 200px。
寬度的單位也可以不是px，可以用百分數表示：

.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}

上面grid的寬度是1000px，所以第一列的寬度是1000 * 20% = 200px；同理，第二列的寬度是500px。
也可以混用px和%：

.grid {
  border: 1px solid black; //給grid一個邊框以更好地表現 其中的元素會超出grid的界限
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px; // 也可以混用`px`和`%`
}

.item {
  background-color: gray;
}

這3列中，第一列width為20px，第二列為100 * 40% = 40px，第三列width為60px。
注意：也就是說，總寬度20 + 40 + 60 = 120px，超過了100px，元素會超出grid的界限。

定義網格行grid-template-rows: px | %;

與定義grid columns是類似的:


  A
  B
  C
  D
  E
  F
  G
  H
  I
  J
  K

.grid {
  border: 1px solid black;
  display: grid;
  width: 1000x;
  height: 400px;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

結果：
![grid-template-rows: 25% 25% 25% 25%;表示把grid分成4行，每一行占其height的25%。
](https://upload-images.jianshu...

一句話定義grid的行和列：


  A
  B
  C
  D
  E
  F
  G
  H
  I
  J
  K

.grid {
  display: grid;
  width: 600px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;  //斜杠前面定義“行”， 后面定義“列”
//200px 300px兩行，一行高200px，第二行高300px；
//20% 10% 70% 表示3列，第一列寬500 * 20% = 50px；第二、三列類似。
}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

結果：

fraction (fr):

通過單位fr，我們可以將行和列定義為對grid的length和width的劃分——作用類似于%，但是用%是有超出父容器邊界的風險的，而用fr則不用擔心，因為瀏覽器會自動對grid進行劃分。


  A
  B
  C
  D
  E
  F
  G
  H
  I

.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr; //fr的作用
}

這樣做的優點就是相對于%不用進行繁瑣的計算，且可以確保grid中的item不會超出邊界。
即使是橫向只用fr定義了3行，而實際的數據有5行，也依然不會造成item出界。
下面做一個對比：


  A
  B
  C
  D
  E
  F
  G
  H
  I
  J
  K
  L
  M
  N
  O
  P
  Q



  A
  B
  C
  D
  E
  F
  G
  H
  I

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.next-grid {
  float: left;
  display: grid;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.item {
  background-color: gray;
  text-align: center;
  
}

repeat()函數：

如果行高或列寬相等，可以用repeat()函數來簡化語句：

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-columns: repeat(4, 1fr); //豎直方向等寬的4列
  grid-template-rows: repeat(3, 1fr); //水平方向等高的3行

}

.item {
  background-color: gray;
  text-align: center; 
}

結果：
![grid-template-columns: repeat(4, 1fr); —— 豎直方向等寬的4列
grid-template-rows: repeat(3, 1fr); —— 水平方向等高的3行](https://upload-images.jianshu...
注：
repeat()后面的fr并不是只能有一個：


## minmax函數：
假設有3列，第一列和第三列的列寬都是100px，當瀏覽器的寬度變化時，想要讓中間的那一列的列寬在100px~500px之間變化，則可以設置：

.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-rows: repeat(4, 1fr 2fr);  //一共8行，(1fr + 2fr)的樣式重復4次。 
  grid-template-columns: repeat(3, 1fr 2fr);
}

結果：

設置行間距、列間距，同時設置行、列間距：

.grid {
  display: grid; 
  width: 320px; 
  grid-template-columns: repeat(3, 1fr);  //等寬的3列
  grid-column-gap: 10px; //列間距
}

行間距同理：
grid-row-gap: 10px;
同時設置行、列間距：
grid-gap: 20px 10px; —— 一句話，分別設置行間距為20px，列間距為10px。
注：

It is important to note that grid-gap does not add space at the beginning or end of the grid.

這一簡寫形式并不需要/，如果只提供了一個值，比如：grid-gap: 10px;，則相當于grid-gap: 10px 10px;。

以上都是針對grid本身的，以下語法則是針對grid的item的： 設置item跨行 grid-row-start: 5; grid-row-end: 7;:

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  grid-template: repeat(4, 1fr 2fr) / repeat(4, 3fr 2fr);
  grid-gap: 5px;
}

.a {
  grid-row-start: 5; //設置這個item的起始行是第5行
  grid-row-end: 7; //設置這個item在跨第5、6行，不跨第7行——終止于第7行之前
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

簡寫形式：

.a {
  grid-row: 5 / 7;
}

同理，

設置item跨列：

.item {
  grid-column-start: 4;
  grid-column-end: 6;
}

同樣，也可以寫作：

.item {
  grid-column: 4 /6;
}

利用span屬性來避免“誤差”：

span可以明確地指出希望行或列跨越的距離：
比如，如果想要row從第4行開始，占兩行，就可以直接寫作：

.item {
  grid-row: 4 / span 6;
}

不用grid-row的簡寫形式，也可以寫作：

.item {
  grid-row-start: 4;
  grid-row-end: span 2;
}

當然，span也可以用在grid-row-start之后，瀏覽器會自動為我們計算出結果：

.b {
  grid-row-start: span 3;
  grid-row-end: 3;
}

結果：

對于grid-column，span的用法是完全相同的，不再贅述。

網格區域(grid area)：

可以用一句話聲明一個item占grid的多少行、列，并限定它在grid中的具體位置。

.b {
  grid-area: 2 / 3 / span 2 / span 4;
}

結果：

CSS網格進階屬性： Grid Template Areas:

利用這個屬性，可以先做出一個模板，然后讓各個元素分別去“認領”他們所占的行和列。


  Welcome!
  Links!
  Info!
  Services!
  Contact us!

比如container下面有5個板塊:

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav" 
                       "info services"
                       "footer footer";
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}

先用 grid-template-areas屬性“打好格子",然后各部分元素再利用grid-area屬性將自己“代入”打好的格子中：

header {
  grid-area: head;
} 

nav {
  grid-area: nav;
} 

.info {
  grid-area: info;
} 

.services {
  grid-area: services;
}

footer {
  grid-area: footer;
}

注：
圖中的grid是四行兩列的，當header 和 header并列時，表示header占兩列，此時header將占據整行，即使存在grid gap，依然不會將兩個header分隔開。虛線只是為了便于理解，實際并不存在。

justify-items：

設置grid元素在每個格子中水平方向上的對齊方式。
justify-items屬性可以接收的值為：

start

end

strench

注：這個屬性是container中的，而不是每個item的。

align-items:

設置grid元素在每個格子中豎直方向上的對齊方式：
同樣可以接收以下值：

start

end

strench

注：這個屬性是container中的，而不是每個item的。

justify-content：

設置整個grid在其父容器中，水平方向上的對齊方式：
可以取的值為：

屬性取值	效果
start	aligns the grid to the left side of the grid container
end	aligns the grid to the right side of the grid container
center	centers the grid horizontally in the grid container
stretch	stretches the grid items to increase the size of the grid to expand horizontally across the container
space-around	includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between	includes an equal amount of space between grid items and no space at either end
space-evenly	places an even amount of space between grid items and at either end

main {
  display: grid;
  width: 1000px;
  grid-template-columns: 300px 300px;
  grid-template-areas: "left right"; 
  justify-content: center;
}

align-content：

同理，利用align-content屬性可以設置整個grid在其父容器中，豎直方向上的對齊方式。
原理均與justify-content屬性相似，不再贅述。

Justify Self and Align Self:

利用justify-self、align-self屬性，可以分別設置grid的每個格子中，具體某個item在水平、豎直方向上的對齊方式。

屬性可以取的四種值	效果
start	positions grid items on the left side/top of the grid area
end	positions grid items on the right side/bottom of the grid area
center	positions grid items on the center of the grid area
stretch	positions grid items to fill the grid area (default)

云服務器 GPU云服務器回事兒那些云計算有那些 cdn那些意思

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116111.html

玩兒前端——CSS垂直的那些事兒

摘要：替換元素或任何其他類型的非文本元素會忽略這個值。要對齊的元素的行內框底端再與父元素的底端對齊。往往將元素的垂直中點與父元素基線上方處的一個點對齊。說說自己對行高和垂直對齊的理解行高 line-height屬性是指文本行基線之間的最小距離，而不是字體的大小首先，基線(baseline)指的是英文四線格的倒數第二條線。其次，關于font-size，字體大小受font-size形成...

tigerZH 2019-08-28 18:18 評論0 收藏0
[聊一聊系列]聊一聊百度移動端首頁前端速度那些事兒

摘要：要快，但是我們的服務也必須萬無一失，后續我會分享百度移動端首頁的前端架構設計那么這樣的優化，是如何做到的呢，又如何兼顧穩定性，架構性，與速度呢別急，讓我們把這些優化一一道來。百度移動端首頁的很多就是這樣緩存在客戶端的。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fronte...

The question 2019-06-24 17:50 評論0 收藏0
webpack的那些事兒

摘要：不管是還是，其實都是基于實現的。文件，看名字就知道它是的配置文件。接下來會向外暴露可以指定是環境還是環境。這個有點不一樣的是他依賴一個的配置文件。注意這三個的順序不能錯，是從右往左執行的。到這里，一個小小的腳手架雛形其實就有了。不管是vue-cli還是react-sprite，其實都是基于webpack實現的。試想，如果沒有腳手架，你自己能搭一個嗎？看完這篇博客，讓你明白webpak都有些什...

TNFE 2019-05-23 17:35 評論0 收藏0
[聊一聊系列]聊一聊iconfont那些事兒

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

Markxu 2019-08-29 10:57 評論0 收藏0
[聊一聊系列]聊一聊iconfont那些事兒

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

2501207950 2019-08-19 18:44 評論0 收藏0