問答

1. 塊級元素和行內元素分別有哪些？動手測試并列出4條以上的特性區(qū)別

塊級元素(block-level)

h1 h2 h3 div p hr form ul dl ol table
li dt dd tr td th

行內元素(inline-level)

span strong em a br img 
button input label select texture
code script

行內元素和塊級元素區(qū)別

• 塊級元素占據(jù)一行，垂直方向排列；行內元素和其他元素在一行，水平方向排列
• 塊級元素內能包含行內元素，行內元素只能包含文本及其他行內元素
• 塊級元素默認寬度為父元素的100%，行內元素默認寬度是它本身容器的寬度
• width和height 只對塊級元素生效，對行內元素無效。

2. 什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？

每個 CSS 屬性定義 的概述都指出了這個屬性是默認繼承的 ("Inherited: Yes") 還是默認不繼承的 ("Inherited: no")。
當元素的一個 繼承屬性 沒有指定值時，則取父元素的同屬性的。

• 可繼承的
  1. 文字相關的屬性是可被繼承的，font-size, font-family, font, font-style, font-weight, line-height, text-align, letter-spacing, text-indent, text-transform, word-spacing.
  2. 列表相關屬性是被繼承的: list-style, list-style-image, list-style-position, list-style-type
  3. 顏色相關屬性是被繼承的: color
• 不可繼承的
  1. background、border、position這些背景、布局、定位相關的都是默認不繼承的。

3. 如何讓塊級元素水平居中？如何讓行內元素水平居中?

/*塊級元素水平居中*/
p {
  width: 60px;
  margin: 0 auto;
}
/*行內元素水平居中*/
.box {
  text-align: center
}

4. 用 CSS 實現(xiàn)一個三角形

.triangle {
  height: 0;
  width: 0;
  border-top: 40px solid blue;
  border-right: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid transparent;
}

5. 單行文本溢出加 ...如何實現(xiàn)?

/*單行文本溢出*/
.text {
 /*去掉自動換行*/
  white-space: nowrap;
  /*隱藏元素溢出的內容*/
  overflow: hidden;
  /*設置溢出內容顯示的樣式*/
  text-overflow: ellipsis;
}

6. px, em, rem 有什么區(qū)別

• px 固定單位, 一般表示一個像素
• em 相對單位， 相對于父元素的大小。font-size屬性的單位，1em是父元素大小的一倍。Chrome瀏覽器默認字體大小16px,中文最小12px。
• rem 相對單位， 相對于根元素的大小，1rem是根元素大小的一倍。

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

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

• 為body 設置字體大小為12px,1.5倍行高，字體類型依次為tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-seri。
• 字體名字包含空格的時候應該加上引號。
• 在 CSS 中設置字體時，直接寫字體中文或英文名稱瀏覽器都能識別，直接寫中文的情況下編碼（GB2312、UTF-8 等）不匹配時會產(chǎn)生亂碼。保險的方式是將字體名稱用Unicode來表示。\5b8b\4f53代表Unicode的字體碼。\5b8b\4f53代表宋體，英文名為SimSun。