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有会的可以互相交流，加油年轻人！
更多推荐
css常用样式,导致页面css样式混乱的原因,css遇到的问题,我和小伙伴们惊呆了
发布评论