一、line-height
line-height經常用于文字居中，當然也有小伙伴會用上下padding去寫.but！不管你用padding還是line-height，不同手機顯示效果還是…不一樣。
一般會這樣寫
.demo{
height:16px;
line-height:14px;
font-size:9px;
border:1pxsolid#ff6815;
}
嗯，在我們的chrome由于字體小于9px已經看不出邊框和字之間的間隙了，再來看看Android和IOS的
魅藍文字已經飛起~
正常顯示
如果把line-height加1px，iPhone文字就會下移，由于我們app的ios用戶居多，并且android機型太多，不同機型也會顯示不同，所以只能退而求其次了。
line-height的兼容問題不太好解決，容器高度越小，顯示效果的差距越明顯。稍微大一點的高度，最好把line-height設置為高度+1px，兩個平臺顯示都還不錯。
二、角標的實現
不少項目ui會要求我們畫這種梯形角標。問題來了
1.我們不確定角標內容的長度
2.角標的底色不能定死，能定死（能定死的話直接切個小體形就行了）
通常就是一段文案后邊拼接一個三角形，三角形很好寫
.script{
width:0;
height:0;//控制寬高為0，用border寬度撐出一個三角形
border-right:10pxsolidtransparent;
border-top:15pxsolid#c59c53;
}
我看到的第一種寫法是把三角形直接拼在前邊的文案后邊，當然這在iphone上是沒有問題的。但在部分安卓機型上卻會有1像素的間隙，就像這樣：
我現在感受到安卓陣營深深的惡意
原因可能是定位在各安卓手機上會有不同的效果。。好像大家都是猴子，長的卻都不一樣。
對此有個好的解決方案：
跟團游
.rongqi{//容器
height:15px;
overflow:hidden;//設置超出隱藏
position:absolute;
top:0;
left:0;
}
.wenan{//文案
float:left;
position:relative;//設置相對定位
z-index:3;//設置層級不被三角形擋住
height:15px;
padding-left:4px;
line-height:16px;
color:#fff;
font-size:10px;
}
.script{
width:0;
height:0;
border-right:20pxsolidtransparent;
border-top:30pxsolid#c59c53;//這里的30px實際上遠遠超出容器的高度
float:right;//就是為了高度超出被擋住做出梯形的效果，兼容各種機型
margin-left:-9px;
}
如果去除容器的overflow:hidden就可以看的更明白：
四、圖文標題
一些常見的布局例如圖+文案的，有多種方式可以去寫，比如padding-left+background或者position+padding-left或者before偽元素。
前兩種方法都可以把圖片做到絕對的垂直居中，但是它們都是相對整行的容器進行定位的，由于line-height兼容問題的坑，圖片實際上不一定會和文字對齊。如果有圖文對齊的需求的話，個人建議才用before偽元素來布局，before可以相對文案來定位。
p{
height:44px;
line-height:45px;
padding-left:40px;
}
p::before{
content:'';
display:inline-block;
background:url("../img/xxx.png")centercenterno-repeat;
background-size:contain;//這里把背景圖片尺寸設置成contain，不需要考慮圖片拉伸的問題
width:14px;
height:18px;
margin:05px-4px0;
}
還有一種情況，我們的圖文布局，是從數組中遍歷出來的，類似下圖：
這種情況更適合position去寫，所以寫樣式一定要根據不同情況去選擇合適的方式。
五、左右寬度自適應
第四個小技巧結尾，圖中的布局實際上是分左右兩塊的，依照ui的需求，文案是要左對齊，數字是要右對齊的。你可能最先想到的是把右側的數字定位或者浮動到那，左側的容器加上個margin-right或者padding-right。這樣可以實現，但是兩側的文案有極端情況出現。
效果可能是這樣的：
也可能是這樣的
因為你根本不知道兩側文案的長度到底是多少。
我的方案是用box布局，左側的容器設置box-flex:1，右側不管它：
主題門票
10
.ent-li{
margin-left:45px;
height:44px;
display:-webkit-box;//box布局并做好兼容
display:box;
position:relative;
}
.ent-li .left{
-webkit-box-flex:1;//box-flex:1控制寬度自適應
box-flex:1;
text-align:left;
line-height:45px;
font-size:16px;
color:#333;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ent-li .right{//右側啥都不用管
text-align:right;
line-height:45px;
font-size:12px;
color:#999;
padding-left:10px;
}
讓我們看看最終極端條件下的顯示效果：
或者：
因為pm覺得數字更重要，所以讓文案去自適應，數字有多長就多長
七、模擬滾動
模擬滾動也是在項目中遇到的常見布局。布局要求彈層出來后，彈層中的內容可以滾動，彈層背后的列表不能隨彈層滾動而滾動。并且在彈層上滑動的時候，整個頁面也不能隨之滾動。
直接上代碼：
<section class="father">
? <section class="content-body">
// ?頁面內容，蒙層，蒙層中的內容互為兄弟節點，防止點擊是頁面穿透
</section>
<section class="layout">
// ?頁面內容，蒙層，蒙層中的內容互為兄弟節點，防止點擊是頁面穿透
</section>
<section class="layout-body">
//? 頁面內容，蒙層，蒙層中的內容互為兄弟節點，防止點擊是頁面穿透
</section>
.father{
height:533px;
overflow-y:scroll;//頁面高度設置為屏幕高度，正常情況下超出滾動
}
.content-body{
height:533px;
overflow-y:scroll;//內容高度設置為屏幕高度，正常情況下超出滾動
}
.layout{
height:100%;
width:100%;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,0.7);
overflow:hidden;
z-index:1000000;
}
.layout-body{
height:46%;
width:100%;
position:fixed;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.7);
overflow:hidden;
z-index:1000001;
}
當我們觸發蒙層彈出時控制樣式
.father{
height:533px;
overflow-y:hidden;//設置超出隱藏，那么頁面不會觸發滾動
}
.content-body{
height:533px;
overflow-y:hidden;//設置超出隱藏，那么頁面不會觸發滾動
}
這個方法雖然實現了頁面模擬滾動的效果，但是當蒙層彈出的時候設置了overflow:hidden會導致頁面scrollTop變成0，頁面相當于被滾到頂部了。
