CSS 最佳實踐 + 套路（二） -- height width

文檔流

文檔內元素的流動方向

• 內聯元素 ==> 從左向右依次流動，若 width 不足，則換行
• 塊級元素 ==> 從上到下依次流動，每個塊級元素獨佔一行

脫離文檔流

將會影響其祖先元素（塊級元素）的 height

脫離文檔流的三種方式：

• position: fixed 相對於窗口定位
• position: absolute 相對於定位包含框定位（position: absolute; top: 100%;）
• float: 浮動，可以利用 .clearfix 類清除浮動

height 問題

• div （塊級元素）==> 由其內部文檔流元素的 height 總和決定。
• span （內聯元素） ==> span 的 height 決定於具體的字體（建議行高 + 設計字體的設計師決定）。

建議行高

字體都有一個建議行高，每種字體的建議行高是不同的。以下面的 span 爲例：

1 2	<span style= 'font-family: 字體A; font-size: 20px; line-height: 40px;'>字體hug</span> <span style= 'font-family: 字體B; font-size: 20px; line-height: 40px;'>字體hug</span>

• 兩個 span 的字體不同，所以兩個 span 的 height 就不相同。
• font-size: 20px; 指的是英文字母 h 的上部 距 英文字母 g 的下部的距離爲 20px ，中文漢字會比 20px 偏小一些。

最佳實踐

1. 將 line-height 設置的比 font-size 大一些，那麼行內元素的 height 將會等於 line-height 的值

2. 內聯元素設置 width 和 height 時，不要使用

   1 2 3 4

   display: block; height: line-height: text-align: center;

   通過添加 padding 從而達到想要的 width 和 height （添加 line-height 明確 height），並且寬度（max-width）自適應

   1 2	padding: line-height:

套路

設置一個 height 爲 40px （近似）的 div ,其內部包含內斂元素 span ：

1 2 3

<div style= 'line-height: 24px; border: 1px solid green; padding: 6px 0;'> <span style= 'font-size: 14px; border: 1px solid red;'>hug</span> </div>

兩個 span 兩端對齊方法

text-align: justify ==> 定義行內內容（例如文字）如何相對它的塊父 元素對齊。text-align 並不控制塊元素自己的對齊，只控制它的行內內容 的對齊。文字向兩側對齊（必須是多行文本）。

1 2 3 4 5 6 7 8 9 10 11 12 13

span{ display: block; width: // 設置寬度，從而讓兩端對齊 line-height: //設置行高和高度，固定下來 height: taxt-align: justify; //設置兩端對齊 overflow: hidden; } span::after{ // 設置僞類，從而有第二行。 content: ''; display: inline-block; width: 100%; }

注意：可以將 span 設置爲 display: inline-block ，之後在第一個 span 後面加上 <br>

文字省略溢出

單行文本省略溢出

1 2 3

white-space: nowrap; overflow: hidden; text-overflow: ellipsis

多行文本省略溢出（css multi line text ellipsis）

1 2 3 4

display: -webkit-box; -webkit-line-clamp: 3; //控制行數 -webkit-box-orient: vertical; overflow: hidden;

實現一個 1:1 的 div

1 2	border: 1px solid red; padding-top: 100%;

margin 合併

一個 div 標籤中有一個子標籤 div ，如果父標籤有以下屬性，則子標籤中的 margin（上下） 屬性不會合並。

• border：
• padding:
• overflow: hidden;( 不推薦 )

相關知識點

1. 文字和單詞、單詞和單詞都是以基線對齊。

2. 內聯元素的 padding 、 margin 和 border 不會影響 height ，但是會影響 width

©