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

基本概念：

一、塊級元素：block element

每個塊級元素默認占一行高度，一行內添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；
塊級元素一般作為容器出現，用來組織結構，但并不全是如此。有些塊級元素，如<form>只能包含塊級元素。其他的塊級元素則可以包含行級元素如<P>.也有一些則既可以包含塊級，也可以包含行級元素。
DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。

二、行內元素：inline element

也叫內聯元素、內嵌元素等；行內元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母之間橫向排列，到最右端自動折行。

三、block（塊）元素的特點

① 總是在新行上開始；

② 高度，行高以及外邊距和內邊距都可控制；

③ 寬度缺省是它的容器的100%，除非設定一個寬度。

四、inline元素的特點

① 和其他元素都在一行上；

② 高，行高及外邊距和內邊距不可改變；

③ 寬度就是它的文字或圖片的寬度，不可改變

④ 內聯元素只能容納文本或者其他內聯元素

④、它可以容納內聯元素和其他塊元素

對行內元素，需要注意如下

1.設置寬度width 無效。
2.設置高度height 無效，可以通過line-height來設置。
3.設置margin 只有左右margin有效，上下無效。
4.設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了但是對元素周圍的內容是沒影響的。

常見的塊級元素

常見的內聯元素

特性區別

行內元素與塊級元素有什么不同？

區別一：

塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

區別二：

塊級：塊級元素可以設置寬高
行內：行內元素不可以設置寬高

區別三：

塊級：塊級元素可以設置margin，padding
行內：行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

區別四：

塊級：display:block;
行內：display:inline;
可以通過修改display屬性來切換塊級元素和行內元素

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

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

三、所有元素可以繼承的屬性

1、元素可見性：visibility

2、光標屬性：cursor

四、內聯元素可以繼承的屬性

1、字體系列屬性

2、除text-indent、text-align之外的文本系列屬性

五、塊級元素可以繼承的屬性

1、text-indent、text-align

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

塊級元素水平居中：

margin : 0 auto;

行內元素水平居中：

text-align : center;

4.用 CSS 實現一個三角形

設置元素的寬高為0px,設置四條寬邊，隱藏其他三邊，即可實現一個三角形

5.單行文本溢出加 ...如何實現?

overflow: hidden;   //多余的文字變成...
text-overflow: ellipsis;   //超過邊框的文字隱藏
white-space: nowrap;   //不折行

可以通過上面三條代碼實現。

6.px, em, rem 有什么區別

px：像素,固定單位
em：相對單位，值并不是固定的，會繼承父級元素的字體大小，是默認字體大小的倍數。
rem：相對單位，rem是CSS3新增的一個相對單位，相對的只是HTML根元素，使用它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

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

%u換成/