知識

塊級元素和行內元素

特性區別

塊級和行內的特性區別.png

• 由圖可知：
• 塊級元素可以包含塊級元素和行內元素，而行內元素只能包含行內元素和文本。
• 觀察紅色邊框，可知塊級元素可以用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;即可。

水平居中.png

用 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;   
}

triangle.png

如何實現單行文本溢出加 ...

CSS代碼：

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

文本溢出.png

文本溢出2.png

Px, Em, Rem 的區別

• px：固定單位，像素px是相對于顯示器屏幕分辨率而言的
• em：相對單位，相對于父元素，即相對于當前對象內文本的字體尺寸。若當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
• rem：相對單位，與em類似，是相對于根元素（html）。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

解釋下圖代碼

6.png

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

字體.png

代碼

1. 四個div

四個div.png

9.png

3. 兩個表格

10.png

4. 七個三角形

七個三角形.png

5. 兩個Card

兩個Card.png