實(shí)際開(kāi)發(fā)過(guò)程中會(huì)遇到一些需要用CSS小技巧處理的布局問(wèn)題愚战，現(xiàn)在分享幾個(gè)個(gè)人工作中遇到的小問(wèn)題和解決方案剩彬。
1.inline元素間的空白間隙
這里要介紹一個(gè)神器font-size:0。
如果你寫了個(gè)列表，因?yàn)樵毓?jié)點(diǎn)有文本節(jié)點(diǎn)，在縮進(jìn)代碼時(shí)會(huì)占據(jù)寬度，比如：
<ul>
<li>我是第一項(xiàng)</li>
<li>我是第二項(xiàng)</li>
<li>我是第三項(xiàng)</li>
<li>我是第四項(xiàng)</li>
</ul>
設(shè)置了CSS
<style>
ul {
list-style: none;
}
li {
width: 25%;
display: inline-block;
background: green;
text-align: center;
height: 40px;
line-height: 40px;
}
</style>
就會(huì)發(fā)現(xiàn)
我們?yōu)榱隧?yè)面代碼的整潔可讀性柜思，往往會(huì)設(shè)置一些適當(dāng)?shù)目s進(jìn)、換行巷燥，但當(dāng)元素的display為inline或者inline-block的時(shí)候赡盘，這些縮進(jìn)、換行就會(huì)產(chǎn)生空白矾湃，所以出現(xiàn)上述問(wèn)題亡脑。雖然還有其他方法能解決我們因?yàn)榭s進(jìn)、換行而產(chǎn)生的問(wèn)題邀跃，但此時(shí)霉咨，最合適的方法就是給li的父級(jí)ul設(shè)置font-size: 0， 給li設(shè)置font-size: 16px拍屑，如此就達(dá)到了所需效果
圖片間的間隙問(wèn)題也是因?yàn)閾Q行途戒、縮進(jìn)。
<div>
<img src="pic1.jpg">
<img src="pic2.jpg">
</div>
如上僵驰，圖片出現(xiàn)間隙后喷斋，在div設(shè)置font-size:0，間隙就會(huì)消失蒜茴。
2.圖片等比縮放
在做項(xiàng)目時(shí)遇到輪播圖的圖片從某服務(wù)器獲取的情況星爪，但圖片大小比例卻是不定的，這種情況該如何保證圖片按比例顯示粉私？或者在移動(dòng)端場(chǎng)景下顽腾，如何做圖片的響應(yīng)性布局？
在CSS3中诺核，可使用background-size來(lái)解決針對(duì)響應(yīng)性布局的背景圖片自適應(yīng)抄肖。
- 瀏覽器支持的程度：
IE9+, Firefox4+, opera, chrome, safari5+ - 基本語(yǔ)法：
background-size: length | percentage | cover | contain
-
length該屬性值是設(shè)置背景圖像的寬度和高度的，第一個(gè)值是寬度窖杀，第二個(gè)值是設(shè)置高度的漓摩。如果只設(shè)置第一個(gè)值，那么第二個(gè)值會(huì)自動(dòng)轉(zhuǎn)換為 “auto”入客；調(diào)整圖片到指定大泄鼙小腿椎； -
percentage該屬性是以父元素的百分比來(lái)設(shè)置圖片的寬度和高度的，第一個(gè)值是寬度锅风，第二個(gè)值是高度酥诽。如果只設(shè)置一個(gè)值鞍泉，那么第二個(gè)值會(huì)被設(shè)置為 “auto”皱埠；調(diào)整圖片到指定大小，百分比相對(duì)于包含元素的尺寸咖驮。 -
cover把背景圖像擴(kuò)展至足夠大边器，以使背景圖像完全覆蓋背景區(qū)域。擴(kuò)展圖片來(lái)填滿元素（保持像素的長(zhǎng)寬比）托修； -
contain把圖像擴(kuò)展至最大尺寸忘巧，以使寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 縮小圖片來(lái)適應(yīng)元素的尺寸（保持像素的長(zhǎng)寬比）
那究竟是怎么使用的呢睦刃？舉個(gè)??
// html部分
<div class="bsize1"></div>
// CSS部分
.bsize1 {
position: relative;
width: 28%;
height: 0;
padding-bottom: 17.5%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #e2e5e7 !important;
}
3.文字折行
單行文本溢出
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本溢出
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
-webkit-line-clamp用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)砚嘴。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性涩拙。常見(jiàn)結(jié)合屬性：
display: -webkit-box;必須結(jié)合的屬性 际长，將對(duì)象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結(jié)合的屬性 兴泥，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 工育。
4.calc()
整體高度自適應(yīng)布局怎么實(shí)現(xiàn)？在講calc()之前先說(shuō)一下vh和vw：
vw 相對(duì)于視口的寬度搓彻。視口被均分為100單位的vw
vh 相對(duì)于視口的高度如绸。視口被均分為100單位的vh
vmax 相對(duì)于視口的寬度或高度中較大的那個(gè)。其中最大的那個(gè)被均分為100單位的vmax
vmin 相對(duì)于視口的寬度或高度中較小的那個(gè)旭贬。其中最小的那個(gè)被均分為100單位的vmin
- calc 是 css3提供的一個(gè)在css文件中計(jì)算值的函數(shù)：用于動(dòng)態(tài)計(jì)算長(zhǎng)度值怔接。
- 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格稀轨，例如：width: calc(100% - 10px)扼脐；
- 任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
- calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算靶端；
- calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則谎势；
注意！
如果用了CSS預(yù)處理器（LESS/SCSS）會(huì)被它們先解析杨名，這時(shí)需要禁用解析calc(~ '100vh - 64px')
