你不知道的CSS

cnio 發布于2019-08-29 13:19 / 2161人閱讀

摘要：不要忘了給子元素設置字號用來清除浮動除了著名的清除浮動類，利用屬性也可以清除浮動。

本文首發于我的博客

CSS的世界是神奇的。
隨著各瀏覽器WEB標準的日趨統一，CSS在WEB世界中扮演的角色也愈發的重要。甚至于在GitHub上出現了You-Dont-Need-JavaScript這樣Star近萬的優秀開源項目，拋開該項目的實用性不說，項目中的眾多的DEMO就已經證明了CSS的強大。
當然，這篇文章不是為了介紹這個項目，而是整理了一些實用的CSS技巧，來解決我們在實際項目開發中遇到的的問題。文章也會長期更新，總結更多的技巧。每個技巧將結合demo或者圖示來說明（如果demo無法打開，請自備梯子，原因你懂得?）。也許你此刻正在發愁的一個bug可以在這里找到答案?。

用~ / + 兄弟選擇器來美化表單元素

css(3)中選擇器眾多，具體可參考CSS 選擇器參考手冊。不知什么原因，在很多項目中，實現諸如單選，復選等（類似）功能（包括如圖標簽選擇器）時，為了美化其樣式，往往使用JS去實現，實際上，利用label標簽和css的兄弟選擇器完全可以實現類似效果。其兼容性也并不差，至少兼容IE8及其以上瀏覽器了。

選擇器解釋

~ 選擇器：查找某一個元素的后面的所有兄弟元素

+ 選擇器：查找某一個元素的后面緊鄰的兄弟元素

實現類某東標簽選擇器效果

查看demo

.tags-select {
  font-size: 0;
  >.tag-select {
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    position: relative;
    font-weight: normal;
    .name {
      display: block;
      line-height: 20px;
      padding: 8px 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    //設置radio不可見
    input[type="radio"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
      //選中
      &:checked+.name {
        border-color: #e3393c;
      }
      //禁用
      &:disabled+.name {
        background: #eee;
        color: #999;
        cursor: not-allowed;
      }
    }
  }
}


  
  官方標配  


  
  移動優惠購  


  
  聯通優惠購

利用label和選擇器實現form元素的美化，展開來就可以寫一篇博客了，因此，實現input[type="radio"], input[type="checkbox"]的美化以及switch開關控件，就不貼代碼了，具體代碼見我的項目mo-css。

switch開關

查看demo

radio美化

查看demo

checkbox美化

查看demo

用font-size：0 來清除間距

inline-block的元素之間會受空白區域的影響，也就是元素之間差不多會有一個字符的間隙。如果在同一行內有4個25%相同寬度的元素，會導致最后一個元素掉下來（如圖）。你可以利用元素浮動float，或者壓縮html，清除元素間的空格來解決。但最簡單有效的方法還是設置父元素的font-size屬性為0。

*{
  box-sizing: border-box;
}
.items {
  font-size: 0;
  > .item {
    display: inline-block;
    width: 25%;
    height: 50px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
    background-color: #eee;
    font-size: 16px; //不要忘了給子元素設置字號
  }
}

用 overflow 來清除浮動

除了著名的clearfix清除浮動類，利用overflow屬性也可以清除浮動。
overflow除了定義溢出元素內容區的內容會如何處理外，還可以做一些有用的事，如：

創建塊格式化上下文

清除浮動

假如你的案例中沒有對溢出的操作（如下拉菜單），推薦使用overflow:hidden來清除浮動。

.clearfix {
   overflow: hidden; 
}


  left
  right

用border來繪制三角形 原理

為了更清晰的展示border，將盒子的四邊設為不同的顏色。

.border-arrow {
  width: 256px;
  height: 256px;
  border: 48px solid ;
  border-top-color: red;
  border-right-color : blue;
  border-bottom-color: green;
  border-left-color: orange;
}

可以看到是每個邊并不是矩形，而是呈現為等腰梯形（腦洞開一下，同樣我們可以使用該方法繪制梯形），這時候，如果將盒子的寬度和高度設為0，盒子將展現為如下由四個三角形組成的矩形形式：

.border-arrow {
  width: 0;
  height: 0;
  border-width: 96px;
}

現在，思路已經很清晰了，只需要將其他三個邊的顏色設為透明 (transparent 或者 rgba(0, 0, 0, 0)) ，就會只保留一個三角形了。

.border-arrow {
 width: 0;
 height: 0;
 border: 72px solid ;
 border-color : transparent transparent transparent orange ;
}

延伸來繪制一個梯形

就著上面的思路，我們保留盒子寬高值，而是將其他三個邊設為透明，則盒子會呈現為一個梯形：

.border-arrow {
  width: 256px;
  height: 256px;
  border: 64px solid ;
  border-color : red transparent transparent transparent ;
}

用垂直方向的padding來實現等比縮放的盒子

固定圖片百分比是一個針對響應式布局很有效的方案，尤其是在移動端，可以說是一個剛性需求。簡單來說，就是根據容器的寬度，按照寬高比例自動計算出容器的大小，并且讓容器內的如img等子元素自適應寬高。

需求

移動端的商品列表展示，每行顯示兩個商品，使用懶加載技術來加載商品的縮略圖，需求規定了商品必須有序整齊的排列，并且加載時要使用默認圖片來占位縮略圖，在加載過程中，頁面的高度不能有抖動。當然，縮略圖是大小是UI固定了比例的，假設比例是4:3；此時，你可能的做法是給圖片容器固定高度（圖片可能會變形），或者使用JS，利用屏幕的寬度和圖片比例計算出圖片的高度（要用到JS，要考慮屏幕旋轉后寬度的變化）。

解決方案

不妨考慮考慮如下方案，本博客實驗室列表頁使用了該方案。

圖片父容器寬度100%，父容器的高度百分比為：100*3 / 4 = 75% ; 圖片absolute并且完全鋪滿父容器。

.image-aspect-ratio {
  width: 100%;
  position: relative;
  padding-top: 75%;
   > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;  
  }
}

OK，UI只需要做一張4:3的占位圖，然后利用圖片懶加載技術來在頁面滾動過程中加載商品圖片，加載過程中頁面完全不會抖動，屏幕旋轉后，圖片高度也隨之變化，沒有使用JS，一切完美解決?。

查看demo image-aspect-ratio ，可縮放瀏覽器查看自適應效果。

用pointer-event來禁用事件

pointer-event屬性更像是一個JavaScript事件，利用該屬性，可以做如下的事情：

阻止任何點擊動作的執行

使鏈接顯示為默認光標(cursor:default)

阻止觸發hover和active狀態

阻止JavaScript點擊事件的觸發

//使用該類，任何點擊事件將無效
.disabled { pointer-events: none; }

用max-width來防止圖片撐破容器

針對內容性的文案，圖片大小都是未知的，為了防止圖片過大而撐破容器，可以通過設置圖片的max-width:100%來處理；

img {
  display:inline-block;
  max-width: 100%;  
}

用偽類來顯示打印時a標簽的鏈接

@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

待補充條目

還有許多知識點待補充，受文章長度限制，以下或者更多內容將在新文章中補充。

用counter來模擬/裝飾有序清單

未知高度容器的多種垂直居中方法

參考文檔

Overflow – a secret benefit

CSS實現長寬比的幾種方案

CSS pointer-events

本文首發于我的博客

云服務器 GPU云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

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

你不知道的CSS（三）

摘要：本文首發于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實用的技巧。系列文章你不知道的一你不知道的二本文首發于我的博客本文首發于我的博客在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實用的技巧。相信這些技巧會為大家在項目實踐中帶來一定的幫助，本文作為《你不知道的CSS》系列的第三篇...

xiangzhihong 2019-08-29 13:28 評論0 收藏0
【譯】一些你不知道的CSS屬性

摘要：目前，和不支持該屬性，但不久后就會改變。承諾支持該屬性，值得期待等支持該屬性。在知乎的一個專欄上介紹了三個奇淫技巧，很有用，補充在此文后面關于幾乎沒人知道的件事英文原文譯文出處一些你不知道的屬性 Box-sizing 盡管box-sizing在CSS3中才被引入，其有一個值是border-box，讓元素的高和寬包含了填充和邊框。 .div { width: 150px; ...

U2FsdGVkX1x 2019-08-28 18:09 評論0 收藏0
你不知道的層疊樣式表

摘要：層疊樣式表層疊規則你或許知道是層疊樣式表的縮寫。但你不一定真正的理解了其中層疊的含義。用戶自定義樣式雖然規范中有，但從起，開始不支持用戶自定義樣式表，而是建議使用擴展來實現。網站提供的樣式表，則是我們所提供的的樣式。即不為的元素的計算值為。層疊樣式表層疊規則你或許知道 CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫。但你不一定真正的理解了其中層疊的含...

Bryan 2019-08-29 16:59 評論0 收藏0
你不知道的CSS（二）

摘要：用來控制表格單元格寬度你也許遇到過給表格設置了寬度，但是不起作用的問題。這是因為單元格的寬度是根據其內容進行調整的。顯而易見的，默認情況下，單元格寬度受其內容約束。而設置了后，其單元格寬度變得可控了。本文首發于我的博客在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動，border繪制三角形等7個實用技巧。由于文章長...

sewerganger 2019-08-29 13:22 評論0 收藏0
你不知道的css技巧

摘要：支持算法和是與這次寬度和高度的最大值或最小值有關，取決于哪個更大和更小。例如，如果瀏覽器設置為寬高，會是為。然而，如果寬度設置為，高度設置為，將會等于而將會是。禁用鼠標事件 css黑科技 currentColor當前顏色返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...

lpjustdoit 2019-08-02 15:59 評論0 收藏0