經常使用的CSS小技巧

實際開發過程當中會遇到一些須要用CSS小技巧處理的佈局問題，如今分享幾個我的工做中遇到的小問題和解決方案。

1.inline元素間的空白間隙

這裏要介紹一個神器font-size:0。 若是你寫了個列表，由於元素節點有文本節點，在縮進代碼時會佔據寬度，好比：

<ul>
    <li>我是第一項</li>
    <li>我是第二項</li>
    <li>我是第三項</li>
    <li>我是第四項</li>
</ul>
複製代碼

設置了CSS

<style>
    ul {
        list-style: none;
    }
    li {
        width: 25%;
        display: inline-block;
        background: green;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
</style>
複製代碼

就會發現

咱們爲了頁面代碼的整潔可讀性，每每會設置一些適當的縮進、換行，但當元素的display爲inline或者inline-block的時候，這些縮進、換行就會產生空白，因此出現上述問題。雖然還有其餘方法能解決咱們由於縮進、換行而產生的問題，但此時，最合適的方法就是給li的父級ul設置 font-size: 0， 給li設置 font-size: 16px，如此就達到了所需效果

圖片間的間隙問題也是由於換行、縮進。

<div>
     <img src="pic1.jpg">
     <img src="pic2.jpg">
</div>
複製代碼

如上，圖片出現間隙後，在div設置font-size:0，間隙就會消失。

2.圖片等比縮放

在作項目時遇到輪播圖的圖片從某服務器獲取的狀況，但圖片大小比例倒是不定的，這種狀況該如何保證圖片按比例顯示？或者在移動端場景下，如何作圖片的響應性佈局？

在CSS3中，可以使用background-size來解決針對響應性佈局的背景圖片自適應。

• 瀏覽器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+
• 基本語法：background-size: length | percentage | cover | contain

1. length該屬性值是設置背景圖像的寬度和高度的，第一個值是寬度，第二個值是設置高度的。若是隻設置第一個值，那麼第二個值會自動轉換爲 「auto」；調整圖片到指定大小；
2. percentage該屬性是以父元素的百分比來設置圖片的寬度和高度的，第一個值是寬度，第二個值是高度。若是隻設置一個值，那麼第二個值會被設置爲 「auto」；調整圖片到指定大小，百分比相對於包含元素的尺寸。
3. cover把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。擴展圖片來填滿元素（保持像素的長寬比）；
4. contain把圖像擴展至最大尺寸，以使寬度和高度徹底適應內容區域。 縮小圖片來適應元素的尺寸（保持像素的長寬比）

那到底是怎麼使用的呢？舉個🌰

// 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用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘的WebKit屬性。常見結合屬性： display: -webkit-box;必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。 -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

4.calc()

總體高度自適應佈局怎麼實現？在講calc()以前先說一下vh和vw：

vw   相對於視口的寬度。視口被均分爲100單位的vw
vh   相對於視口的高度。視口被均分爲100單位的vh
vmax 相對於視口的寬度或高度中較大的那個。其中最大的那個被均分爲100單位的vmax
vmin 相對於視口的寬度或高度中較小的那個。其中最小的那個被均分爲100單位的vmin
複製代碼

• calc 是 css3提供的一個在css文件中計算值的函數：用於動態計算長度值。
• 須要注意的是，運算符先後都須要保留一個空格，例如：width: calc(100% - 10px)；
• 任何長度值均可以使用calc()函數進行計算；
• calc()函數支持 "+", "-", "*", "/" 運算；
• calc()函數使用標準的數學運算優先級規則；

注意！

若是用了CSS預處理器（LESS/SCSS）會被它們先解析，這時須要禁用解析calc(~ '100vh - 64px')

原文出自本人博客：常見CSS小技巧（一）