一挂据、line-height
line-height經(jīng)常用于文字居中崎逃，當(dāng)然也有小伙伴會(huì)用上下padding去寫.but个绍！不管你用padding還是line-height巴柿，不同手機(jī)顯示效果還是…不一樣篮洁。
一般會(huì)這樣寫
.demo{
height:16px;
line-height:14px;
font-size:9px;
border:1pxsolid#ff6815;
}
嗯瓦阐，在我們的chrome由于字體小于9px已經(jīng)看不出邊框和字之間的間隙了睡蟋，再來(lái)看看Android和IOS的
魅藍(lán)文字已經(jīng)飛起~
正常顯示
如果把line-height加1px戳杀，iPhone文字就會(huì)下移信卡，由于我們app的ios用戶居多，并且android機(jī)型太多猾瘸，不同機(jī)型也會(huì)顯示不同丢习，所以只能退而求其次了咐低。
line-height的兼容問題不太好解決见擦，容器高度越小锡宋，顯示效果的差距越明顯执俩。稍微大一點(diǎn)的高度尝丐，最好把line-height設(shè)置為高度+1px衡奥，兩個(gè)平臺(tái)顯示都還不錯(cuò)矮固。
二档址、角標(biāo)的實(shí)現(xiàn)
不少項(xiàng)目ui會(huì)要求我們畫這種梯形角標(biāo)守伸。問題來(lái)了
1.我們不確定角標(biāo)內(nèi)容的長(zhǎng)度
2.角標(biāo)的底色不能定死尼摹，能定死（能定死的話直接切個(gè)小體形就行了）
通常就是一段文案后邊拼接一個(gè)三角形剂娄，三角形很好寫
.script{
width:0;
height:0;//控制寬高為0，用border寬度撐出一個(gè)三角形
border-right:10pxsolidtransparent;
border-top:15pxsolid#c59c53;
}
我看到的第一種寫法是把三角形直接拼在前邊的文案后邊玄呛，當(dāng)然這在iphone上是沒有問題的。但在部分安卓機(jī)型上卻會(huì)有1像素的間隙把鉴，就像這樣：
我現(xiàn)在感受到安卓陣營(yíng)深深的惡意
原因可能是定位在各安卓手機(jī)上會(huì)有不同的效果儿咱。庭砍。好像大家都是猴子，長(zhǎng)的卻都不一樣混埠。
對(duì)此有個(gè)好的解決方案：
跟團(tuán)游
.rongqi{//容器
height:15px;
overflow:hidden;//設(shè)置超出隱藏
position:absolute;
top:0;
left:0;
}
.wenan{//文案
float:left;
position:relative;//設(shè)置相對(duì)定位
z-index:3;//設(shè)置層級(jí)不被三角形擋住
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實(shí)際上遠(yuǎn)遠(yuǎn)超出容器的高度
float:right;//就是為了高度超出被擋住做出梯形的效果，兼容各種機(jī)型
margin-left:-9px;
}
如果去除容器的overflow:hidden就可以看的更明白：
四钳宪、圖文標(biāo)題
一些常見的布局例如圖+文案的搔体，有多種方式可以去寫疚俱，比如padding-left+background或者position+padding-left或者before偽元素缩多。
前兩種方法都可以把圖片做到絕對(duì)的垂直居中衬吆，但是它們都是相對(duì)整行的容器進(jìn)行定位的梁钾，由于line-height兼容問題的坑，圖片實(shí)際上不一定會(huì)和文字對(duì)齊逊抡。如果有圖文對(duì)齊的需求的話姆泻，個(gè)人建議才用before偽元素來(lái)布局，before可以相對(duì)文案來(lái)定位冒嫡。
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;//這里把背景圖片尺寸設(shè)置成contain翁授，不需要考慮圖片拉伸的問題
width:14px;
height:18px;
margin:05px-4px0;
}
還有一種情況茫打，我們的圖文布局，是從數(shù)組中遍歷出來(lái)的，類似下圖：
這種情況更適合position去寫露氮，所以寫樣式一定要根據(jù)不同情況去選擇合適的方式。
五找前、左右寬度自適應(yīng)
第四個(gè)小技巧結(jié)尾，圖中的布局實(shí)際上是分左右兩塊的罗售，依照ui的需求，文案是要左對(duì)齊钩述，數(shù)字是要右對(duì)齊的寨躁。你可能最先想到的是把右側(cè)的數(shù)字定位或者浮動(dòng)到那，左側(cè)的容器加上個(gè)margin-right或者padding-right牙勘。這樣可以實(shí)現(xiàn)职恳，但是兩側(cè)的文案有極端情況出現(xiàn)。
效果可能是這樣的：
也可能是這樣的
因?yàn)槟愀静恢纼蓚?cè)文案的長(zhǎng)度到底是多少方面。
我的方案是用box布局放钦，左側(cè)的容器設(shè)置box-flex:1，右側(cè)不管它：
主題門票
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控制寬度自適應(yīng)
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{//右側(cè)啥都不用管
text-align:right;
line-height:45px;
font-size:12px;
color:#999;
padding-left:10px;
}
讓我們看看最終極端條件下的顯示效果：
或者：
因?yàn)閜m覺得數(shù)字更重要恭金，所以讓文案去自適應(yīng)操禀，數(shù)字有多長(zhǎng)就多長(zhǎng)
七、模擬滾動(dòng)
模擬滾動(dòng)也是在項(xiàng)目中遇到的常見布局横腿。布局要求彈層出來(lái)后颓屑，彈層中的內(nèi)容可以滾動(dòng)，彈層背后的列表不能隨彈層滾動(dòng)而滾動(dòng)耿焊。并且在彈層上滑動(dòng)的時(shí)候揪惦，整個(gè)頁(yè)面也不能隨之滾動(dòng)。
直接上代碼：
<section class="father">
? <section class="content-body">
// ?頁(yè)面內(nèi)容罗侯，蒙層器腋，蒙層中的內(nèi)容互為兄弟節(jié)點(diǎn)，防止點(diǎn)擊是頁(yè)面穿透
</section>
<section class="layout">
// ?頁(yè)面內(nèi)容歇父，蒙層蒂培，蒙層中的內(nèi)容互為兄弟節(jié)點(diǎn)，防止點(diǎn)擊是頁(yè)面穿透
</section>
<section class="layout-body">
//? 頁(yè)面內(nèi)容榜苫，蒙層护戳，蒙層中的內(nèi)容互為兄弟節(jié)點(diǎn)，防止點(diǎn)擊是頁(yè)面穿透
</section>
.father{
height:533px;
overflow-y:scroll;//頁(yè)面高度設(shè)置為屏幕高度垂睬，正常情況下超出滾動(dòng)
}
.content-body{
height:533px;
overflow-y:scroll;//內(nèi)容高度設(shè)置為屏幕高度媳荒，正常情況下超出滾動(dòng)
}
.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;
}
當(dāng)我們觸發(fā)蒙層彈出時(shí)控制樣式
.father{
height:533px;
overflow-y:hidden;//設(shè)置超出隱藏，那么頁(yè)面不會(huì)觸發(fā)滾動(dòng)
}
.content-body{
height:533px;
overflow-y:hidden;//設(shè)置超出隱藏驹饺，那么頁(yè)面不會(huì)觸發(fā)滾動(dòng)
}
這個(gè)方法雖然實(shí)現(xiàn)了頁(yè)面模擬滾動(dòng)的效果钳枕，但是當(dāng)蒙層彈出的時(shí)候設(shè)置了overflow:hidden會(huì)導(dǎo)致頁(yè)面scrollTop變成0，頁(yè)面相當(dāng)于被滾到頂部了赏壹。
