塊級元素和行內元素分別有哪些？動手測試并列出4條以上的特性區別。
常見的塊級元素和行內元素：
- 塊級元素：h/p/div/hr/form/ui/ol/li/dl/dt/dd/pre/table/tr/td/th
- 行內元素：em/strong/span/a/br/img/buttom/input/label/select/textarea/code/script
塊級元素和行內元素的特性：
- 塊級元素會占用一整行，其他塊級元素會被擠下到另一行，而行內元素之間可以在同一行存在
- 塊級元素可以設計長寬，而行內元素無法設置長寬
- 行內元素設置margin和padding時只有左右有效，上下無效
- 塊級元素可以包含行內元素和塊級元素，行內元素只能包含行內元素和文本
什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？
繼承：繼承是依賴于父子關系的一種機制。對于某個樣式應用于某個父元素時，子元素如果不做特別的限制，子元素會繼承父元素的一些樣式
-
無繼承性的屬性
1、display：規定元素應該生成的框的類型
2、文本屬性：
vertical-align：垂直文本對齊
text-decoration：規定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
unicode-bidi：設置文本的方向
3、盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成內容屬性：content、counter-reset、counter-increment
7、輪廓樣式屬性：outline-style、outline-width、outline-color、outline
8、頁面樣式屬性：size、page-break-before、page-break-after
9、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
-
可以繼承屬性
1、字體系列屬性
font：組合字體
font-family：規定元素的字體系列
font-weight：設置字體的粗細
font-size：設置字體的尺寸
font-style：定義字體的風格
font-variant：設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。
font-stretch：對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支持。
font-size-adjust：為某個元素規定一個 aspect 值，這樣就可以保持首選字體的 x-height。
2、文本系列屬性
text-indent：文本縮進
text-align：文本水平對齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規定文本的書寫方向
color：文本顏色
3、元素可見性：visibility
4、表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局屬性：list-style-type、list-style-image、list-style-position、list-style
6、生成內容屬性：quotes
7、光標屬性：cursor
8、頁面樣式屬性：page、page-break-inside、windows、orphans
9、聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
如何讓塊級元素水平居中？如何讓行內元素水平居中?
- 塊級元素水平居中：margin：0 auto；
- 行內元素水平居中：text-align：center；
用 CSS 實現一個三角形
<style> .a{ width: 0; height: 0 ; border-top:solid 20px red; border-left:solid 20px transparent; border-right:solid 20px transparent; border-bottom:solid 20px transparent; } </style> <body> <h1 class="a"></h1> </body>
- 把內容的寬高設為0，把border設寬同時把三個方向的border設為隱藏,這樣就可以了
單行文本溢出加 ...如何實現?
需要三行標簽，主要思路：阻止自動換行、對溢出的文本隱藏、對隱藏的文本用...表示
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
當遇到比如h標簽時，h標簽屬性本身就不會換行時就不需要white-space:nowrap,當然直接加三行代碼會更加方便，類似于清除浮動時直接寫clear：both的感覺是一樣的。
px, em, rem 有什么區別
- px是相對于瀏覽器的大小，也就是像素單位
- em是相對父容器寬高長度或者文字字體本身的倍數
- rem是相對于根節點body設置的字體倍數
解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
- 設置字體為12px，行高為字體的1.5倍，使用的字體類型為tahoma，arial，hiragino sans GB，\5b8b\4f53，sans-serif字體類型由瀏覽器、計算機中的字體庫搜尋優先選用前面的字體，如果找不到用后面字體替代，以此類推。
- 加引號的作用是為了區別每個字體的名稱，方便瀏覽器識別字體名稱防止識別錯誤產生亂碼
- 字體里的\5b8b\4f53代表宋體，因為如果是國外的用戶可能字體庫中沒有中文，會導致無法識別該字體名稱，所以用通用的unicode編碼表示。
