1.塊級(jí)元素和行內(nèi)元素分別有哪些檬洞？動(dòng)手測(cè)試并列出4條以上的特性區(qū)別?

基本概念：

一荡陷、塊級(jí)元素：block element

每個(gè)塊級(jí)元素默認(rèn)占一行高度雨效，一行內(nèi)添加一個(gè)塊級(jí)元素后無(wú)法一般無(wú)法添加其他元素（float浮動(dòng)后除外）。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)废赞，會(huì)在頁(yè)面自動(dòng)換行顯示徽龟。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；
塊級(jí)元素一般作為容器出現(xiàn)唉地，用來(lái)組織結(jié)構(gòu)据悔，但并不全是如此。有些塊級(jí)元素耘沼，如<form>只能包含塊級(jí)元素极颓。其他的塊級(jí)元素則可以包含行級(jí)元素如<P>.也有一些則既可以包含塊級(jí)，也可以包含行級(jí)元素群嗤。
DIV 是最常用的塊級(jí)元素菠隆，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來(lái)，并且跟同級(jí)的兄弟塊依次豎直排列浸赫，左右撐滿闰围。

二、行內(nèi)元素：inline element

也叫內(nèi)聯(lián)元素既峡、內(nèi)嵌元素等羡榴；行內(nèi)元素一般都是基于語(yǔ)義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素运敢，常見(jiàn)內(nèi)聯(lián)元素 “a”校仑。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素传惠。例如文字這類元素迄沫，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行卦方。

三羊瘩、block（塊）元素的特點(diǎn)

① 總是在新行上開(kāi)始；

② 高度盼砍，行高以及外邊距和內(nèi)邊距都可控制尘吗；

③ 寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度浇坐。

四睬捶、inline元素的特點(diǎn)

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

② 高近刘，行高及外邊距和內(nèi)邊距不可改變擒贸；

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

④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

④觉渴、它可以容納內(nèi)聯(lián)元素和其他塊元素

對(duì)行內(nèi)元素介劫，需要注意如下

1.設(shè)置寬度width 無(wú)效。
2.設(shè)置高度height 無(wú)效疆拘，可以通過(guò)line-height來(lái)設(shè)置蜕猫。
3.設(shè)置margin 只有左右margin有效寂曹，上下無(wú)效哎迄。
4.設(shè)置padding 只有左右padding有效，上下則無(wú)效隆圆。注意元素范圍是增大了但是對(duì)元素周圍的內(nèi)容是沒(méi)影響的漱挚。

常見(jiàn)的塊級(jí)元素

常見(jiàn)的內(nèi)聯(lián)元素

特性區(qū)別

行內(nèi)元素與塊級(jí)元素有什么不同？

區(qū)別一：

塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行侣背，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度
行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行白华，相鄰的行內(nèi)元素會(huì)排在同一行慨默。其寬度隨內(nèi)容的變化而變化。

區(qū)別二：

塊級(jí)：塊級(jí)元素可以設(shè)置寬高
行內(nèi)：行內(nèi)元素不可以設(shè)置寬高

區(qū)別三：

塊級(jí)：塊級(jí)元素可以設(shè)置margin弧腥，padding
行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效厦取。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

區(qū)別四：

塊級(jí)：display:block;
行內(nèi)：display:inline;
可以通過(guò)修改display屬性來(lái)切換塊級(jí)元素和行內(nèi)元素

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

CSS 繼承：子元素沒(méi)有指定值的情況繼承父元素的屬性。

一更鲁、無(wú)繼承性的屬性

1霎箍、display：規(guī)定元素應(yīng)該生成的框的類型

2、文本屬性：

vertical-align：垂直文本對(duì)齊

text-decoration：規(guī)定添加到文本的裝飾

text-shadow：文本陰影效果

white-space：空白符的處理

unicode-bidi：設(shè)置文本的方向

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夯接、生成內(nèi)容屬性：content焕济、counter-reset、counter-increment

7盔几、輪廓樣式屬性：outline-style晴弃、outline-width、outline-color逊拍、outline

8上鞠、頁(yè)面樣式屬性：size、page-break-before顺献、page-break-after

9旗国、聲音樣式屬性：pause-before枯怖、pause-after注整、pause、cue-before、cue-after肿轨、cue寿冕、play-during

二、有繼承性的屬性

1椒袍、字體系列屬性

font：組合字體

font-family：規(guī)定元素的字體系列

font-weight：設(shè)置字體的粗細(xì)

font-size：設(shè)置字體的尺寸

font-style：定義字體的風(fēng)格

font-variant：設(shè)置小型大寫字母的字體顯示文本驼唱，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比驹暑，其字體尺寸更小玫恳。

font-stretch：對(duì)當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持优俘。

font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值京办，這樣就可以保持首選字體的 x-height。

2帆焕、文本系列屬性

text-indent：文本縮進(jìn)

text-align：文本水平對(duì)齊

line-height：行高

word-spacing：增加或減少單詞間的空白（即字間隔）

letter-spacing：增加或減少字符間的空白（字符間距）

text-transform：控制文本大小寫

direction：規(guī)定文本的書(shū)寫方向

color：文本顏色

3惭婿、元素可見(jiàn)性：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、生成內(nèi)容屬性：quotes

7漓滔、光標(biāo)屬性：cursor

8编饺、頁(yè)面樣式屬性：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归敬、元素可見(jiàn)性：visibility

2、光標(biāo)屬性：cursor

四鄙早、內(nèi)聯(lián)元素可以繼承的屬性

1汪茧、字體系列屬性

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

五陆爽、塊級(jí)元素可以繼承的屬性

1、text-indent扳缕、text-align

3.如何讓塊級(jí)元素水平居中慌闭？如何讓行內(nèi)元素水平居中?

塊級(jí)元素水平居中：

margin : 0 auto;

行內(nèi)元素水平居中：

text-align : center;

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

設(shè)置元素的寬高為0px,設(shè)置四條寬邊，隱藏其他三邊躯舔，即可實(shí)現(xiàn)一個(gè)三角形

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

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

可以通過(guò)上面三條代碼實(shí)現(xiàn)驴剔。

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

px：像素,固定單位
em：相對(duì)單位，值并不是固定的粥庄，會(huì)繼承父級(jí)元素的字體大小丧失，是默認(rèn)字體大小的倍數(shù)。
rem：相對(duì)單位惜互，rem是CSS3新增的一個(gè)相對(duì)單位，相對(duì)的只是HTML根元素训堆，使用它既可以做到只修改根元素就成比例地調(diào)整所有字體大小描验，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

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

%u換成/