我所不注意的那些CSS冷知識，但卻阻止了我作項目的速度

有序無序列表序列號不顯示

咱們經常要遇到的是，不顯示序列號（設置list-style-type:none），但有時由於項目過大，設置了一些通用屬性後，想顯示序號卻怎麼也搗騰不出來,關於list-style-type：none屬性，具體去看W3C標準，下面羅列那些狀況，會阻止序列號顯示的問題；
1：list-style-type:none,規範標準，沒啥討論的；
2：當li標籤border與ul外邊框距離小於1em時，也就是：
width =ul_margin + ul_border + ul_padding + li_margin <1em(爲啥是1em，由於序號字體和文字字體相關)；
3：li標籤設置了overflow屬性且屬性值不爲visible;

結論：因此寫這塊時，要注意本身css初始化樣式的代碼如margin:0這樣的代碼；

塊狀元素默認寬度

display屬性爲block的塊狀元素，width不必定爲父元素寬度的100%

• position屬性爲absolute或fixed；和其上一級元素position是否爲非static無關，就是不繼承其寬度；
• 和第一條相似，當設置了float屬性；
• 當父元素display爲flex佈局，display爲inline-block佈局時，雖然父元素的寬度受子元素撐開，當其子元素的寬度仍是爲父元素寬度的100%；
  另外：能夠關注一下CSS3width的四個新特性：fill-available, max-content, min-content, 以及fit-content，張大神的講解奉上

inline-block間距問題

學會inline-block這個屬性後，float這個神奇的怪物，出鏡率就愈來愈低,但偶然發現,當margin和padding都設置爲0時，塊與塊之間仍是存在間距（大於4px）；百度了一下，原來這裏面學問還真很多；推薦一篇講透了的文章

在頁面中，怎麼完美的控制元素的高度

在 CSS 規範中，有 4 種類型的可用視口單位：

• vw — 1vw 等於視口寬度的 1%
• vh — 1vh 等於視口高度的 1%
• vmin — vw 和 vh 中的較小值
• vmax — vw 和 vh 中的較大值
  簡單來講，它和 px,rem 同樣就是個單位，適當的使用這種單位有時候能出奇效。

視口（viewport），即瀏覽器屏幕大小，也能夠理解手機屏幕有效的可視區域大小，1vw 等於視口寬度的 1%，100vw 即整個視口寬度，同理計算高度。視口單位v更經常使用語高度的控制，若是咱們用height：20%來控制咱們內容的高度，在這個內容以前父元素和body、HTML高度沒有顯示的設置高度，這樣設置則是無效的，但若是咱們想不去設置body或父元素的高度，想直接和使用者的屏幕大小關聯，使顯示的元素和屏幕呈現一個完美的比例，好比黃金分割點啥的，這時候vh這個單位就顯得特別合適。

flex伸縮項目的margin：auto(奇淫技巧)

當學會了flex時，inline-block的出鏡率又愈來愈低，前端真的是不管你跑多快，你永遠跟不上。閒話少扯，當咱們用flex實現下列這種佈局轉換時,

若是咱們css這樣寫：

.headbox{display:flex;justify-content:space-between;margin 0 1rem；}

上面未登錄時，因爲是兩個元素，因此子元素不須要作任何動做，就能夠實現如圖所示的佈局，可是當登錄後，子元素又兩個變爲三個（菜單按鈕、歡迎信息、註銷按鈕）,咱們首先想到的是否是將後面兩個再裝到另外一個box中，可是flex的伸縮項目被設置margin：auto時，就有意想不到的效果,其設置了爲"auto" 的 margin 會合並剩餘的空間。它能夠用來把伸縮項目擠到其餘位置；粘貼下面的源碼能夠本身感覺一下：

<style>
     .flex{display: flex;justify-content: space-between;}
     .right {margin-right: auto;}
</style>       
<div class="flex">
  <button class="right">菜單</button>
   <button>登陸</button>
   <button>註銷</button>
</div>

僞元素的靈活使用

僞元素有不少：其中以hover、first-child、after、before這些最經常使用，用好了hover能夠加強交互的感受，而用好了before，after，則能夠少些好多重複的代碼，特別這些代碼是動態生成的時候，好比，當我要生成這樣一個list清單樣式的時候，以下圖

這個清單有不少相同之處，其格式能夠這樣歸納： 圖標 - 標題 - ‘-’ - 日期 ,因此咱們以標題爲準，利用僞元素，爲其插入圖標和 ‘-’ ，這在寫代碼時，就減小不少重複工做； 但有一個要重點說起的，就是當用僞元素插入一個背景圖時，有兩點須要注意:
1：content：''，雖然只設背景，但這句話還得有；
2:設背景圖片，最好不要直接在content：URL()這樣設置，除非你圖片切的恰好，但仍是不推薦，仍是該採用background設置，利於圖片縮放，如：

.jsimg::before {content:'';background: url('../img/js.png') no-repeat;background-size: 3rem;width:3rem;height:3rem;}

3: 設置背景圖片時width必定要指定；

後續再補充