塊級(jí)元素和行內(nèi)元素分別有哪些瞒斩？動(dòng)手測試并列出4條以上的特性區(qū)別
塊級(jí)元素：
<div>文檔分區(qū)
<h1>~<h6>
<p>段落
<hr>水平線
<pre>預(yù)格式化文本
<hgroup>標(biāo)題組-實(shí)驗(yàn)中的功能。
<ul>無序列表
<ol>有序列表
<table>表格
<tfoot>表腳注
<form>表單
<fieldset>表單元素分組
<output>表單輸出
<header>頁頭
<footer>頁尾
<section>分區(qū)或節(jié)
<artical>文章內(nèi)容
<aside>側(cè)邊欄
<address>聯(lián)系方式信息
<noscript>不支持或禁用腳本時(shí)顯示的內(nèi)容
<audio>音頻
<video>視頻
<blockquote>塊引用
<canvas>繪制圖形
<dd>定義列表中定義條目描述
<dl>定義列表
<figure>圖文信息組
<figcaption>圖文信息組標(biāo)題
行內(nèi)元素：
<span>
<a>定義錨
<b>定義粗體
<i>定義斜體
<tt>
<abbr>定義縮寫
<acronym>定義取得首字母縮寫
<cite>定義引用
<big>定義大號(hào)文本
<small>定義小號(hào)文本
<br>定義折行
<dfn>定義定義項(xiàng)目
<em>定義
<strong>
<img>定義圖片
<map>定義圖像映射
<script>定義腳本
<sub>定義下標(biāo)文本
<sup>定義上標(biāo)文本
<button>定義按鈕
<input>定義輸入框
<label>定義表格標(biāo)題
<select>定義選擇下拉列表
<textarea>定義文本域
區(qū)別：
- 一般行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素糖赔，塊級(jí)元素可以包含行內(nèi)元素和自身／其他塊級(jí)元素。
- 默認(rèn)情況下塊級(jí)元素占用一整行株憾，而行內(nèi)元素占據(jù)自身寬度空間庇麦。
- 寬高只對塊級(jí)元素設(shè)置生效计技，對行內(nèi)元素?zé)o效。但如果給行內(nèi)元素設(shè)定絕對定位（如a{position:absolute;}，脫離了正常文檔流)，絕對定位會(huì)隱性的改變a的display為inline-block恳谎，此時(shí)就可以把a(bǔ)當(dāng)成塊狀元素一樣設(shè)置寬高了，除了給a顯式的設(shè)置display值為none這種情況睡雇。
- 塊級(jí)元素可設(shè)置padding和margin，行內(nèi)元素只能設(shè)置padding及左右margin饮醇，且設(shè)置padding時(shí)左右padding推開距離它抱，上下padding會(huì)延伸出去，但不會(huì)增加上下兩行間的距離朴艰。
什么是 CSS 繼承? 哪些屬性能繼承观蓄，哪些不能？
每個(gè) CSS 屬性定義 的概述都指出了某個(gè)屬性是默認(rèn)繼承的 ("Inherited: Yes") 還是默認(rèn)不繼承的 ("Inherited: no")祠墅。這決定了當(dāng)你沒有為元素的屬性指定值時(shí)該如何計(jì)算值侮穿。
當(dāng)元素的一個(gè) 繼承屬性 （inherited property ）沒有指定值時(shí)，則取父元素的同屬性的 計(jì)算值 computed value 毁嗦。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這里的意思應(yīng)該是在該屬性本身的定義中的默認(rèn)值）亲茅。
通過 CSS 繼承，子元素將繼承最高級(jí)元素所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）狗准。如設(shè)置body{font-family:Verdana;}芯急，不需要另外的規(guī)則，所有 body 的子元素都應(yīng)該顯示 Verdana 字體驶俊，子元素的子元素也一樣。而比如p不想繼承高級(jí)元素body的字體屬性免姿，只需要針對自身的特殊規(guī)則饼酿，如p{font-family:Times}，即可擺脫父元素的規(guī)則。
這就是CSS繼承故俐。
繼承屬性：color想鹰、font-size、font-family药版、font-style辑舷、letter-spacing、white-spacing槽片、text-decoration何缓、text-align、text-indent等还栓。
非繼承屬性：display碌廓、height、width剩盒、padding谷婆、border、margin辽聊、min-width纪挎、max-width、min-height跟匆、max-height异袄、background、overflow贾铝、position隙轻、float、clear垢揩、top玖绿、right、bottom叁巨、left斑匪、vertical-align等。
注意：inherit 關(guān)鍵字 用于顯式地指定繼承性锋勺，可用于繼承性/非繼承性屬性蚀瘸。
如何讓塊級(jí)元素水平居中？如何讓行內(nèi)元素水平居中?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h2 {
width: 300px;
background: pink;
margin: 0 auto;
}
.class1 {
position: relative;
height: 400px;
background: yellow;
}
p {
width: 400px;
background: green;
}
p {
background: red;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.class2 {
margin: 20px;
padding: 10px;
width: 400px;
background: green;
text-align: center;
}
</style>
</head>
<body>
<h2>hello dolby!</h2>
<div class="class1">
<p>hello world!</p>
</div>
<div class="class2"><a href="">hello main!</a></div>
</body>
</html>
用 CSS 實(shí)現(xiàn)一個(gè)三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
height: 0;
width: 0;
border-top: 0;
border-right: 100px solid transparent;
/* border-left: 100px solid transparent; */
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
單行文本溢出加 ...如何實(shí)現(xiàn)?
以下樣式可讓文字過長時(shí)顯示...庶橱，如果想提早出現(xiàn)...可給元素設(shè)置width或max-width屬性贮勃。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
/* 設(shè)置文本不換行，直到遇到br標(biāo)簽為止 */
white-space: nowrap;
/* 設(shè)置溢出元素被蓉區(qū)的內(nèi)容隱藏 */
overflow: hidden;
/* 設(shè)置文本溢出時(shí)顯示省略號(hào)代表被隱藏的文本 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
唐僧：你想要八照隆寂嘉？你要是想要的話你就說話嘛奏瞬，你不說我怎么知道你想要呢，雖然你很有誠意地看著我泉孩，可是你還是要跟我說你想要的硼端。
難道你真的想要嗎？你想要的話我會(huì)給你的寓搬，你想要我怎么可能不給你呢珍昨？不可能你想我不給你，你不想要我卻偏給你的句喷。
大家講道理嘛镣典！現(xiàn)在我數(shù)三下，你要說清楚你要不要……你真的想要嗎脏嚷？那你就拿去吧骆撇！你不是真的想要吧？
</p>
</body>
</html>
多行文本溢出加 ...如何實(shí)現(xiàn)?
以下樣式可讓段落過長時(shí)顯示...父叙，如果想提早出現(xiàn)...可給元素設(shè)置width或max-width屬性神郊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
/* 設(shè)置文本框?qū)挾燃斑吙? */
width: 300px;
border: 1px solid black;
/* 將對象作為彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 設(shè)置顯示的文本行數(shù) */
-webkit-line-clamp: 3;
/* 設(shè)置溢出元素內(nèi)容區(qū)的內(nèi)容隱藏 */
overflow: hidden;
/* 設(shè)置文本溢出時(shí)顯示省略號(hào)代表被隱藏的文本 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
唐僧：你想要啊趾唱？你要是想要的話你就說話嘛涌乳，你不說我怎么知道你想要呢，雖然你很有誠意地看著我甜癞，可是你還是要跟我說你想要的夕晓。
難道你真的想要嗎？你想要的話我會(huì)給你的悠咱，你想要我怎么可能不給你呢蒸辆？不可能你想我不給你，你不想要我卻偏給你的析既。
大家講道理嘛躬贡！現(xiàn)在我數(shù)三下，你要說清楚你要不要……你真的想要嗎眼坏？那你就拿去吧拂玻！你不是真的想要吧？
</p>
</body>
</html>
px, em, rem 有什么區(qū)別
px: 絕對/固定單位宰译，通常情況下瀏覽器默認(rèn)文字大小為16px
em: 相對單位檐蚜，表示當(dāng)前字體大小是父容器字體大小的多少倍
rem:相對單位，表示當(dāng)前字體大小是根元素(html)字體大小的多少倍沿侈，IE8及之前版本不支持闯第。
解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
設(shè)置body字體大小為12px，行高為字體大小的1.5倍缀拭，字體取值依次是tahoma咳短，arial肃廓，Hiragino Sans GB，宋體诲泌，sans-serif，瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值铣鹏。加引號(hào)是因?yàn)樽煮w族名包含空格敷扫，不加會(huì)被瀏覽器誤認(rèn)為是多個(gè)族名。'\5b8b\4f53'：是“宋體”的Unicode編碼表示诚卸。
