知識

塊級元素和行內元素

分類	英文全稱	舉例
塊級元素	block-level	div;h1~h6;table;td tr th;ul ol li;dl dt dd;pre;form;hr;p
行內元素	inline-level	span em strong;a;br;img;button;input;label;select;textarea;code;script

特性區別

JSBin地址

• 由圖可知：
• 塊級元素可以包含塊級元素和行內元素，而行內元素只能包含行內元素和文字。
• 觀察紅色邊框，可知塊級元素可以用CSS控制寬高，行內元素不行。
• 觀察紅色邊框，塊級元素直接佔據一整行元素，即使後面還有很大空間。而行內元素一行可以有多個，只佔據自身寬度空間。
• 由行內元素的紅色部分和黃色部分可知，行內元素的margin、padding只有左右方向有效，上下無效。

CSS 繼承

• CSS繼承：子元素沒有指定值的情況下，會繼承父元素設定的一些屬性值。
• 可繼承的：
• 所有元素：visibility、cursor；
• 塊狀元素：text-indent、text-align；
• 列表元素：list-style、list-style-type、list-style-position、list-style-image；
• 表格元素：border-collapse；
• 內聯元素：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction；
• 不可繼承：
  display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

塊級元素和行內元素分別如何水平居中

• 塊級元素：設定margin: _px auto;即可。
• 行內元素：在其所處的塊級元素的CSS中，設定text-align: center;即可。

用 CSS 實現一個三角形

塊級元素，寬高設0，邊框做特別粗，根據需要設定若干個邊框透明即可。
CSS程式碼：

.triangle {
  height: 0;
  width: 0;
  border-top: 50px transparent solid;
  border-right: 50px transparent solid;
  border-bottom: 50px red solid;
  border-left: 50px transparent solid;   
}

如何實現單行文字溢位加 ...

CSS程式碼：

.b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

PS: 把ellipsis換成clip，是砍掉的效果，如下圖

Px, Em, Rem 的區別

• px：固定單位，畫素px是相對於顯示器螢幕解析度而言的
• em：相對單位，相對於父元素，即相對於當前物件內文字的字型尺寸。若當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。
• rem：相對單位，與em類似，是相對於根元素（html）。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。

解釋下圖程式碼

1. 該程式碼表示：設定body內的字型大小為12px，行高為字型大小的1.5倍（即18px），字型樣式首選tahoma ，其次arial，Hiragino Sans GB，\5b8b\4f53（優先順序依次遞減），查詢電腦裡對應字型的字型檔案，如果都沒有，則選用瀏覽器預設字型 sans-serif。
2. 加引號的原因：如果不加，瀏覽器可能會把Hiragino Sans GB誤解為若干個字型樣式。
3. \5b8b\4f53是Unicode碼編號，表示“宋體”：

程式碼

1. 四個div

2. 五個button

3. 兩個表格

4. 七個三角形

5. 兩個Card