1舶斧、塊級元素和行內(nèi)元素分別有哪些稻爬？它們的特性區(qū)別有哪些？
1桅锄、塊級元素(block element)竞滓，占據(jù)其父元素（容器）的整個空間商佑，因此創(chuàng)建了一個“塊”锯茄。通常瀏覽器會在塊級元素前后另起一行。能容納其他塊元素或者內(nèi)聯(lián)元素茶没。
常見的塊級元素有：
- address - 地址
- blockquote - 塊引用
- center - 舉中對齊塊
- dir - 目錄列表
- div - 常用塊級容易肌幽，也是css layout的主要標簽
- dl - 定義列表
- fieldset - form控制組
- form - 交互表單
- h1 - 大標題
- h2 - 副標題
- h3 - 3級標題
- h4 - 4級標題
- h5 - 5級標題
- h6 - 6級標題
- 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)標簽的邊框所包含的空間喂急。只能容納文本或者其他內(nèi)聯(lián)元素。
常見的行內(nèi)元素有：
- a - 錨點
- abbr - 縮寫
- acronym - 首字
- b - 粗體（不推薦）
- bdo - bidi override
- big - 大字體
- br - 換行
- cite - 引用
- code - 計算機代碼（在引用源碼的時候需要）
- dfn - 定義字段
- em - 強調(diào)
- font - 字體設(shè)定（不推薦）
- i - 斜體
- img - 圖片
- input - 輸入框
- kbd - 定義鍵盤文本
- label - 表格標簽
- q - 短引用
- s - 中劃線（不推薦）
- samp - 定義范例計算機代碼
- select - 項目選擇
- small - 小字體文本
- span - 常用內(nèi)聯(lián)容器笛求，定義文本內(nèi)區(qū)塊
- strike - 中劃線
- strong - 粗體強調(diào)
- sub - 下標
- sup - 上標
- textarea - 多行文本輸入框
- tt - 電傳文本
- u - 下劃線
- var - 定義變量
塊級元素與行內(nèi)元素的區(qū)別：
- 塊級元素會獨占一行廊移，默認情況下糕簿，其寬度自動填滿其父元素寬度。行內(nèi)元素不會獨占一行,相鄰的行內(nèi)元素會排列在同一行里狡孔，直到一行排不下懂诗，才會換行,其寬度隨元素的內(nèi)容而變化。
- 塊級元素可以設(shè)置width,height屬性苗膝，塊級元素即使設(shè)置了寬度,仍然是獨占一行殃恒。行內(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惰拱。
補充：如果想讓一個元素可以設(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 疗涉，強制文本在一行內(nèi)顯示
- overflow: hidden ，將溢出內(nèi)容改為隱藏
{ white-space: nowrap; overflow: hidden; }
補充：若想將溢出內(nèi)容顯示為省略標記......最后我們還需要設(shè)置text-overflow屬性：
- text-overflow: ellipsis 吟秩，將文本溢出內(nèi)容顯示為省略標記
- text-overflow: clip 咱扣， 把文本溢出的部分裁切掉
{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis或clip }
5、px em rem有什么區(qū)別涵防？
1偏窝、px像素（Pixel）。相對長度單位武学。像素px是相對于顯示器屏幕分辨率而言的祭往。在Web頁面制作中，我們一般使用“px”來設(shè)置我們的文本火窒，因為他比較穩(wěn)定和精確硼补。但是這種方法存在一個問題，當用戶在瀏覽器中瀏覽我們制作的 Web頁面時熏矿，他改變了瀏覽器的字體大幸押А（雖然一般人不會去改變?yōu)g覽器字體大小）票编，這時會使用我們的Web頁面布局被打破褪储，這時就提出了使用“em”來定 義Web頁面的字體。
PX特點：
- IE無法調(diào)整那些使用px作為單位的字體大谢塾颉鲤竹；
- 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
- Firefox能夠調(diào)整px和em昔榴，rem辛藻，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)碘橘。
2、em是相對長度單位吱肌。相對于當前對象內(nèi)文本的字體尺寸痘拆。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸氮墨。一般都是以body的font-size為基準纺蛆。在使用“em”作單位時，一定需要知道其父元素的設(shè)置规揪，因為“em”就是一個相對值桥氏，而且是一個相對于父元素的值。
計算公式：1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值
EM特點：
- em的值并不是固定的粒褒；
- em會繼承父級元素的字體大小
注意：任意瀏覽器的默認字體高都是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的時候抠艾，需要注意兩點：
- body選擇器中聲明Font-size=62.5%苛萎；
- 將你的原來的px數(shù)值除以10，然后換上em作為單位检号；
- 重新計算那些被放大的字體的em數(shù)值腌歉。避免字體大小的重復聲明。
也就是避免1.2 * 1.2= 1.44的現(xiàn)象齐苛。比如說你在#content中聲明了字體大小為1.2em翘盖，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em凹蜂，它因繼承#content的字體高而變?yōu)榱?em=12px馍驯。
3、rem是CSS3新增的一個相對單位玛痊，是指根元素（root element汰瘫，html）的字體大小。這個單位與em的區(qū)別在于使用rem為元素設(shè)定字體大小時擂煞，仍然是相對大小混弥，但相對的只是HTML根元素。
比如默認的 html font-size=16px对省，那么我想設(shè)置12px 的文字就是：12÷16=0.75（rem）
為了方便計算剑逃，我們改變一下 html 的默認 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)雅降級粟瞬。其實不用太糾結(jié)是默認的 font-size:100%，還是設(shè)置為 font-size:62.5%萤捆，如果你引入 了 CSS 預處理工具那么自然可以使用默認值裙品，如果由于其他原因使用 font-size:62.5% 也無可厚非，完全可以在 body 中重置回你需要的默認 font-size俗或。
這個單位可謂集相對大小和絕對大小的優(yōu)點于一身市怎，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復合的連鎖反應(yīng)辛慰。目前区匠，除了IE8及更早版本外，所有瀏覽器均已支持rem帅腌。
補充：
px 與 rem 的選擇：
- 對于只需要適配少部分手機設(shè)備驰弄，且分辨率對頁面影響不大的，使用px即可 速客。
- 對于需要適配各種移動設(shè)備戚篙，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備溺职。
