## **css常用技巧**
本文都時再工作中用得比較多的Css，還有遇到的一些不長記性的問題，一起來看看這些技巧吧。
1. **實現組件的自動換行排布：**
flex-wrap: wrap;
使列表排成一行
方法一：div{display:inline-block;} <!--不過div之間有空隙，並且不方便處理-->
方法二：div{float:left;} <!--div之間無空隙-->
方法三：flex布局。{display:flex; flex-direction:row;} <!--row：排；column：列-->
2. **超出部分顯示省略號**
//單行
text-overflow ellipsis省略號點
white-space :nowrap//設置不換行
overflow：hidden
//多行文本
width：100%
overflow：hidden
-webkit-box-orient：vertical；//設置伸縮盒子模型顯示 需結合屬性
-webkit-line-clamp：3；//用來限制在一個塊元素有顯示的文本行數
3. **換行**
進行自動換行
word-wrap:break-word ,
不換行
white-space：nowrap
//強制換行
word-break：break-all
4. **兩端對齊**
text-align：justity；
text-justify：distribute-all-lines；
tetx-align-last：justity；//一個塊或行的最後一行對齊方式
-moz-text-align-last：justify
-webkit-text-align-lat：justify；
5. **使元素滑鼠事件失效**
pointer-events：nooe
cursor：default
6. **禁止用戶選擇**
-webkit-touch-callout：nooe；
-webkit-user-select： nooe；
-khtml-user-select：nooe；
-moz-user-select：nooe；
-ms-user-select：nooe；
7. **內容旋轉**
transfrom：translateZ(0);
8. **圖片寬度自適應**
min-width:100%;
max-width：100%
9. **設為透明**
filter：alpha(opacity=50);
-moz-opacity:0.5
-khtml-opacity:0.5
opacity:0.5
10. **自定義滾動條**
::-webkit -scrollbar整個滾動條
::-webkit -scrollbar-track滾動條的軌跡
::-webkit -scrollbar-thumb滾動條的滑塊
11. **內容居中顯示、下拉內容右對齊**
text-align：center
text-align-last：center
direction：rtl 從右向左
12. **圖片和文字同時上下居中**
height：100
line-height：100
vertival-align：middle；
13. **修改input 輸入框中 placeholder 默認字體樣式**
input::-webkit-input-placeholder
14. **用戶縮放**
width=device-width：寬度為設備寬度
initial-scale: 初始的縮放比例 （範圍從>0到 10 ）
minimum-scale: 允許用戶縮放到的最小比例
maximum-scale: 允許用戶縮放到的最大比例
user-scalable: 用戶是否可以手動縮放
## 導致頁面css樣式混亂的原因遇到的問題
**1.css需注意，在引用style時，**
<style scoped rel="stylesheet/stylus"><style>
需謹記scoped表示當前style屬性只屬於當前模塊
**2.定位，需檢查使用**
絕對定位（position：absolute），相對定位屬性（position：relative）
固定定位（position：fixed）繼承父元素的定位方式（position：inherit）的地方
還有移動端首頁的導航欄有些會用粘性定位position:sticky，它是相對定位（position:relative）和固定定位（position:fixed）的混合。
還有解決fixed定位後頁面寬度變化出現的頁面錯亂 可以用absolute定位實現fixed效果
**3.z-index失效原因**
在z-index失效時遇到過兩個原因
第一個就是 overflow-x: auto;
overflow-y:hidden;
因為超出溢出原因，被遮擋，這個導致我找了很久
第二個就是 float導致的。加上position：absolute，或者clear:both;
後續會一直補充在寫Css中遇到的問題，自己最近也在學習lua有會的可以互相交流，加油年輕人！