問(wèn)答
1. 塊級(jí)元素和行內(nèi)元素分別有哪些？動(dòng)手測(cè)試并列出4條以上的特性區(qū)別
- 塊級(jí)元素包括：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
- 行內(nèi)元素包括：em strong span a br img button input label select textarea code script
- 塊級(jí)元素可以設(shè)置width和height屬性，行內(nèi)元素不能設(shè)置寬高
- 塊級(jí)元素寬度默認(rèn)占整行，而行內(nèi)元素寬度自適應(yīng)大小
- 塊級(jí)元素可以包含塊級(jí)元素和行內(nèi)元素，而行內(nèi)元素只能包含文本和行內(nèi)元素
- 行內(nèi)元素設(shè)置上下外邊距會(huì)失效，設(shè)置上下內(nèi)邊距有效但不占高度
2. 什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？
- CSS繼承：父元素設(shè)置的屬性，自動(dòng)繼承到子孫元素
- 不可繼承的：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。
- 所有元素可繼承：visibility和cursor。
- 內(nèi)聯(lián)元素可繼承：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。
- 終端塊狀元素可繼承：text-indent和text-align。
- 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
3. 如何讓塊級(jí)元素水平居中？如何讓行內(nèi)元素水平居中?
- 設(shè)置左右外邊距的值為auto;
- 設(shè)置text-align:center;
4. 用 CSS 實(shí)現(xiàn)一個(gè)三角形
#triangle{
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid blue;
}
5. 單行文本溢出加 ...如何實(shí)現(xiàn)?
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
6. px, em, rem 有什么區(qū)別
- px:固定尺寸
- em:相對(duì)于父元素的尺寸倍數(shù)
- rem:相對(duì)于根元素（body）的尺寸倍數(shù)
7. 解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
表示字體規(guī)格為：
- 字體大小為12px
- 字體行高為1.5倍字體大小
- 字體可在tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif 這些字體中選擇（若都不存在，則為瀏覽器默認(rèn)字體）
- 當(dāng)有空格或者Unicode碼時(shí)，需要加引號(hào)
- \5b8b\4f53是字體的Unicode碼，表示黑體
代碼
1. 實(shí)現(xiàn)如下效果: 【參考3】
2. 實(shí)現(xiàn)如下按鈕效果: 【參考5】
3. 實(shí)現(xiàn)如下表格:【參考4】
4. 實(shí)現(xiàn)如下三角形
Paste_Image.png
