你不知道的CSS（二）

sewerganger 發布于2019-08-29 13:22 / 2681人閱讀

摘要：用來控制表格單元格寬度你也許遇到過給表格設置了寬度，但是不起作用的問題。這是因為單元格的寬度是根據其內容進行調整的。顯而易見的，默認情況下，單元格寬度受其內容約束。而設置了后，其單元格寬度變得可控了。

本文首發于我的博客
在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動，border繪制三角形等7個實用技巧。由于文章長度限制，還遺留了一些技巧沒有介紹，考慮到日后可能會有更多的技巧需要補充進來，便將上文改名為你不知道的CSS（一），名字其實有點浮夸，希望能完善為一個系列，也希望該系列中介紹的技巧能夠幫助到更多人解決實際開發中遇到的問題。在這里感謝SegmentFault的小編在微博上的推薦。本文將重點介紹CSS中未知高度容器的垂直居中技巧。同樣每個技巧將結合demo或者圖示來說明（如果demo無法打開，請自備梯子，原因你懂得?）。

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

在已知父子高度的情況下，實現垂直居中是很容易的事。margin ， padding，absolute + 負margin , 甚至于 line-height都是可行的方案。這里不再展開，文章主要來介紹在父容器高度固定，自容器高度自適應的情況下，來實現其垂直居中于父級盒子的幾種方案。為了使案例更真實，我們來模擬一個垂直居中于頁面中的彈出層(modal)。

先運行下Demo 過過癮?……

定義如下模態框的基本樣式（部分樣式使用bootstrap）

.vh-modal {
  height: 640px;
  border: 1px solid #ccc;
  position: relative;
  .vh-modal-content {
    min-width: 50%;
    max-width: 80%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .vh-modal-title {
    padding: 20px;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    margin: 0;
  }
  .vh-modal-body {
    padding: 20px;
    text-align: left;
  }
  .vh-modal-foot {
    text-align: right;
    padding: 20px;
    border-top: 1px solid #ccc;
  }
}

（偽）元素占位方案推薦

利用（偽）元素和display:inline-block的方案來實現垂直居中是我個人常用的也是推薦大家使用的方法。

.vh-modal-1 {
  text-align: center; //水平居中
  font-size: 0; //消除空隙, 見 https://smohan.net/blog/6gr77h
  &::before,
  >.vh-modal-content {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
  }
  &::before {
    content: "";
    height: 100%;
  }
}


  
    模態框
    ...

如上圖中的::before你也可以使用一個真實的元素代替。

absolute + transform方案

使用absolute絕對定位子元素，并且設置其top:50%; left:50%，然后再利用css3的transform: translate(-50%, -50%); 設置負值偏移回來也是一種有效的垂直居中方案，但要注意其兼容性以及不要將子容器置于父容器半個像素的位置上(如500.5px)，否則子容器會出現模糊。

.vh-modal-2 {
  >.vh-modal-content {
    //盡可能的不要讓該元素的寬度或者高度出現奇數，否則可能會導致模糊
    display: inline-block; //為了自適應寬度，可以固定寬度
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

transform法還有一個缺點，就是當子容器高度超出視窗高度的時候，它會被直接截斷（如下圖），而不是想象中的隨著瀏覽器滾動到頂部而滾動顯示完全（模態框的頭部被截掉了）。

table-cell方案

使用div來模擬table的行為也可以實現垂直居中。缺點是要在子容器外層再包裹一個父元素vh-modal-cell用來模擬table-cell。

.vh-modal-3 {
  display: table;
  width: 100%;
  .vh-modal-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .vh-modal-content {
    display: inline-block;
  }
}

...

基于flex的方案 強烈推薦

毫無疑問，flex盒模型是最佳的實踐方案。目前幾乎所有現代瀏覽器都支持flex布局，尤其是移動端（部分機型UC瀏覽器效果太差，差評?）。
基于flex盒模型的水平垂直居中有如下兩種方案：

...

align-items & justify-content方案

.vh-modal-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  >.vh-modal-content {}
}

flex + margin方案

這個方案是最神奇的，僅僅給子元素設置了margin:auto;屬性，一切就這么發生了?。

.vh-modal-5 {
  display: flex;
  margin: 0;
  >.vh-modal-content {
    margin: auto;
  }
}

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

就如截圖中圈出的那樣，類似這種多層級的數字，我們大概第一反應是使用JavaScript循環列表，利用其index拼接而成的。事實上，僅僅使用css的counter屬性也可以實現該功能，甚至實現起來更高效。博客的【熱門文章】欄目的索引就是使用counter屬性實現的。

ol {
  counter-reset: decimal;
  list-style-type: none; //去掉默認的list-style 
  li {
    &::before {
      counter-increment: decimal;   
      content: counters(decimal, ".") " ";
    }
  }
}

就像圖上那樣，我們很早就已經將counter屬性用在真實項目中了，而這僅僅只是counter屬性一個簡單的使用場景，它甚至可以幫助你完成一個簡單的購物車計費場景（如圖，當然，真實項目中沒有人這么干）。

預覽多級別列表和購物車demo

CSS計數器是CSS2.1中自動計數編號部分的實現。作為由CSS維護的變量，counter屬性還有很多有趣的使用場景，具體就不展開了。請參考MDN上的使用CSS計數器章節。

用table-layout來控制表格單元格寬度

你也許遇到過給表格設置了寬度，但是不起作用的問題。這是因為單元格的寬度是根據其內容進行調整的。刨根揭底，是因為表格有個叫做table-layout的屬性，其瀏覽器默認值是auto在作怪。當我們把這個值設置為fixed的時候，我們給th/td標簽設置的寬度就起作用了。用法很簡單：

table {
 table-layout: fixed;
 width: 100%;
}

截圖是設置table-layout: fixed;前后對比圖，左邊用藍色標注的是默認行為的表格，右邊是設置了table-layout: fixed;后的樣式。顯而易見的，默認情況下，單元格寬度受其內容約束。而設置了table-layout: fixed;后，其單元格寬度變得可控了。預覽demo

用caret-color來自定義光標的樣式

在文本框中input/textarea中如果要改變光標的顏色，可以通過設置文本的顏色color:#f00來搞定。但是假如我們只想改變光標的顏色，而不想改變文本的顏色的話，caret-color屬性是一個實現方案。預覽demo

input,
textarea,
[contenteditable] {
  caret-color: red;
}

用user-select來禁用文本選中

在遠古時代，如果你不想讓別人選中你頁面的內容，JavaScript是不可或缺的。而在文明社會中，只需要一句user-select:none的CSS樣式就可以解決。IE6-9不支持該屬性，可以通過給body添加 onselectstart="return false;"的內聯JavaScript語句搞定。

body{
  user-select: none; //頁面中的文本不能被選中
}

參考文檔

Centering in the Unknown

caret-color

本文首發于我的博客

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

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

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

你不知道的CSS（三）

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

xiangzhihong 2019-08-29 13:28 評論0 收藏0
你不知道的Virtual DOM（二）：Virtual Dom的更新

摘要：變化的只有種更新和刪除。頁面的元素的數量隨著而變。四總結本文詳細介紹如何實現一個簡單的算法，再根據計算出的差異去更新真實的。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的兩大前端框架，React 和 Vue，都不約而同的借助 Virtual DOM 技術提高頁面的渲染...

testbird 2019-08-23 11:29 評論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黑科技 currentColor當前顏色返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...

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