## **css常用技巧**
本文都时再工作中用得比较多的Css，还有遇到的一些不长记性的问题，一起来看看这些技巧吧。
1. **实现组件的自动换行排布：**
flex-wrap: wrap;
使列表排成一行
方法一：div{display:inline-block;}
方法二：div{float:left;}
方法三：flex布局。{display:flex; flex-direction:row;}
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时，**
需谨记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有会的可以互相交流，加油年轻人！
