1、塊級元素和行內(nèi)元素分別有哪些？它們的特性區(qū)別有哪些？

1、塊級元素(block element)，占據(jù)其父元素（容器）的整個空間，因此創(chuàng)建了一個“塊”。通常瀏覽器會在塊級元素前后另起一行。能容納其他塊元素或者內(nèi)聯(lián)元素。

常見的塊級元素有：

• address - 地址
• blockquote - 塊引用
• center - 舉中對齊塊
• dir - 目錄列表
• div - 常用塊級容易，也是css layout的主要標(biāo)簽
• dl - 定義列表
• fieldset - form控制組
• form - 交互表單
• h1 - 大標(biāo)題
• h2 - 副標(biāo)題
• h3 - 3級標(biāo)題
• h4 - 4級標(biāo)題
• h5 - 5級標(biāo)題
• h6 - 6級標(biāo)題
• hr - 水平分隔線
• isindex - input prompt
• menu - 菜單列表
• noframes - frames可選內(nèi)容（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容）
• noscript - 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
• ol - 排序列表
• p - 段落
• pre - 格式化文本
• table - 表格
• ul - 非排序列表

2、行內(nèi)元素(inline element)又稱內(nèi)聯(lián)元素，只占據(jù)它對應(yīng)標(biāo)簽的邊框所包含的空間。只能容納文本或者其他內(nèi)聯(lián)元素。

常見的行內(nèi)元素有：

• a - 錨點(diǎn)
• abbr - 縮寫
• acronym - 首字
• b - 粗體（不推薦）
• bdo - bidi override
• big - 大字體
• br - 換行
• cite - 引用
• code - 計算機(jī)代碼（在引用源碼的時候需要）
• dfn - 定義字段
• em - 強(qiáng)調(diào)
• font - 字體設(shè)定（不推薦）
• i - 斜體
• img - 圖片
• input - 輸入框
• kbd - 定義鍵盤文本
• label - 表格標(biāo)簽
• q - 短引用
• s - 中劃線（不推薦）
• samp - 定義范例計算機(jī)代碼
• select - 項(xiàng)目選擇
• small - 小字體文本
• span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
• strike - 中劃線
• strong - 粗體強(qiáng)調(diào)
• sub - 下標(biāo)
• sup - 上標(biāo)
• textarea - 多行文本輸入框
• tt - 電傳文本
• u - 下劃線
• var - 定義變量

塊級元素與行內(nèi)元素的區(qū)別：

• 塊級元素會獨(dú)占一行，默認(rèn)情況下，其寬度自動填滿其父元素寬度。行內(nèi)元素不會獨(dú)占一行,相鄰的行內(nèi)元素會排列在同一行里，直到一行排不下，才會換行,其寬度隨元素的內(nèi)容而變化。
• 塊級元素可以設(shè)置width,height屬性，塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。行內(nèi)元素設(shè)置width，height屬性無效，它的長度高度主要根據(jù)內(nèi)容決定。
• 塊級元素可以設(shè)置margin和padding屬性。行內(nèi)元素的margin和padding屬性。水平方向的padding-left，padding-right，margin-left，margin- right都產(chǎn)生邊距效果，但豎直方向的padding-top，padding-bottom，margin-top，margin-bottom卻不會產(chǎn)生邊距效果。
• 塊級元素對應(yīng)于display: block。行內(nèi)元素對應(yīng)于display: inline。

補(bǔ)充：如果想讓一個元素可以設(shè)置寬度高度，又讓它以行內(nèi)形式顯示，我們可以設(shè)置display的值為inline-block。

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

1、css繼承：設(shè)置父級元素的樣式，其子級元素的樣式會和父級元素一樣；

2、不可繼承的屬性：
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。
可繼承的屬性：

• 對于行內(nèi)元素，可繼承的屬性有：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。
• 對于列表元素，可繼承的屬性有：list-style、list-style-type、list-style-position、list-style-image。
• 對于表格元素，可繼承的屬性有：border-collapse。
• 所有元素都可繼承得屬性有：visibility和cursor。

3、如何讓塊級元素水平居中？如何讓行內(nèi)元素水平居中?

• 讓塊級元素居中設(shè)置需要margin屬性：
  margin：0 auto；//上下margin值隨意設(shè)置，左右margin值設(shè)置為auto
• 讓行內(nèi)元素水平居中需要設(shè)置text-align屬性，text-align屬性是作用在塊級元素上讓里面的文本居中：
  <div class='box'> 我要居中我要居中我要居中 </div> //若想要上面的文本居中，對應(yīng)的CSS樣式因如下所示編寫 div{ text-align: center }

4、文本溢出解決方法。

解決文本溢出問題，我們需要設(shè)置兩個屬性：

• white-space: nowrap ，強(qiáng)制文本在一行內(nèi)顯示
• overflow: hidden ，將溢出內(nèi)容改為隱藏
  { white-space: nowrap; overflow: hidden; }

補(bǔ)充：若想將溢出內(nèi)容顯示為省略標(biāo)記......最后我們還需要設(shè)置text-overflow屬性：

• text-overflow: ellipsis ，將文本溢出內(nèi)容顯示為省略標(biāo)記
• text-overflow: clip ， 把文本溢出的部分裁切掉
  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis或clip }

5、px em rem有什么區(qū)別？

1、px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。在Web頁面制作中，我們一般使用“px”來設(shè)置我們的文本，因?yàn)樗容^穩(wěn)定和精確。但是這種方法存在一個問題，當(dāng)用戶在瀏覽器中瀏覽我們制作的 Web頁面時，他改變了瀏覽器的字體大小（雖然一般人不會去改變?yōu)g覽器字體大?。@時會使用我們的Web頁面布局被打破，這時就提出了使用“em”來定 義Web頁面的字體。

PX特點(diǎn)：

• IE無法調(diào)整那些使用px作為單位的字體大??；
• 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
• Firefox能夠調(diào)整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。

2、em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。一般都是以body的font-size為基準(zhǔn)。在使用“em”作單位時，一定需要知道其父元素的設(shè)置，因?yàn)椤癳m”就是一個相對值，而且是一個相對于父元素的值。
計算公式：1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

EM特點(diǎn)：

• em的值并不是固定的；
• em會繼承父級元素的字體大小

注意：任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。
所以我們在寫CSS的時候，需要注意兩點(diǎn)：

1. body選擇器中聲明Font-size=62.5%；
2. 將你的原來的px數(shù)值除以10，然后換上em作為單位；
3. 重新計算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。
   也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。

3、rem是CSS3新增的一個相對單位，是指根元素（root element，html）的字體大小。這個單位與em的區(qū)別在于使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素。

比如默認(rèn)的 html font-size=16px，那么我想設(shè)置12px 的文字就是：12÷16=0.75（rem）

為了方便計算，我們改變一下 html 的默認(rèn) font-size=10px

html{ font-size:62.5%; /* 10÷16=62.5% */ } body{ font-size:12px; font-size:1.2rem ; /* 12÷10=1.2 */ } p{ font-size:14px; font-size:1.4rem; }

需要注意的是，為了兼容不支持 rem 的瀏覽器，我們需要在 rem 前面寫上對應(yīng)的 px 值，這樣不支持的瀏覽器可以優(yōu)雅降級。其實(shí)不用太糾結(jié)是默認(rèn)的 font-size:100%，還是設(shè)置為 font-size:62.5%，如果你引入 了 CSS 預(yù)處理工具那么自然可以使用默認(rèn)值，如果由于其他原因使用 font-size:62.5% 也無可厚非，完全可以在 body 中重置回你需要的默認(rèn) font-size。

這個單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。

補(bǔ)充：

px 與 rem 的選擇：

• 對于只需要適配少部分手機(jī)設(shè)備，且分辨率對頁面影響不大的，使用px即可 。
• 對于需要適配各種移動設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。