css常用小技巧

zhangyucha0 發布于2019-08-29 13:48 / 2072人閱讀

摘要：注意上的一些缺陷行為。使用負選擇元素在使用負選擇到的元素。表格單元格等寬使用表格會很痛苦，因此使用來保持單元格相同的寬度無痛表格布局。漂亮的背景漸變色引用前端開發者應該知道的小技巧黑魔法小技巧，讓你少寫不必要的，代碼更優雅

為body添加行高

你不需要分別為每一個

, 等元素添加行高，而是為body添加:

body {
     line-height: 1;
}

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

使用: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選擇器按照人類描述它的方式定義邊框。

垂直居中任何元素

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

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圖標

.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。

繼承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%;
}

現在列約束總是等間隔出現。

漂亮的背景漸變色

body{
    background-image: linear-gradient(-25deg,#70FFA8 0,#00D3FF 61%,#29A2FF 100%)
}

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

*CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅*

云服務器 GPU云服務器 css技巧小技巧小技巧全集 PowerShell小技巧

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

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

一丟丟前端常用的小技巧

摘要：獲取節點只能運用到上返回找到的元素節點速度是最快的能運用到所有元素節點上返回一個類數組的集合同上能運用到所有元素節點上返回第一個匹配的元素參數是標準的選擇器能運用到所有元素節點上返回一個類數組的集合參數是標準的選擇器操作獲取或設置元素的返回獲取DOM節點: document.getElementById(): 只能運用到document上, 返回找到的元素節點, 速度是最快的; d...

missonce 2019-08-21 13:32 評論0 收藏0
CSS小技巧收藏

摘要：居中對齊很多時候我們需要把一個元素在其父級容器里水平垂直居中對齊。這是一個非常不錯的習慣，但常常只有字體粗細大小的不同，在這里我們為每個章節加上這樣的標注。以下代碼在容器內有效。最后更新于：2016-01-22 17:30 以下是我積累的一些常用的css代碼，會不斷更新，最新的代碼會顯示在最前面，同時我也會提供最新更新日期以便查閱。鏈接樣式 a:link { color: red;...

FWHeart 2019-08-30 12:44 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

MudOnTire 2019-08-21 18:25 評論0 收藏0