常用的CSS小技巧

MissGuo發表於2018-08-11
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小技巧（一）

相關文章