1.塊級(jí)元素和行內(nèi)元素分別有哪些？動(dòng)手測(cè)試并列出4條以上的特性區(qū)別？
常見的塊級(jí)元素和行內(nèi)元素
- 塊級(jí)元素（block-level）： div, h1, h2, h3, h4, h5, h6, p, hr, form, ul , dl, ol, pre, table, li, dd, dd, dt, tr, td, th。
- 行內(nèi)元素 （inline-level）: em, strong, span, a, br, img, button, input, label, select, option, textarea, code, script。
塊級(jí)元素和行內(nèi)元素的區(qū)別
- 塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下，其寬度自動(dòng)填滿其父元素寬度。行內(nèi)元素占據(jù)自身寬度空間，不會(huì)獨(dú)占一行,相鄰的行內(nèi)元素會(huì)排列在同一行里。
-
塊級(jí)元素可以包含塊級(jí)元素和行內(nèi)，行內(nèi)只能包含文本和行內(nèi)。
例子中， h1標(biāo)簽嵌套的div和span都在一行。
span標(biāo)簽嵌套的div標(biāo)簽獨(dú)占一行了。
QQ截圖20171028151059.png -
塊級(jí)元素可以設(shè)置width,height屬性。而對(duì)行內(nèi)元素?zé)o效。
QQ截圖20171028151917.png -
塊級(jí)元素可以設(shè)置margin和padding屬性。行內(nèi)元素的margin和padding屬性，水平方向的padding-left,padding-right,margin-left,margin- right都產(chǎn)生邊距效果，但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不會(huì)產(chǎn)生邊距效果。上下只是用于撐開邊框和背景色，對(duì)于行高沒有任何影響。
QQ截圖20171028152955.png 塊級(jí)元素居中：margin: 0 auto; ， 行內(nèi)元素居中：text-align: center；。
2.什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？
-
繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定HTML標(biāo)簽元素，而且應(yīng)用其后代。
-
能繼承的屬性：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、list-style、list-style-type、list-style-position、list-style-image、text-indent和text-align。
-
不能繼承的屬性：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。
3.如何讓塊級(jí)元素水平居中？如何讓行內(nèi)元素水平居中?
-
塊級(jí)元素居中：margin: 0 auto; ， 行內(nèi)元素居中：text-align: center；。
4.用 CSS 實(shí)現(xiàn)一個(gè)三角形
5.單行文本溢出加 ...如何實(shí)現(xiàn)?
-
E{
white-space: nowrap;
over-flow: hidden;
text-overflow: ellipsis;
}
QQ截圖20171028162340.png
6.px, em, rem 有什么區(qū)別
px像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。em特點(diǎn) :1. em的值并不是固定的；2. em會(huì)繼承父級(jí)元素的字體大小。
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em）。這個(gè)單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。舉一個(gè)例子：p {font-size:14px; font-size:.875rem;}
7.解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
-
QQ截圖20171028170428.png
字體大小為12px(font-size)，行高為12px的1.5倍也就是18px;
字體為tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif，先后順序表示字體的匹配優(yōu)先級(jí);
\5b8b\4f53，宋體，為宋體的Unicode碼，可以在chrome里面的console轉(zhuǎn)譯(escape);
'Hiragino Sans GB' 有空格，不加引號(hào)會(huì)被識(shí)別成兩個(gè)元素。
'\5b8b\4f53' 加引號(hào)，用單引號(hào)引上表示那是一個(gè)字符,是char（character字符）類型的。
