布局常用样式
1.手机1px实现 用flexible.js实现自适应，这个用起来很好，但是相对于安卓来说不是那么友好了，1px的话在安卓显示的不是1px了会粗一些因此用伪类来实现1px应用
.abc{position:relative;}
.abc:after{display:block;position:absolute;letf:0;bottom:0;width:100%;content:'';transform:scaleY(0.5)};
2.超出部分省略号显示
white-space:nowrap;over-flow:hidden;text-overflow:ellipsis;
3.IOS模糊效果
backdrop-filter:blur(10px);
4.垂直居中
display:table;//父亲
display:table-cell; vertical-align:middle;
或者
left:50%;top:50%;
transform: translate(-50%,-50%);
5.display:inline-block;不同的高度
网上解决方式:父元素的font-size设置为0或者有空隙的地方去吧去掉空隙
本人解决方式:父元素设置固定高度 子元素(display:inline-block)给vertical-align:middle;和line-height的属性 (父元素高度要大于子元素line-height);
6.移动端滑动优化
-webkit-overflow-scrolling:touch;
7.bootstrap式 input获取焦点特效css
input{transition: all 0.30s ease-in-out;outline: none;}
input[type=text]:focus{box-shadow: 0 0 5px rgba(35, 150, 188, 1);border: 1px solid rgba(35, 150, 188, 1);}
8.css限制字数 用...省略
span{font-size:24px;}
.hidden{display:inline-block;white-space:nowrap;width:calc(24px*9);text-overflow:ellipsis;overflow:hidden;}
如有新遇到的问题会及时更新
文字两边对齐
.main_test{display:block;float:left;width:50px;text-align:justify;font-size:12px;color:#444444;line-height:26px;}
.main_test::after{content:"";display: inline-block;width:100%;overflow:hidden;height:0;}
