一、塊級元素和行內元素分別有哪些？測試4條以上的特性區別。

1、塊級元素能包含塊級元素和行內元素，而行內元素只能包含行內元素和文本。
2、塊級元素是占據一整行空間，而行內元素占據自身寬度空間。
3、塊級元素可以設置寬高、內外邊距，。行內元素設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效
4、 行內元素與塊級元素屬性的不同，主要是盒模型屬性上。

可變元素列表：可變元素為根據上下文語境決定該元素為塊元素或者內聯元素

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

繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。
　　當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。只有文檔根元素取該屬性的概述中給定的初始值。當元素的一個非繼承屬性沒有指定值時，則取屬性的初始值。
常見的繼承屬性：
border-collapse：為表格設置合并邊框模型。1、collapse 如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。2、separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。3、inherit 規定應該從父元素繼承 border-collapse 屬性的值。

border-spacing： 屬性設置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式）。

caption-side：

color：

cursor：

direction：

font (其中包括 font-family , font-size , font-weight , font-style，font-height)

letter-spacing：字母間隔修改的是字符或字母之間的間隔

line-height：percentage，是原始數字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值，與元素自身的字體大小有關。計算值是給定的百分比值乘以元素計算出的字體大小。使用Percentage和em可能會帶來意想不到的結果（特別是當父級元素下的子元素字體大小不同時）。
line-height:number，該屬性的應用值是這個無單位數字number乘以該元素的字體大小。計算值與指定值相同。大多數情況下，使用這種方法設置line-height是首選方法，在繼承情況下不會有異常的值。
對于替代行內容，如button或者input，若line-height=height，在可以達到垂直居中的作用。

list-style (其中包括 list-style-image , list-style-position , list-style-type)

text-align：文本對其方式 left、center、right、justify

text-indent：文案第一行縮進距離

text-decoration： none、underline、line-through、overline

text-transform：改變文字大小寫none、uppercase、lowercase、capitalize

visibility：

white-space：white-space 屬性設置如何處理元素內的空白。

word-spacing：可以改變字（單詞）之間的標準間隔

非繼承屬性
z-index：

width (其中包括 min-width , max-width)：

dispaly：

float：

clear：

vertical-align：CSS 的屬性 vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。bottom元素及其后代的底端與整行的底端對齊/top元素及其后代的頂端與整行的頂端對齊。baseline是initial。元素基線與父元素的基線對齊。

unicode-bidi：

position：

top：

bottom：

left：

right：

text-decoration：

background (其中包括 background-color , background-image：

background-position , background-attachment , background-repeat)：

border (其中包括 border-color , border-style , border-width , border-spacing and so on)：

padding (其中包括 padding-left , padding-right , padding-top , padding-bottom)：

margin (其中包括 margin-left , margin-right , margin-top , margin-bottom)：對于行內元素，設置上下margin是無效的。

outline (其中包括 outline-color , outline-style , outline-width)：

clip：

content：

box-sizing：content-box：表示使用w3c標準盒模型。 border-box表示使用“IE盒模型”

三、如何讓塊級元素水平居中？如何讓行內元素水平居中?

對于行內元素,只需在父元素中設置text-align="center"即可；
　　對于塊級元素，把元素的屬性margin-left和margin-right設置成auto即可。
注意：瀏覽器自身有默認margin和padding，我們可以通過哦*{來更改默認}

用css實現一個三角形

用css指定一個三角形樣式，我們只需要把塊的寬高設置為0，編輯邊框的每個邊，通過改變邊的屬性，例如可以設置三個邊透明或者兩個邊透明，其中相鄰的兩個邊顏色相同，還可以通過改變邊的大小，來實現不同樣式的三角形。
.tri{ width: 0px; height: 0px; border: 30px transparent solid; border-right: 20px red solid; border-bottom: 40px red solid; border-left: 30px transparent solid; }

直角三角形

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

要實現單行文本溢出，首先讓它成為一個單行文本，即不換行nowrap，這樣就不有溢出，但是溢出部分卻不會隱藏，我們就讓它隱藏hidden，隱藏了，用戶可能不知道后面還有文字，我們可以用省略...（ellipsis）來表示后面還有文字。如下：
.box{ border: 2px blue solid; width: 100px; padding: 5px 20px; margin: 10px auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

文本溢出加...

五、px, em, rem 有什么區別

px： 固定單位
em: 相對單位，相對于父元素字體大小
rem: 相對單位，相對于根元素(html)字體大小
vw vh: 相對單位，1vw 為屏幕寬度的1% 但是兼容性很差

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

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
　　這段代碼是用來指定body的字體樣式，12px/1.5是文字大小為12px，行高是字高的1.5倍；其中tahoma、arial、Hirgino Sans GB、\5b8b\4f53 、sans-serif等是字體樣式。
　　加引號是為了告訴瀏覽器Hirgino Sans GB是一個詞，不能被認為是幾個詞。
　　字體里\5b8b\4f53代表字體為宋體樣式，在使用瀏覽器打開頁面時，瀏覽器會讀取 HTML 文件進行解析渲染。當讀到文字時會轉換成對應的 unicode碼（可以認為是世界上任意一種文字的特定編號）。再根據HTML 里設置的 font-family （如果沒設置則使用瀏覽器默認設置）去查找電腦里（如果有自定義字體@font-face ，則加載對應字體文件）對應字體的字體文件。找到文件后根據 unicode 碼去查找繪制外形，找到后繪制到頁面上。

七、demo

1、實現如下效果: 【參考】效果/
2、實現如下按鈕效果: 【參考65】效果
3、實現如下表格:【參考68】效果
4、實現如下三角形效果

三角形

task8完