知識(shí)

塊級(jí)元素和行內(nèi)元素

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

特性區(qū)別

塊級(jí)和行內(nèi)的特性區(qū)別.png

JSBin地址

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

CSS 繼承

CSS繼承：子元素沒有指定值的情況下，會(huì)繼承父元素設(shè)置的一些屬性值。
可繼承的：
所有元素：visibility、cursor；
塊狀元素：text-indent、text-align；
列表元素：list-style、list-style-type、list-style-position、list-style-image；
表格元素：border-collapse；
內(nèi)聯(lián)元素：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。

塊級(jí)元素和行內(nèi)元素分別如何水平居中

塊級(jí)元素：設(shè)置margin: _px auto;即可。
行內(nèi)元素：在其所處的塊級(jí)元素的CSS中，設(shè)置text-align: center;即可。

水平居中.png

用 CSS 實(shí)現(xiàn)一個(gè)三角形

塊級(jí)元素，寬高設(shè)0，邊框做特別粗，根據(jù)需要設(shè)置若干個(gè)邊框透明即可。
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

如何實(shí)現(xiàn)單行文本溢出加 ...

CSS代碼：

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

文本溢出.png

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

文本溢出2.png

Px, Em, Rem 的區(qū)別

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

解釋下圖代碼

6.png

該代碼表示：設(shè)置body內(nèi)的字體大小為12px，行高為字體大小的1.5倍（即18px），字體樣式首選tahoma ，其次arial，Hiragino Sans GB，\5b8b\4f53（優(yōu)先級(jí)依次遞減），查找電腦里對(duì)應(yīng)字體的字體文件，如果都沒有，則選用瀏覽器默認(rèn)字體 sans-serif。
加引號(hào)的原因：如果不加，瀏覽器可能會(huì)把Hiragino Sans GB誤解為若干個(gè)字體樣式。
\5b8b\4f53是Unicode碼編號(hào)，表示“宋體”：