使用css写出一个三角形角标
元素宽高设置为0
,通过border
属性来设置三个方向的border
颜色为透明或者和背景色保持一致,一个border
的颜色设置为需要的颜色
div {
width: 0;
height: 0;
border: 5px solid #transparent;
border-top-color: red;
}
水平垂直居中
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
父级控制子集居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
css一行文本超出...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本超出显示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
IOS手机滚动
overflow: auto;
-webkit-overflow-scrolling: touch;
修改滚动条样式
隐藏div
元素的滚动条
div::-webkit-scrollbar {
display: none;
}
div::-webkit-scrollbar 滚动条整体部分
div::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
div::-webkit-scrollbar-track 滚动条的轨道
div::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
div::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
div::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
注意此方案有兼容性问题
ios audio无法自动播放、循环播放的问题
ios
手机在使用audio
或者video
播放的时候,个别机型无法实现自动播放,可使用下面的代码
// 解决ios audio无法自动播放、循环播放的问题
var video = document.getElementById('video');
var state = 0;
document.addEventListener('touchstart', function(){
if(state==0){
video.play();
state=1;
}
}, false);
document.addEventListener("WeixinJSBridgeReady", function () {
video.play();
}, false);
//循环播放
music.onended = function () {
video.load();
video.play();
}
隐藏页面元素
display-none: 元素不会占用空间,在页面中不显示,子元素也不会显示。
opacity-0: 元素透明度将为0
,但元素仍然存在,绑定的事件仍旧有效仍可触发执行。
visibility-hidden:元素隐藏,但元素仍旧存在,占用空间,页面中无法触发该元素的事件。