1. css 一行文本超出...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
2.多行文本超出顯示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
3.IOS 手機(jī)容器滾動條滑動不流暢
overflow: auto;
-webkit-overflow-scrolling: touch;
4.修改滾動條樣式
隱藏 div 元素的滾動條
div::-webkit-scrollbar {
display: none;
}
div::-webkit-scrollbar 滾動條整體部分
div::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條
div::-webkit-scrollbar-track 滾動條的軌道（里面裝有 Thumb
div::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點(diǎn)擊微調(diào)小方塊的位置
div::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動條中間部分（除去
div::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
div::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件注意此方案有兼容性問題，一般需要隱藏滾動條時我都是用一個色塊通過定位蓋上去，或者將子級元素調(diào)大，父級元素使用 overflow-hidden 截掉滾動條部分。暴力且直接。
5.使用 css 寫出一個三角形角標(biāo)
元素寬高設(shè)置為 0，通過 border 屬性來設(shè)置，讓其它三個方向的 border 顏色為透明或者和背景色保持一致，剩余一條 border 的顏色設(shè)置為需要的顏色。
div {
width: 0;
height: 0;
border: 5px solid #transparent;
border-top-color: red;
}
6.解決 ios audio 無法自動播放、循環(huán)播放的問題
ios 手機(jī)在使用 audio 或者 video 播放的時候，個別機(jī)型無法實(shí)現(xiàn)自動播放，可使用下面的代碼 hack。
// 解決ios audio無法自動播放、循環(huán)播放的問題
var music = document.getElementById('video');
var state = 0;
document.addEventListener('touchstart', function(){
if(state==0){
music.play();
state=1;
}
}, false);
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//循環(huán)播放
music.onended = function () {
music.load();
music.play();
}
7.水平垂直居中
我一般只使用兩種方式 定位 或者 flex，我覺得夠用了。
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;
}
8.隱藏頁面元素
display-none: 元素不存在，從 dom 中刪除
opacity-0: 元素透明度將為 0，但元素仍然存在，綁定的事件仍舊有效仍可觸發(fā)執(zhí)行。
visibility-hidden：元素隱藏，但元素仍舊存在，頁面中無法觸發(fā)該元素的事件。
