css常用技巧
本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧。
-
实现组件的自动换行排布:
flex-wrap: wrap; 使列表排成一行 方法一:div{display:inline-block;} <!--不过div之间有空隙,并且不方便处理--> 方法二:div{float:left;} <!--div之间无空隙--> 方法三:flex布局。{display:flex; flex-direction:row;} <!--row:排;column:列-->
-
超出部分显示省略号
//单行 text-overflow ellipsis省略号点 white-space :nowrap//设置不换行 overflow:hidden //多行文本 width:100% overflow:hidden -webkit-box-orient:vertical;//设置伸缩盒子模型显示 需结合属性 -webkit-line-clamp:3;//用来限制在一个块元素有显示的文本行数
-
换行
进行自动换行 word-wrap:break-word , 不换行 white-space:nowrap //强制换行 word-break:break-all
-
两端对齐
text-align:justity; text-justify:distribute-all-lines; tetx-align-last:justity;//一个块或行的最后一行对齐方式 -moz-text-align-last:justify -webkit-text-align-lat:justify;
-
使元素鼠标事件失效
pointer-events:nooe cursor:default
-
禁止用户选择
-webkit-touch-callout:nooe; -webkit-user-select: nooe; -khtml-user-select:nooe; -moz-user-select:nooe; -ms-user-select:nooe;
-
内容旋转
transfrom:translateZ(0);
-
图片宽度自适应
min-width:100%; max-width:100%
-
设为透明
filter:alpha(opacity=50); -moz-opacity:0.5 -khtml-opacity:0.5 opacity:0.5
-
自定义滚动条
::-webkit -scrollbar整个滚动条 ::-webkit -scrollbar-track滚动条的轨迹 ::-webkit -scrollbar-thumb滚动条的滑块
-
内容居中显示、下拉内容右对齐
text-align:center text-align-last:center direction:rtl 从右向左
-
图片和文字同时上下居中
height:100 line-height:100 vertival-align:middle;
-
修改input 输入框中 placeholder 默认字体样式
input::-webkit-input-placeholder
-
用户缩放
width=device-width:宽度为设备宽度 initial-scale: 初始的缩放比例 (范围从>0到 10 ) minimum-scale: 允许用户缩放到的最小比例 maximum-scale: 允许用户缩放到的最大比例 user-scalable: 用户是否可以手动缩放
导致页面css样式混乱的原因遇到的问题
1.css需注意,在引用style时,
<style lang="stylus" 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;
4.Chrome浏览器取消input自动记忆下拉框
坑死了,找了很多,用这个就行了
input上加上autocomplete=“off”
后续会一直补充在写Css中遇到的问题,自己最近也在学习lua有会的可以互相交流,加油年轻人!