移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...

## **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有会的可以互相交流，加油年轻人！