1.塊級元素和行內(nèi)元素分別有哪些吼具？動手測試并列出4條以上的特性區(qū)別奇瘦？

常見的塊級元素和行內(nèi)元素

• 塊級元素（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明肮。

塊級元素和行內(nèi)元素的區(qū)別

1. 塊級元素會獨(dú)占一行，默認(rèn)情況下，其寬度自動填滿其父元素寬度媳荒。行內(nèi)元素占據(jù)自身寬度空間，不會獨(dú)占一行,相鄰的行內(nèi)元素會排列在同一行里驹饺。

QQ截圖20171028144902.png

2. 塊級元素可以包含塊級元素和行內(nèi)钳枕，行內(nèi)只能包含文本和行內(nèi)。
   例子中赏壹， h1標(biāo)簽嵌套的div和span都在一行么伯。
   span標(biāo)簽嵌套的div標(biāo)簽獨(dú)占一行了。

   
   
   QQ截圖20171028151059.png

3. 塊級元素可以設(shè)置width,height屬性卡儒。而對行內(nèi)元素?zé)o效田柔。

   
   
   QQ截圖20171028151917.png

4. 塊級元素可以設(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卻不會產(chǎn)生邊距效果欣舵。上下只是用于撐開邊框和背景色，對于行高沒有任何影響缀磕。

   
   
   QQ截圖20171028152955.png

5. 塊級元素居中：margin: 0 auto; 缘圈， 行內(nèi)元素居中：text-align: center；袜蚕。

QQ截圖20171028154115.png

2.什么是 CSS 繼承? 哪些屬性能繼承糟把，哪些不能？

1. 繼承是一種規(guī)則牲剃，它允許樣式不僅應(yīng)用于某個特定HTML標(biāo)簽元素遣疯，而且應(yīng)用其后代。

2. 能繼承的屬性：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举哟。

3. 不能繼承的屬性：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.如何讓塊級元素水平居中提前？如何讓行內(nèi)元素水平居中?

• 塊級元素居中：margin: 0 auto; ， 行內(nèi)元素居中：text-align: center泳唠；狈网。

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

QQ截圖20171028161316.png

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

• E{
  white-space: nowrap;
  over-flow: hidden;
  text-overflow: ellipsis;
  }

  
  
  QQ截圖20171028162340.png

6.px, em, rem 有什么區(qū)別

• px像素（Pixel）。相對長度單位笨腥。像素px是相對于顯示器屏幕分辨率而言的拓哺。

• em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸脖母。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置士鸥，則相對于瀏覽器的默認(rèn)字體尺寸。em特點(diǎn) :1. em的值并不是固定的谆级；2. em會繼承父級元素的字體大小烤礁。

• rem是CSS3新增的一個相對單位（root em，根em）肥照。這個單位與em有什么區(qū)別呢脚仔？區(qū)別在于使用rem為元素設(shè)定字體大小時，仍然是相對大小舆绎，但相對的只是HTML根元素鲤脏。這個單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)猎醇。目前窥突，除了IE8及更早版本外，所有瀏覽器均已支持rem姑食。對于不支持它的瀏覽器波岛，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明音半。這些瀏覽器會忽略用rem設(shè)定的字體大小则拷。舉一個例子：p {font-size:14px; font-size:.875rem;}

7.解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?

• QQ截圖20171028170428.png
  
  字體大小為12px(font-size)，行高為12px的1.5倍也就是18px;
  字體為tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif曹鸠，先后順序表示字體的匹配優(yōu)先級;
  \5b8b\4f53煌茬，宋體，為宋體的Unicode碼彻桃，可以在chrome里面的console轉(zhuǎn)譯(escape);
  'Hiragino Sans GB' 有空格坛善，不加引號會被識別成兩個元素。
  '\5b8b\4f53' 加引號邻眷，用單引號引上表示那是一個字符,是char（character字符）類型的眠屎。

8. 代碼實(shí)踐

• 代碼1
• 代碼2
• 代碼3
• 代碼4
• 代碼5