1. 塊級元素和行內(nèi)元素分別有哪些？動手測試并列出4條以上的特性區(qū)別
答：
（1）塊級元素含義：block element
HTML（超文本標記語言）中元素大多數(shù)都是“塊級”元素或行內(nèi)元素掠手。塊級元素占據(jù)其父元素（容器）的整個空間，因此創(chuàng)建了一個“塊”贫贝。
（2）塊級元素舉例：
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 – 無序列表
特性：
-
塊級元素從新行開始稚晚，結(jié)束接著一個斷行崇堵。
如圖可見，2個塊元素各占一行客燕。且內(nèi)容默認占滿容器鸳劳。
image -
寬高和內(nèi)外邊距都可以控制
如圖，我們給塊元素div3設(shè)置寬度高度可以生效幸逆。
image - 寬度默認是它容器的100%棍辕，除非指定一個具體寬度
- 可以容納其它內(nèi)聯(lián)元素和塊元素
（3）行內(nèi)元素含義：inline element
也叫內(nèi)聯(lián)元素暮现、內(nèi)嵌元素等还绘；行內(nèi)元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素栖袋，常見內(nèi)聯(lián)元素 “a”拍顷。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素塘幅。例如文字這類元素昔案，各個字母 之間橫向排列，到最右端自動折行电媳。
（4）行內(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 – 下劃線
特性：
-
行內(nèi)元素橫向從左往右排列。
從圖中可以看出匾乓，兩個行內(nèi)元素從左往右排列捞稿，但是，發(fā)現(xiàn)一個有趣的現(xiàn)象拼缝，兩個元素中間有個空格娱局，原因是代碼寫的兩個標簽有個轉(zhuǎn)行，這就是為什么兩個行內(nèi)元素中間有空格的原因咧七。
image -
高衰齐，行高及外邊距和內(nèi)邊距不可改變
如圖，給行內(nèi)元素s2設(shè)置左邊距有效继阻，但是設(shè)置上邊距無效耻涛。同時，可以看出行內(nèi)元素的兩側(cè)緊貼內(nèi)容的兩邊瘟檩，發(fā)現(xiàn)寬度是由內(nèi)容所決定抹缕。image 寬度就是它的文字和圖片的寬度，不可改變
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
（5）二者區(qū)別：
區(qū)別一：
塊級：塊級元素會獨占一行芒帕，默認情況下寬度自動填滿其父元素寬度
行內(nèi)：行內(nèi)元素不會獨占一行歉嗓，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化背蟆。
區(qū)別二：
塊級：塊級元素可以設(shè)置寬高
行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
區(qū)別三：
塊級：塊級元素可以設(shè)置內(nèi)外邊距
行內(nèi)：行內(nèi)元素可以設(shè)置水平方向的內(nèi)外邊距鉴分，不可以設(shè)置豎直方向的內(nèi)外邊距
區(qū)別四：
塊級：display:block;
行內(nèi)：display:inline;
可以通過修改display屬性來切換塊級元素和行內(nèi)元素
（6）拓展： inline-block
- inline-block 的元素（如input哮幢、img)既具有 block 元素可以設(shè)置寬高的特性，同時又具有 inline 元素默認不換行的特性志珍。當(dāng)然不僅僅是這些特性橙垢，比如 inline-block 元素也可以設(shè)置 vertical-align（因為這個垂直對齊屬性只對設(shè)置了inline-block的元素有效） 屬性。
- HTML 中的換行符伦糯、空格符柜某、制表符等合并為空白符，字體大小不為 0 的情況下敛纲，空白符自然占據(jù)一定的寬度喂击，使用inline-block 會產(chǎn)生元素間的空隙
- 簡單來說：
inline-block元素可以 設(shè)置寬高，不會換行淤翔，不會占滿一行
參考鏈接：
行內(nèi)元素和塊級元素的具體區(qū)別是什么翰绊？inline-block是什么？（面試題目）
2. 什么是 CSS 繼承? 哪些屬性能繼承旁壮，哪些不能监嗜？
答：CSS繼承：
（1）含義：
- 每個 CSS 屬性定義 的概述都指出了這個屬性是默認繼承的 ("Inherited: Yes") 還是默認不繼承的 ("Inherited: no")。這決定了當(dāng)你沒有為元素的屬性指定值時該如何計算值抡谐。
- 當(dāng)元素的一個 繼承屬性 （inherited property ）沒有指定值時裁奇，則取父元素的同屬性的 計算值 computed value 。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這里的意思應(yīng)該是在該屬性本身的定義中的默認值）麦撵。
（2）哪些可以被繼承刽肠？
- 文本相關(guān)屬性
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent, texttransform,word-spacing
- 列表相關(guān)屬性
list-style-image, list-style-position,
list-style-type, list-style
- color屬性
（3）哪些不可以被繼承？
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
參考：
3. 如何讓塊級元素水平居中午笛？如何讓行內(nèi)元素水平居中?
答：
-
塊級元素水平居中：
margin: 0 auto ;
這是當(dāng)子元素為定寬且位于正常瀑布流的情況下的居中方式，當(dāng)子元素不是正常瀑布流的情況下苗桂，例如子元素浮動脫離文檔流為絕對定位時药磺，需要明確指出四個方向的定位，代碼如下：.parent{ position: relative; width: 500px; height: 100px; background-color: #eee; } .child{ position: absolute; width: 100px; height: 50px; left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; background-color: #82ab00; }?
行內(nèi)元素水平居中：
text-align: center;
但是有個缺點誉察，由于text-align: center;是可繼承屬性与涡，即父元素內(nèi)部所有元素都會繼承這個屬性，從而它在元素內(nèi)部的文本都會居中顯示持偏。因此需要對子元素的文本居中樣式單獨設(shè)定。
參考鏈接：
CSS使用技巧--實現(xiàn)元素（水平氨肌、垂直）居中
4. 用 CSS 實現(xiàn)一個三角形
答：
- 原理：設(shè)置邊框的寬度粗細鸿秆，設(shè)置其顏色微透明，組成所想要的三角形
- 實現(xiàn)代碼和效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.div{
width:0;
height:0;
border:20px solid black;
border-right:20px solid rgba(0,0,0,0);
border-bottom:20px solid rgba(0,0,0,0);
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
5. 單行文本溢出加 ...如何實現(xiàn)?
答：
//單行
.single-line{
width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
border: 1px solid black;
}
<div class="single-line"></div>
//多行
.multiple-line{
width:200px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
border: 1px solid black;
}
<div class="multile-line">
效果如下：
參考：
CSS實現(xiàn)單行怎囚、多行文本溢出顯示省略號（…）
6. px, em, rem 有什么區(qū)別?
答：
- px： (pixel，像素)恳守，是一個虛擬長度單位考婴，是計算機系統(tǒng)的數(shù)字化圖像長度單位，如果px要換算成物理長度催烘，需要指定精度DPI(Dots Per Inch沥阱，每英寸像素數(shù))，在掃描打印時一般都有DPI可選伊群。Windows系統(tǒng)默認是96dpi考杉，Apple系統(tǒng)默認是72dpi。
特點：px 在縮放頁面時無法調(diào)整那些使用它作為單位的字體舰始、按鈕等的大谐缣摹；
- em：(相對長度單位丸卷，相對于當(dāng)前對象內(nèi)文本的字體尺寸)：是一個相對長度單位枕稀，最初是指字母M的寬度，故名em。現(xiàn)指的是字符寬度的倍數(shù)萎坷，用法類似百分比范抓，如：0.8em, 1.2em,2em等莉钙。通常1em=16px扯再。
特點：em 的值并不是固定的丰刊，會繼承父級元素的字體大小鲁驶，代表倍數(shù)坏挠；
- rem：是CSS3新增的一個相對單位掸掏，這個單位引起了廣泛關(guān)注文搂。這個單位與em有什么區(qū)別呢瑰枫？區(qū)別在于使用rem為元素設(shè)定字體大小時斟叼，仍然是相對大小偶惠，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身朗涩，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小忽孽，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前谢床，除了IE8及更早版本外兄一，所有瀏覽器均已支持rem。對于不支持它的瀏覽器识腿，應(yīng)對方法也很簡單出革，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小渡讼。
特點：rem 的值并不是固定的骂束，始終是基于根元素 <html> 的，也代表倍數(shù)成箫。
參考鏈接：
7. 解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
答：
（1）作用：
依次設(shè)置 字體的大小，行高凳厢，字體類型
即: font-size / line-height ,font-family .
等價于以下代碼：
body{
font-size: 12px;
line-height: 1.2;
font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
詳細說明：
在CSS設(shè)置字體時账胧，直接寫字體中文或英文名稱瀏覽器都能識別，直接寫中文的情況下編碼(GB2312,UTF-8等)不匹配時會產(chǎn)生亂碼先紫。保險的方式是將字體名稱使用Unicode來表示治泥，每一種字體都有唯一的Unicode 編碼與之對應(yīng)。
舉例2種情況：
（1）當(dāng)你的網(wǎng)頁字體設(shè)置為
font-family:'微軟雅黑'時遮精，某個外國人打開你的網(wǎng)頁居夹，但是他的系統(tǒng)里面是沒有 “微軟雅黑” 這幾個字的败潦，所以我們設(shè)置的font-family:'微軟雅黑'外國人的電腦就不能識別 ，這樣的話准脂，即使他的電腦里面安裝了Microsoft YaHei這種字體劫扒，但是不能和我們網(wǎng)頁設(shè)置的字體對應(yīng)起來；（2）但我們在寫CSS的時候保存為 GB2312的格字符編碼式狸膏，但是用戶在使用瀏覽器的解析我們的代碼使用的是 UTF-8 字符編碼格式沟饥，此時會產(chǎn)生亂碼。
那湾戳，我們該怎么辦呢贤旷？
引號：
我們對每一種字體設(shè)置一種它指定的英文名字，例如 “宋體” 為 “SimSun” 砾脑，“黑體”為 “SimHei” 幼驶，“微軟雅黑” 為 “Microsoft YaHei”，因為這個名字較長中間有空格韧衣，所以我們使用 引號將它包裹起來
'\5b8b\4f53'：上述方法中盅藻，我們使用引號將字體名字包裹起來，貌似已經(jīng)解決了字體的問題畅铭，但是氏淑，在有些瀏覽器中對使用引號包裹起來的字體存在兼容的問題，依然無法識別顶瞒，怎么辦夸政？此時就與要用到 Unicode 編碼的方式，比如：黑體的 Unicode 編碼為
\9ED1\4F53榴徐，宋體的Unicode 編碼為\5B8B\4F53，微軟雅黑的Unicode 編碼為\5FAE\8F6F\96C5\9ED1,其中用\來區(qū)分一個中文字符匀归。這樣的話坑资，使用 “中文+英文+Unicode編碼” 的方式就可以確定你使用的字體啦。
- 我們?nèi)绾蔚玫矫恳环N字體的對應(yīng)的Unicode編碼呢穆端？只需要在控制臺輸入
escape('字體')即可得到袱贮，然后使用\替換對應(yīng)的%u即可， 如圖体啰。image
