一、塊級元素和行內(nèi)元素分別有哪些？測試4條以上的特性區(qū)別。
1、塊級元素能包含塊級元素和行內(nèi)元素，而行內(nèi)元素只能包含行內(nèi)元素和文本。
2、塊級元素是占據(jù)一整行空間，而行內(nèi)元素占據(jù)自身寬度空間。
3、塊級元素可以設置寬高、內(nèi)外邊距，。行內(nèi)元素設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效
4、 行內(nèi)元素與塊級元素屬性的不同，主要是盒模型屬性上。
| 塊級元素 | 行內(nèi)元素 | ||
|---|---|---|---|
| address | 定義地址 | a | 標簽可定義錨 |
| caption | 定義表格標題 | abbr | 表示一個縮寫形式 |
| dd | 定義列表中定義條目 | acronym | 定義只取首字母縮寫 |
| div | 定義文檔中的分區(qū)或節(jié) | b | 字體加粗 |
| dl | 定義列表 | bdo | 可覆蓋默認的文本方向 |
| dt | 定義列表中的項目 | big | 大號字體加粗 |
| fieldset | 定義一個框架集 | br | 換行 |
| form | 創(chuàng)建html表單 | cite | 引用進行定義 |
| h1 | 定義最大的標題 | code | 定義計算機代碼文本 |
| h2 | 定義副標題 | dfn | 定義一個定義項目 |
| h3 | 定義標題 | em | 定義為強調(diào)的內(nèi)容 |
| h4 | 定義標題 | i | 斜體文本效果 |
| h5 | 定義標題 | img | 向網(wǎng)頁中嵌入一幅圖像 |
| h6 | 定義最小標題 | input | 輸入框 |
| hr | 創(chuàng)建一條水平線 | kbd | 定義鍵盤文本 |
| legend | 偽元素為fieldset元素定義標題 | label | 標簽為 input 元素定義標注（標記） |
| li | 標簽定義列表項目 | q | 定義短的引用 |
| noframes | 為那些不支持框架的瀏覽器顯示文本，于frameset元素內(nèi)部 | samp | 定義樣本文本 |
| noscript | 定義在腳本未執(zhí)行時的替代內(nèi)容 | select | 創(chuàng)建單選或多選菜單 |
| ol | 定義有序列表 | small | 呈現(xiàn)小號字體效果 |
| ul | 定義無序列表 | span | 組合文檔中的行內(nèi)元素 |
| p | 標簽定義段落 | strong | 語氣更強的強調(diào)的內(nèi)容 |
| pre | 定義預格式化文本 | sub | 定義下標文本 |
| table | 標簽定義html表格 | sup | 定義上標文本 |
| tbody | 標簽表格主體（正文） | textarea | 多行的文本輸入控件 |
| td | 定義表格中的標準單元格 | tt | 打字機或者等寬的文本效果 |
| tfoot | 定義表格的頁腳 | var | 定義變量 |
| th | 定義表頭單元格 | ||
| thead | 定義表格的表頭 | ||
| tr | 定義表格中的行 |
可變元素列表：可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素
| button | 按鈕 |
|---|---|
| del | 定義文檔中已被刪除的文本 |
| iframe | 創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架） |
| ins | 標簽定義已經(jīng)被插入文檔中的文本 |
| map | 客戶端圖像映射（即熱區(qū)） |
| object | object對象 |
| scrip | 客戶端腳本 |
二、什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？
繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。
當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。只有文檔根元素取該屬性的概述中給定的初始值。當元素的一個非繼承屬性沒有指定值時，則取屬性的初始值。
常見的繼承屬性：
border-collapse：為表格設置合并邊框模型。1、collapse 如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。2、separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。3、inherit 規(guī)定應該從父元素繼承 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，是原始數(shù)字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值，與元素自身的字體大小有關。計算值是給定的百分比值乘以元素計算出的字體大小。使用Percentage和em可能會帶來意想不到的結果（特別是當父級元素下的子元素字體大小不同時）。
line-height:number，該屬性的應用值是這個無單位數(shù)字number乘以該元素的字體大小。計算值與指定值相同。大多數(shù)情況下，使用這種方法設置line-height是首選方法，在繼承情況下不會有異常的值。
對于替代行內(nèi)容，如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 屬性設置如何處理元素內(nèi)的空白。
word-spacing：可以改變字（單詞）之間的標準間隔
非繼承屬性
z-index：
width (其中包括 min-width , max-width)：
dispaly：
float：
clear：
vertical-align：CSS 的屬性 vertical-align 用來指定行內(nèi)元素（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)：對于行內(nèi)元素，設置上下margin是無效的。
outline (其中包括 outline-color , outline-style , outline-width)：
clip：
content：
box-sizing：content-box：表示使用w3c標準盒模型。 border-box表示使用“IE盒模型”
三、如何讓塊級元素水平居中？如何讓行內(nèi)元素水平居中?
對于行內(nèi)元素,只需在父元素中設置text-align="center"即可；
對于塊級元素，把元素的屬性margin-left和margin-right設置成auto即可。
注意：瀏覽器自身有默認margin和padding，我們可以通過哦*{來更改默認}
用css實現(xiàn)一個三角形
用css指定一個三角形樣式，我們只需要把塊的寬高設置為0，編輯邊框的每個邊，通過改變邊的屬性，例如可以設置三個邊透明或者兩個邊透明，其中相鄰的兩個邊顏色相同，還可以通過改變邊的大小，來實現(xiàn)不同樣式的三角形。
.tri{ width: 0px; height: 0px; border: 30px transparent solid; border-right: 20px red solid; border-bottom: 40px red solid; border-left: 30px transparent solid; }
四、單行文本溢出加 ...，如何實現(xiàn)
要實現(xiàn)單行文本溢出，首先讓它成為一個單行文本，即不換行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 有什么區(qū)別
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 文件進行解析渲染。當讀到文字時會轉(zhuǎn)換成對應的 unicode碼（可以認為是世界上任意一種文字的特定編號）。再根據(jù)HTML 里設置的 font-family （如果沒設置則使用瀏覽器默認設置）去查找電腦里（如果有自定義字體@font-face ，則加載對應字體文件）對應字體的字體文件。找到文件后根據(jù) unicode 碼去查找繪制外形，找到后繪制到頁面上。
七、demo
1、實現(xiàn)如下效果: 【參考】效果/
2、實現(xiàn)如下按鈕效果: 【參考65】效果
3、實現(xiàn)如下表格:【參考68】效果
4、實現(xiàn)如下三角形效果
5、實現(xiàn)如下Card: 【參考】效果
陰影效果參考
