前端開發者應該知道的 CSS 小技巧

一些小技巧讓你的CSS技術更專業

1,使用:not()去除導航上不須要的邊框
2,爲body添加行高
3,垂直居中任何元素
4,逗號分離的列表
5,使用負nth-child選擇元素
6,使用SVG圖標
7,文本顯示優化
8,在純CSS幻燈片上使用max-height
9,繼承box-sizing
10,表格單元格等寬
11,使用Flexbox擺脫邊界Hack
12,使用屬性選擇器選擇空連接

使用:not()添加/去除導航上不須要的邊框
添加邊框…

/* 添加邊框 */
 
.nav li { 
     border-right: 1px solid #666; 
}

…而後去除最後一個元素的邊框…

/* 移除邊框 */
 
.nav li:last-child {
     border-right: none; 
}

…使用僞類 :not() 將樣式只應用到你須要的元素上：

.nav li:not(:last-child) {
     border-right: 1px solid #666;
}

固然，你可使用.nav li + li 或者 .nav li:first-child ~ li， 可是使用 :not() 的意圖特別清晰，CSS選擇器按照人類描述它的方式定義邊框。

爲body添加行高
你不須要分別爲每個 <p>, <h*> 等元素添加行高，而是爲body添加:

body {
     line-height: 1;
}

這種方式下,文本元素能夠很容易從body繼承。

垂直居中任何元素
不，這不是黑魔法，你的確能夠垂直居中任何元素：

html, body {
  height: 100%;
  margin: 0;
}
 
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

想讓其餘元素居中？垂直，水平…任何東西，任什麼時候間，任何位置？CSS-Tricks上有 一個不錯的文章 來作到這一切。
注意：IE11上flexbox的一些 缺陷行爲。

逗號分離的列表
讓列表看起來更像一個真正的逗號分離列表：

ul > li:not(:last-child)::after {
  content: ",";
}

使用僞類:not() ，這樣最後一個元素不會被添加逗號。

使用負 nth-child 選擇元素
在CSS使用負nth-child選擇1到n的元素。

li {
   display: none;
}
 
/* 選擇1到3的元素並顯示 */
 
li:nth-child(-n+3) { 
   display: block;
}

或者，你已經學習了一些關於 使用 :not()，嘗試：

/* select items 1 through 3 and display them */
 
/* 選擇1到3的元素並顯示 */
 
li:not(:nth-child(-n+3)){
  display: none;
}

這很簡單。

使用SVG圖標
沒有理由不使用SVG圖標：

.logo {
  background: url("logo.svg");
}

SVG對全部分辨率類型具備良好的伸縮性，IE9以上的全部瀏覽器都支持。因此放棄.png，.jpg或gif-jif等任何文件。
注意：若是你使用SVG圖標按鈕，同時SVG加載失敗，下面能幫助你保持可訪問性：

.no-svg .icon-only:after {
  content: attr(aria-label);
}

文本顯示優化
有些字體在全部的設備上並非最優顯示，所以讓設備瀏覽器來幫忙：

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

注意：請使用optimizeLegibility。同時，IE/Edge不支持text-rendering。

在純CSS實現的內容滑塊上使用max-height
在純CSS實現的內容滑塊上使用max-height，同時設置overflow hidden：

.slider ul {
  max-height: 0;
  overlow: hidden;
}
 
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease; /* animate to max-height */
}

繼承box-sizing
從html繼承box-sizing：

html {
  box-sizing: border-box;
}
 
, :before, *:after {
  box-sizing: inherit;
}

這讓插件或使用其餘行爲的組件能很容易地改變box-sizing。

表格單元格等寬
使用表格會很痛苦，所以使用table-layout：fixed來保持單元格相同的寬度：

.calendar {
  table-layout: fixed;
}

無痛表格佈局。

使用Flexbox擺脫邊界Hack

當使用列約束時，能夠拋棄nth-，first- 和 last-child的hacks，而使用flexbox的space-between屬性：

.list {
  display: flex;
  justify-content: space-between;
}
 
.list .person {
  flex-basis: 23%;
}

如今列約束老是等間隔出現。

使用屬性選擇器選擇空連接
顯示沒有文本值可是 href 屬性具備連接的 a 元素的連接：

a[href^="http"]:empty::before {
  content: attr(href);
}

這樣作很方便。

瀏覽器支持這些技巧在當前版本的Chrome，Firefox， Safari， 以及Edge， 和IE11能夠工做。