AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

CSS非常规样式设置记录

1、Android和IOS文本垂直居中

Android使用height和line-height相等的方法,会在各种机型产生不同的效果,很多机型不能居中,IOS没问题

解决办法:

不设置元素的高度,设置上下相同的padding值即可

 

2、隐藏滚动条

给元素添加伪元素,比如:

.container::-webkit-scrollbar {
    width: 0px;
}

 

3、混合开发APP,屏幕有滚动效果时,IOS端卡顿

-webkit-overflow-scrolling: touch;

 

4、flex布局,设置每个子项目间距相同,导致最后一行子项目数量小于之前的行时,间距大了的问题

如下图所示:

解决方法:给伸缩容器元素添加伪类,伪类的内容为空,宽度等于伸缩子项目

.flex_container:after {
    content: "";
    width: 1.87rem;
}

 

5、去除<input type=”number”>时输入框右侧的上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}

 

6、确保所有浏览器下<button>按钮高度一致

<button id="btn"></button>
<label for="btn">按钮</label>
 
button { 
    position: absolute; 
    clip: rect(0 0 0 0); 
} 
label { 
    display: inline-block; 
    line-height: 20px; 
    padding: 10px; 
}

 

7、一个元素的背景对半显示两个颜色

background: linear-gradient(black 50%, white 50%);

 

8、border绘制三角形

<div></div>
div {
    border: 50px solid;
    border-color: #000 transparent transparent;
}

效果:

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注