問答

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

• 塊級元素

<address>   定義地址
<caption>   定義表格標題
<div>   定義文檔中的分區(qū)或節(jié)
<ol>    定義有序列表
<ul>    定義無序列表
<li>    標簽定義列表項目
<dl>    定義列表
<dt>    定義列表中的標題
<dd>標簽定義列表項目
<fieldset>  定義一個框架集
<form>  創(chuàng)建 HTML 表單
<h1~6>  定義標題
<hr>    創(chuàng)建一條水平線
<legend>    元素為 fieldset 元素定義標題
<noframes>  為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內部
<noscript>  定義在腳本未被執(zhí)行時的替代內容
<p> 標簽定義段落
<pre>   定義預格式化的文本
<table> 標簽定義 HTML 表格
<tbody> 標簽表格主體（正文）
<td>    表格中的標準單元格
<tfoot> 定義表格的頁腳（腳注或表注）
<th>    定義表頭單元格
<thead> 標簽定義表格的表頭
<tr>    定義表格中的行

• 行內元素

<a> 標簽可定義錨
<abbr>  表示一個縮寫形式
<acronym>   定義只取首字母縮寫
<b> 字體加粗
<bdo>   可覆蓋默認的文本方向
<big>   大號字體加粗
<br>    換行
<cite>  引用進行定義
<code>  定義計算機代碼文本
<dfn>   定義一個定義項目
<em>    定義為強調的內容
<i> 斜體文本效果
<img>   向網(wǎng)頁中嵌入一幅圖像
<input> 輸入框
<kbd>   定義鍵盤文本
<label> 標簽為 input 元素定義標注（標記）
<q> 定義短的引用
<samp>  定義樣本文本
<select>    創(chuàng)建單選或多選菜單
<small> 呈現(xiàn)小號字體效果
<span>  組合文檔中的行內元素
<strong>    語氣更強的強調的內容
<sub>   定義下標文本
<sup>   定義上標文本
<textarea>  多行的文本輸入控件
<tt>    打字機或者等寬的文本效果
<var>   定義變量

• 區(qū)別特征

• 補充
  塊級元素對應display：block，行內元素對應display：inline?？梢酝ㄟ^修改元素的display屬性來切換行內元素和塊級元素。
  補充說明一個屬性：display：inline-block；可以讓元素具有塊級元素和行內元素的特性：既可以設置長寬，可以讓padding和margin生效，又可以和其他行內元素并排。是一個很實用的屬性

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

CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素

• 文本相關屬性可以繼承

font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent, 
text-transform,word-spacing

• 列表相關屬性可以繼承

 list-style-image, list-style-position,
list-style-type, list-style

• 顏色屬性可以被繼承

color

• 其他可以被繼承屬性

azimuth, border-collapse, border-spacing,
caption-side, cursor, direction, elevation,
empty-cells, orphans, pitch-range,
pitch, quotes, richness, speak-header, 
speaknumeral,speak-punctuation,
 speak, speechrate,stress,visibility, 
voice-family, volume, whitespace,widows

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

塊級元素劇中

margin-left: auto;    margin-right: auto;

行內元素居中

text-align: center;

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

基本思想是設置一個元素的高和寬為0，通過控制四個方向不同的邊的厚度和透明度來繪制三角形
一個簡單的例子，繪制如下三角形

三角形

div{
width: 0;
heigh: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 100px solid transparent;
}

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

p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

• px:
• px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
• IE無法調整那些使用px作為單位的字體大小；
• 國外的大部分網(wǎng)站能夠調整的原因在于其使用了em或rem作為字體單位；
• Firefox能夠調整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內核)。

• **em: **
• em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
• em的值并不是固定的；
• em會繼承父級元素的字體大小。

• rem:
• rem是CSS3新增的一個相對單位（root em，根em）
• 和em區(qū)別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
• 通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

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-serif;
• 'Hiragino Sans GB' 加引號的作用是字體名中存在空格，加引號防止被誤認為兩種字體。
• \5b8b\4f53 （黑體）是字體名的Unicode碼表示方式，防止字體名編碼不匹配產(chǎn)生亂碼導致無法識別