我不知道的css

如下是從張鑫旭的博客中摘過來的

1.修改圖標顏色的方法 (原文：https://www.zhangxinxu.com/wordpress/2018/11/css-change-icon-color/)

　　css：

.colorful {
    display: inline-block;
    width: 32px; height: 32px;
    background-color: #f4615c;
    -webkit-mask: url('http://static.fdc.com.cn/homem/images/tpl/location.svg') no-repeat;
    mask: url('http://static.fdc.com.cn/homem/images/tpl/location.svg') no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

html：<span class="colorful" ></span>

使圖標變成黑色或白色的css代碼爲：黑filter: brightness(0);   白 filter: brightness(1);

2.關於頁面平滑滾動的 https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8/

　　2.1 tab內平滑滾動

　　scss：

.img-wraper{
  width:100%;
  margin:0 auto;
  height:200px;
  scroll-behavior: smooth;
  overflow: hidden;
}
.img-item{
  width:100%;
  height:100%;
  position: relative;
  overflow: hidden;
  input{
    position: absolute; 
    top:0; 
    height: 100%; width: 1px;
  }
  img{
    width:100%;
    height:100%;
  }
}

html：

　<div class="label-wraper">
    <label class="label" for="jp1">選項卡1</label>
    <label class="label" for="jp2">選項卡2</label>
    <label class="label" for="jp3">選項卡3</label>
  </div>
  <ul class="img-wraper">
    <li class="img-item" >
      <input id="jp1">
      <img src="./images/bg1.jpg">
    </li>
    <li class="img-item" >
      <input id="jp2">
      <img src="./images/bg2.jpg">
    </li>
    <li class="img-item" >
      <input id="jp3">
      <img src="./images/bg3.jpg">
    </li>
  </ul>

 獲取段落裏的第一個字符可以使用::first-letter

三、用右至左，從上至下的文本排列方式，css代碼以下

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
    *writing-mode: tb-rl;
}

 四、 https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/

　　postion:sticky 能夠看做是position:relative和position:fixed的結合體——當元素在屏幕內，表現爲relative，就要滾出顯示器屏幕的時候，表現爲fixed

　　兩個關鍵點：

1. 定位用的bottom，效果和top正好是對立的。設置top粘滯的元素隨着往下滾動，是先滾動後固定；而設置bottom粘滯的元素則是先固定，後滾動；（設置bottom時，bottom的值是相對於瀏覽器窗口的。若值較小，在本該文檔流豎排下來的下方時此值失效，按照文檔流來。）
2. z-index:-1讓網友評論footer元素藏在了content的後面，因而纔有了「猶抱琵琶半遮面」的效果。
   
   

五、不定高的容易展現與隱藏添加動畫

.parent{
    &.open{
            .chapter_list_box{
                transform:scaleY(1);
                height: auto;
                transition: all 0.5s ease;
            }
        }
}
.chapter_list_box{
            transform:scaleY(0);
            height: 0;
            overflow: hidden;
            transition: all 0.5s ease;
        }

 若只想利用高度來作動畫，height值不能爲auto，須要是一個固定的值才能生效。