css笔记

布局常用样式

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;}