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

本文首發(fā)于我的博客

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

css(3)中選擇器眾多，具體可參考CSS 選擇器參考手冊。不知什么原因，在很多項目中，實現(xiàn)諸如單選，復(fù)選等（類似）功能（包括如圖標(biāo)簽選擇器）時，為了美化其樣式，往往使用JS去實現(xiàn)，實際上，利用label標(biāo)簽和css的兄弟選擇器完全可以實現(xiàn)類似效果。其兼容性也并不差，至少兼容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;
    }
    //設(shè)置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;
      }
    }
  }
}

  
  官方標(biāo)配  


  
  移動優(yōu)惠購  


  
  聯(lián)通優(yōu)惠購  

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

查看demo

查看demo

查看demo

inline-block的元素之間會受空白區(qū)域的影響，也就是元素之間差不多會有一個字符的間隙。如果在同一行內(nèi)有4個25%相同寬度的元素，會導(dǎo)致最后一個元素掉下來（如圖）。你可以利用元素浮動float，或者壓縮html，清除元素間的空格來解決。但最簡單有效的方法還是設(shè)置父元素的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; //不要忘了給子元素設(shè)置字號
  }
}

  
1
  
2
  
3
  
4
 

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

創(chuàng)建塊格式化上下文

清除浮動

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

.clearfix {
   overflow: hidden; 
}

  
left
  
right
  

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

.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;
}

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

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

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

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

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

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

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

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

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

圖片父容器寬度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的占位圖，然后利用圖片懶加載技術(shù)來在頁面滾動過程中加載商品圖片，加載過程中頁面完全不會抖動，屏幕旋轉(zhuǎn)后，圖片高度也隨之變化，沒有使用JS，一切完美解決?。

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

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

阻止任何點擊動作的執(zhí)行

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

阻止觸發(fā)hover和active狀態(tài)

阻止JavaScript點擊事件的觸發(fā)

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

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

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

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

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

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

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

Overflow – a secret benefit

CSS實現(xiàn)長寬比的幾種方案

CSS pointer-events

本文首發(fā)于我的博客