閱讀865 返回首頁    go 技術社區[雲棲]

你不知道的事兒一（CSS）

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

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

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

某東標簽選擇器某東標簽選擇器

選擇器解釋

  • ~選擇器：查找某一個元素的後麵的所有兄弟元素
  • +選擇器：查找某一個元素的後麵緊鄰的兄弟元素

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

Run demo

查看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 class="tag-select">
  <input type="radio" name="bye-type" value="1">
  <span class="name">官方標配</span>  
</label>
<label class="tag-select">
  <input type="radio" name="bye-type" value="2" checked>
  <span class="name">移動優惠購</span>  
</label>
<label class="tag-select">
  <input type="radio" name="bye-type" value="3" disabled>
  <span class="name">聯通優惠購</span>  
</label>
css實現標簽選擇器css實現標簽選擇器
利用label和選擇器實現form元素的美化，展開來就可以寫一篇博客了，因此，實現input[type="radio"], input[type="checkbox"]的美化以及switch開關控件，就不貼代碼了，具體代碼見我的項目mo-css。

switch開關

查看demo

css實現switchcss實現switch

radio美化

查看demo

css美化radiocss美化radio

checkbox美化

查看demo

css美化checkboxcss美化checkbox

用FONT-SIZE：0來清除間距

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

font-size:0消除空白間隙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; //不要忘了給子元素設置字號
  }
}

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

用 OVERFLOW 來清除浮動

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

  • 創建塊格式化上下文
  • 清除浮動
overflow:hidden 清除浮動overflow:hidden 清除浮動

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

.clearfix {
   overflow: hidden; 
}

<div class="clearfix">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

用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;
}
border在盒模型中的真實樣式border在盒模型中的真實樣式
可以看到是每個邊並不是矩形，而是呈現為等腰梯形（腦洞開一下，同樣我們可以使用該方法繪製梯形），這時候，如果將盒子的寬度和高度設為0，盒子將展現為如下由四個三角形組成的矩形形式：
.border-arrow {
  width: 0;
  height: 0;
  border-width: 96px;
}
寬高為0時，border的展現形式寬高為0時，border的展現形式

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

.border-arrow {
 width: 0;
 height: 0;
 border: 72px solid ;
 border-color : transparent transparent transparent orange ;
}
css實現三角形css實現三角形

延伸來繪製一個梯形

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

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

用垂直方向的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;  
  }
}

 <figure class="image-aspect-ratio">
    <img src="https://via.placeholder.com/640x384">
 </figure>

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

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

Run demo

用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來模擬/裝飾有序清單
  • 未知高度容器的多種垂直居中方法

參考文檔

同步分享

幫忙點個喜歡/收藏，支持下

最後更新：2017-11-03 10:34:00

  上一篇：go  互聯網模式下的測試數據中心，小白也能高效構造數據
  下一篇：go  你不知道的事兒二（CSS）