記錄一些CSS的實用技巧

隱藏元素 display 和 visibility

display: none    
隱藏對象，隱藏後，原本的位置會消失，會被其餘文檔流頂替

display: block
除了是轉換爲塊級元素，還有顯示該元素的意思

visibility: hidden
使用該屬性隱藏元素後，原本的位置保存，元素保留該位置，空白顯示

visibility: visible
顯示隱藏元素

神奇的 overflow

overflow: visible
不剪切內容也不添加滾動條

overflow: hidden
不顯示超過對象尺寸的內容，超出的部分隱藏掉

overflow: scroll
無論是否是超出內容，都顯示滾動條

overflow: auto
超出自動顯示滾動條，不超出不顯示滾動條

垂直對齊 vertical-align

該屬性不影響塊級元素中的內容對齊，它只針對於行內元素和行內塊元素，特別是行內塊元素，一般用來控制圖片、表單和文字的對齊

vertical-align: baseline
垂直於基線對齊

vertical-align: top
垂直於頂線對齊

vertical-align: middle
垂直於中線對齊

vertical-align: bottom
垂直於底線對齊

 

溢出的文字用省略號顯示

當須要設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出：

text-overflow: clip
不顯示省略標記，裁切多餘的文字

text-overflow: ellipsis
當對象內文本溢出時顯示省略號代替

當須要設置或檢索對象內文本顯示方式。一般咱們使用於強制一行顯示內容：

white-space: normal
默認處理方式

white-space: nowrap
強制在同一行內顯示全部文本，直到文本結束或者遭遇br標籤對象才換行

使用技巧： /*1. 先強制一行內顯示文本*/
      white-space: nowrap;
  /*2. 超出的部分隱藏*/
      overflow: hidden;
  /*3. 文字用省略號替代超出的部分*/
      text-overflow: ellipsis;