一、塊級(jí)元素和行內(nèi)元素分別有哪些？動(dòng)手測(cè)試并列出4條以上的特性區(qū)別

參考文獻(xiàn)
1.MDN Block-level and inline elements
2.行內(nèi)元素與塊級(jí)元素的總結(jié)

• 塊級(jí)元素：div | h1~h6 | p | hr | form | ul | dl | ol | pre | table | li | dd | dt | tr | th | blockquote | canvas | fieldset | ……
• 行內(nèi)元素：em | strong | span | a | br | img | button | input | label | select | textarea | code | script | abbr | cite | ……
• 區(qū)別
  • 塊級(jí)元素從新的一行開始，而行內(nèi)元素與相鄰行內(nèi)元素在一行上
  • 塊級(jí)元素寬度默認(rèn)為父容器寬度，行內(nèi)元素由內(nèi)容決定
  • 塊級(jí)元素可以包含塊級(jí)元素和行內(nèi)元素，而行內(nèi)元素不能包含塊級(jí)元素
  • 塊級(jí)元素可以設(shè)置寬高以及內(nèi)外邊距，而行內(nèi)元素只有左右padding、margin生效

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

二、什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？

參考文獻(xiàn)
1.css-可繼承和不可繼承的屬性
2.CSS中可以和不可以繼承的屬性（有點(diǎn)錯(cuò)誤）
3.CSS三大特性之繼承性

• CSS繼承就是包含在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式，即子元素可以繼承父元素的屬性。

• 可繼承

  • visibility | cursor
  • 字體屬性：font | -family | -size (相對(duì)單位需計(jì)算)| -style | -weight |
  • 文本屬性：word-spacing | letter-spacing | text-align | text-transform | text-indent | line-height |
  • 顏色屬性：color
  • 列表屬性：list-style-image | list-style-position | list-style-type | list-style |
  • ……

• 不可繼承

  • 文本屬性：text-decoration | vertical-align
  • 定位布局屬性：display | margin | padding | width | height | float | clear | position | left | top | overflow | z-index |
  • 邊框：border | -width | -style | -color |
  • 背景：background | -color | -image | -repeat | -position |
  • ……

三、如何讓塊級(jí)元素水平居中？如何讓行內(nèi)元素水平居中?

• 塊級(jí)元素水平居中

margin: 0 auto;

• 行內(nèi)元素水平居中
  對(duì)其父元素設(shè)置text-align: center

四、用CSS實(shí)現(xiàn)小三角形

利用塊級(jí)元素，使其寬高為0，再分別設(shè)置四個(gè)border，可組合成各種三角形

[代碼 -- 點(diǎn)我](http://js.jirengu.com/kutusicula/2/edit)

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

通過以下樣式，

p{
  <!--文本不換行，文本會(huì)在在同一行上繼續(xù)-->
  white-space:nowrap;
 <!--當(dāng)內(nèi)容溢出元素框時(shí),內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的-->
  overflow:hidden;
 <!--當(dāng)文本溢出包含元素時(shí),顯示省略符號(hào)來代表被修剪的文本。-->
  text-overflow:ellipsis;
}

六、px, em, rem 有什么區(qū)別？

參考文獻(xiàn)
1.弄懂css中單位px和em,rem的區(qū)別

• px：是屏幕中最小的點(diǎn)。像素不是物理長(zhǎng)度，在不同分辨率的設(shè)備上物理長(zhǎng)度不同。
• em：是一個(gè)相對(duì)長(zhǎng)度單位，em會(huì)繼承父級(jí)元素的字體大小。
• rem：這個(gè)單位代表相對(duì)于根元素的 font-size大小，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。

七、解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?

參考文獻(xiàn)
1.CSS font-family 屬性-runoob
2.CSS font 屬性

設(shè)置字體大小，行高，字體類型

• 12px/1.5代表font-size和line-height(font-szie的1.5倍)。
• arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif字體系列，從前向后一次匹配
  'Hiragino Sans GB'：如果字體名稱包含空格，它必須加上引號(hào)。
  '\5b8b\4f53'：'宋體'的utf-8編碼，這樣避免瀏覽器解析css時(shí)出現(xiàn)亂碼。

body{
 font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

八、實(shí)現(xiàn)一下效果

[代碼1 -- 點(diǎn)我](http://js.jirengu.com/cavebamomi/1/edit)

[代碼2 -- 點(diǎn)我](http://js.jirengu.com/jodakezudo/1/edit)

[代碼3 -- 點(diǎn)我](http://js.jirengu.com/yulajeqaso/1/edit)

[代碼4 -- 點(diǎn)我](http://js.jirengu.com/humoxatalu/2/edit)

[代碼5 -- 點(diǎn)我](http://js.jirengu.com/zohalexoji/2/edit)