移动端登录页样式错乱_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有会的可以互相交流,加油年轻人!
移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题,我和小伙伴们惊呆了...相关推荐
- css常用样式,导致页面css样式混乱的原因,css遇到的问题,我和小伙伴们惊呆了
css常用技巧 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 实现组件的自动换行排布: flex-wrap: wrap;使列表排成一行 方法一:div{di ...
- html可以用多个css样式吗,关于多个页面css样式表问题
CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成"公共型样式".&q ...
- CAS单点登录3--服务端登录页个性化
原理 cas的页面显示控制是集中在\WEB-INF\cas.properties中的cas.viewResolver.basename属性的,其默认值为default_views 所以cas会去cla ...
- python和html可以同时学吗_web前端入门:css+html5+javascript同时学可以吗?
HTML+CSS+JS是前端基础核心知识,肯定是都要学的.在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可.说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂 ...
- 前端开发审查元素时CSS样式有个横线(该CSS样式定义后无效) 的解决办法
问题概述 关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法 左看右看,上看下看,最终发现是前面在编码 ...
- 在HTML中 表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
- html刷新css样式,让IE浏览器即时刷新CSS样式_HTML与CSS教程_电脑知识学习_培训之家...
让IE浏览器即时刷新CSS样式为http://www.pxzj8.com整理发布,类型为HTML与CSS教程,本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,c ...
- asp.net 控制页面css样式
asp.net 控制页面css样式 fontDiv.Style["display"] = "none"; fontDiv.Style["dis ...
- Freemarker模板框架页面css样式等不起效
使用Freemarker模板框架页面css样式等不起效 这里看到正常引入,并且可以通过快捷方式点击进入链接css文件等进行查看 但是页面并没有正常加载到css样式: 结合之前关于配置文件proport ...
最新文章
- 【从零学习OpenCV 4】Mat类介绍
- 不依赖任何系统API,用c语言实现gbk/utf8/unicode编码转换
- (二)GitHub的使用随记
- javascript学习笔记 null和undefined
- jQuery clearQueue
- warshall算法求传递闭包c++_【建模小课堂】图论算法
- redhat7.3安装yum源 基于外网的http服务
- 实习生使用微软雅黑致公司被起诉索赔千万?方正回应...
- 卧槽,又来一个 Java 神器!!
- H3C交换机配置常用命令
- 医疗研讨会直播怎么做
- win7用友u8安装教程_如何在win7系统中安装用友u8(图文)
- 核心路由器十项性能指标(转)
- C++基础之什么是面向对象
- Torch安装及使用
- “开宝五子棋读谱”软件的隐私政策和权限说明
- 【信奥赛一本通】1183:病人排队(详细代码)
- ioGame 网络游戏服务器框架 (java)、java游戏服务器、netty 集群分步式的网络游戏服务器
- ZigBee 设置信道、PANID、发射功率
- github项目之仿小猪巴士车牌显示
热门文章
- 如何理解「异或(XOR)」运算在计算机科学中的重要性
- mybatis 多参数中有一个list 使用方法
- 计算机设备行业特征,2018年我国计算机、通信和其他电子设备制造业现状分析 产业园区聚集特征明显...
- 8.21 binary search
- python爬虫实例教程之豆瓣电影排行榜--python爬虫requests库
- 零售行业数据分析运用
- HTTP中POST和PUT的区别
- 开发人员选择驻场有什么好处
- 时代中国三年“老去” 岑钊雄500强空梦一场
- 使用PopupContainerEdit和PopupContainerControl制作下拉菜单树小记