css部分高級技巧

1.1 overflow 溢出(重點)

• 檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

屬性值	描述
visible	不剪切內容也不添加滾動條
hidden	不顯示超過對象尺寸的內容，超出的部分隱藏掉
scroll	不管超出內容否，總是顯示滾動條
auto	超出自動顯示滾動條，不超出不顯示滾動條

1.2 顯示與隱藏總結

屬性	區別	用途
display	隱藏對象，不保留位置	配合後面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極爲廣泛
visibility	隱藏對象，保留位置	使用較少
overflow	只是隱藏超出大小的部分	1. 可以清除浮動 2. 保證盒子裏面的內容不會超出該盒子範圍

2.1 鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針採用何種系統預定義的光標形狀。

屬性值	描述
default	小白 默認
pointer	小手
move	移動
text	文本
not-allowed	禁止

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

2.2 輪廓線 outline

最直接的寫法是 ：  outline: 0;   或者  outline: none;

一般針對input使用

<input  type="text"  style="outline: 0;"/>

2.3 防止拖拽文本域resize

實際開發中，我們文本域右下角是不可以拖拽

<textarea  style="resize: none;"></textarea>

3. vertical-align 垂直對齊

• 有寬度的塊級元素居中對齊，是margin: 0 auto;
• 讓文字居中對齊，是 text-align: center;

vertical-align 垂直對齊，它只針對於行內元素或者行內塊元素，

vertical-align : baseline |top |middle |bottom 

設置或檢索對象內容的垂直對其方式。

• 注意：

  vertical-align 不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素，

  特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。

3.1 圖片、表單和文字對齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關係了。 默認的圖片會和文字基線對齊。

3.2 去除圖片底側空白縫隙

 

• 原因：

  圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。

  就是圖片底側會有一個空白縫隙。

• 解決的方法就是： 

  • 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊。
  • 給img 添加 display：block; 轉換爲塊級元素就不會存在問題了。
  • 或者float. 

3.3 還會遇到input框 受外層div 的line-height影響，往下移。

需要重設input父元素line-height爲input的高度。

由於input是inline-block屬性。需要設置vertical-align:top。

input {
    border: none;
    vertical-align: top;
    margin: 0;
    padding: 0;
    outline: none;
}