任務(wù)8
1.塊級元素和行內(nèi)元素有哪些+區(qū)別
2.什么是 CSS 繼承? 哪些屬性能繼承，哪些不能
3. 如何讓塊級元素水平居中？如何讓行內(nèi)元素水平居中?
4. 用 CSS 實(shí)現(xiàn)一個三角形
5. 單行文本溢出加 ...如何實(shí)現(xiàn)?
6 px, em, rem 有什么區(qū)別
7.CSS編程5個實(shí)例
1.塊級元素和行內(nèi)元素分別有哪些？動手測試并列出4條以上的特性區(qū)別
- 塊級元素:
Paste_Image.png
- 行內(nèi)元素
- 補(bǔ)充可變元素
Paste_Image.png
行內(nèi)元素與塊級元素對比
- 行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素(它也包含塊級元素但是不推薦容易出bug)。
而塊級元素可以包含行內(nèi)元素和其他塊級元素。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)。
- 如果你要將行內(nèi)元素變成塊級元素，那么就只需要在該標(biāo)簽上加上樣式 display:block;
- 塊級元素可以用樣式控制其高、寬的值。
行內(nèi)元素不可以控制寬和高，除非你想將它轉(zhuǎn)變成為塊級元素。它的寬和高，是隨標(biāo)簽里的內(nèi)容而變化。
- 行內(nèi)元素會在一條直線上排列，都是同一行的，水平方向排列.
塊級元素各占據(jù)一行，垂直方向排列,塊級元素從新行開始結(jié)束接著一個斷行。- 盒模型上，塊級元素可以設(shè)置margin和padding屬性，行內(nèi)元素水平方向的margin和padding如margin-left、padding-right可以產(chǎn)生邊距效果，但是豎直方向的如padding-top和margin-bottom不會產(chǎn)生邊距效果。
2.什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？
-
CSS繼承:
1.優(yōu)先級從高到低依次為：網(wǎng)頁開發(fā)者定義的樣式、網(wǎng)頁閱讀者定義的樣式、瀏覽器的默認(rèn)樣式
2.對繼承的元素來說，子元素自身的樣式優(yōu)先級高于從父級繼承來的樣式
3.當(dāng)元素的一個 繼承屬性沒有指定值時，則取父元素的同屬性的 計(jì)算值,只有文檔根元素取該屬性的概述中給定的初始值（這里的意思應(yīng)該是在該屬性本身的定義中的默認(rèn)值）。
- 當(dāng)元素的一個 非繼承屬性 沒有指定值時，則取屬性的初始值該值在該屬性的概述里被指定。
CSS哪些屬性能繼承:
所有元素可繼承：visibility和cursor。
內(nèi)聯(lián)元素可繼承：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。
表格元素可繼承：border-collapse。
CSS哪些屬性不能繼承:
不可繼承的：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)元素水平居中?
行內(nèi)或類行內(nèi)元素（比如文本和鏈接）
行內(nèi)元素居中:
只需使用text-align: center;塊級元素:
（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width
寬度，否則塊級元素的寬度會被拉伸為父級容器的寬度）.沒設(shè)置寬度就自動拉伸,不存在居中
例子:.center-me { margin: 0 auto;}
(這里設(shè)置左右外邊距為0, 上下自動拉伸,其實(shí)這里0可以是任意數(shù)字,不影響)
4. 用 CSS 實(shí)現(xiàn)一個三角形
代碼
.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="pp">
</div>
</body>
</html>
.css文件
.pp{
width:0;
height:0;
border:20px solid transparent;
border-bottom:20px solid red;
}
結(jié)果
Snip20170315_247.png
4. 單行文本溢出加 ...如何實(shí)現(xiàn)?
.pp{
/*實(shí)現(xiàn)這行顯示...*/
width:110px;
white-space:nowrap;/*規(guī)定段落中的文本不進(jìn)行換行*/
overflow:hidden;/*設(shè)置hidden內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。*/
text-overflow:ellipsis;/*ellipsis顯示省略符號來代表被修剪的文本。*/
}
Paste_Image.png
5. px, em, rem 有什么區(qū)別
- px像素（Pixel）,相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
PX特點(diǎn)
- IE無法調(diào)整那些使用px作為單位的字體大?。?/li>
- 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
- Firefox能夠調(diào)整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
- EM
em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。
EM特點(diǎn)
- em的值并不是固定的；
- em會繼承父級元素的字體大小。
- REM
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關(guān)注。這個單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小。 -
px 與 rem 的選擇？
對于只需要適配少部分手機(jī)設(shè)備，且分辨率對頁面影響不大的，使用px即可 。
對于需要適配各種移動設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。
6. 解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- 解釋:
- body里元素字體大小設(shè)置為12px, line-height行高為之前1.5的倍,字體樣式為tahoma,系統(tǒng)里要是沒裝這種字體就采用arial樣式,沒有找到就往后推,直到找到為止,都沒有找到,就用系統(tǒng)默認(rèn)樣式sans-serif.
- 加引號:因?yàn)閱卧~間有空格,不加會誤認(rèn)為是多個單詞,誤認(rèn)為多個樣式.其實(shí)就這代表一種樣式.
-
'\5b8b\4f53':漢字宋體的unicode編碼
7. CSS編程5個實(shí)例
本節(jié)花費(fèi):3.5 Day
