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

時間 2019-11-13

原文原文鏈接

使用:not()去除導航上不須要的邊框html
爲body添加行高web
垂直居中任何元素瀏覽器
逗號分離的列表ide
使用負nth-child選擇元素svg
使用SVG圖標學習
文本顯示優化字體
在純CSS幻燈片上使用max-heightflex
繼承box-sizing優化
表格單元格等寬flexbox
使用Flexbox擺脫邊界Hack
使用屬性選擇器選擇空連接

使用: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繼承。

垂直居中任何元素

 1 html, body {
 2   height: 100%;
 3   margin: 0;
 4 }
 5  
 6 body {
 7   -webkit-align-items: center;  
 8   -ms-flex-align: center;  
 9   align-items: center;
10   display: -webkit-flex;
11   display: flex;
12 }

注意：IE11上flexbox的一些缺陷行爲。

逗號分離的列表

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

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

使用負 nth-child 選擇元素

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

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

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

使用SVG圖標

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

SVG對全部分辨率類型具備良好的伸縮性，IE9以上的全部瀏覽器都支持。因此放棄.png，.jpg或gif-jif等任何文件。

注意：若是你使用SVG圖標按鈕，同時SVG加載失敗，下面能幫助你保持可訪問性：

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

文本顯示優化

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

1 html {
2   -moz-osx-font-smoothing: grayscale;
3   -webkit-font-smoothing: antialiased;
4   text-rendering: optimizeLegibility;
5 }

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

在純CSS實現的內容滑塊上使用max-height

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

1 .slider ul {
2   max-height: 0;
3   overlow: hidden;
4 }
5  
6 .slider:hover ul {
7   max-height: 1000px;
8   transition: .3s ease; /* animate to max-height */
9 }

繼承box-sizing

1 html {
2   box-sizing: border-box;
3 }
4  *:before, *:after {
5   box-sizing: inherit;
6 }

表格單元格等寬

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

使用Flexbox擺脫邊界Hack

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

1 .list {
2   display: flex;
3   justify-content: space-between;
4 }
5  
6 .list .person {
7   flex-basis: 23%;
8 }

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

使用屬性選擇器選擇空連接

顯示沒有文本值可是 href 屬性具備連接的 a 元素的連接：

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

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

對話框

1 <div class="test-div"></div>
2 <p>完整的一個對話框樣式呈如今眼前了，至於對話框的小三角形的方向，相信你們看了上上段對於border介紹的代碼也都知道該怎麼作了吧，沒錯，就是改下position的位置，改下border顯示顏色的方位~</p>

 1 .test-div{
 2                 position: relative;
 3                 width:150px;
 4                 height: 36px;
 5                 border:black 1px solid;
 6                 border-radius:5px;
 7                 background: rgba(245,245,245,1)
 8             }
 9             .test-div:before,.test-div:after{
10                 content: ""; /* :before和:after必帶技能，重要性爲滿5顆星*/
11                 display: block;
12                 position: absolute;  
13                 top:8px;
14                 width: 0;
15                 height: 0;
16                 border:6px transparent solid;
17             }
18             .test-div:before{
19                 left:-11px;
20                 border-right-color: rgba(245,245,245,1);/*控制箭頭方向*/
21                 z-index:1
22             }
23             .test-div:after{
24                 left:-12px;
25                 border-right-color: rgba(0,0,0,1);
26                 z-index: 0
27             }