css佈局技巧

CSS用戶界面樣式

1. 滑鼠樣式currsor

   • li{
     cursor：pointer；
     }

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

     • 屬性值	描述
       default	預設
       pointer	小手
       move	移動
       text	文本
       not-allowed	禁止

2. 輪廓線 outline

   • 給表單添加outline：0；或者outline：none；樣式之後，就可以去掉預設的邊框

3. 防止拖拽文本resize

   • textarea{
     resize:none;
     }

vertical-align屬性應用

1. CSS的vertical-align經常設置圖片或者表單（行內塊元素）和文字垂直對齊

2. vertical-align：baseline|top|middle|bottom

   值	描述
   baseline	預設，元素放在父元素的基線上
   top	把元素的頂端與行中最高元素的頂端對齊
   middle	把此元素放置在父元素的中部
   bottom	把元素的頂端與行中最低的元素頂端對齊

3. 解決圖片底部預設空白縫隙問題

   • bug：圖片底部會有一個空白縫隙，原因時行內塊元素回和文字的基線對齊
   • 主要解決方法
     1. 給圖片添加vertical-align：middle| top|bottom等
     2. 把圖片轉換為塊級元素；display：block；

溢出文字省略號代替

1. 單行文本溢出用省略號顯示

   • 先強制一行內文本顯示 white-space：nowrap；
   • 超出部分隱藏 overflow：hidden；
   • 文字用省略號代替超出的部分 text-overflow：ellipsis；

2. 多行文本溢出用省略號顯示

   • 多行文本顯示省略，有較大的相容先問題，適用於webKit瀏覽器或者移動端

   • overflow：hidden；
     text-overflow：ellipsis；
     /*彈性伸縮盒子模型顯示*/
     display：-webkit-box；
     /* 限制在一個塊元素顯示文本的行數*/
     -webkit-line-clamp：2；
     /*設置或檢索伸縮盒子對象的子元素的排列方式*/
     -webkit-box-orient：vertical；

常用佈局技巧

1. margin負值的運用

   • 讓每一個盒子margin往左移動-1px正好壓住相鄰的盒子
   • 滑鼠經過某個盒子時提高當前盒子的層級（如果沒有定位，則加相對定位（保留位置），如果有定位，則加z-index）

2. ，文字圍繞浮動元素

3. css三角強化

   • div{
     width：0；
     height：0；
     border-color：transparent red transparent transparent；
     border-style：solid；
     border-width：22px 8px 0 0；
     }

CSS初始化

1. CSS初始化是指重設瀏覽器的樣式