1.塊級(jí)元素與行內(nèi)元素分別有哪些?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別
-
塊狀元素列表
-
行內(nèi)元素列表
-
可變?cè)亓斜?/p>
塊級(jí)元素的特點(diǎn)
1.總是獨(dú)占一行,默認(rèn)情況下,其寬度自動(dòng)填滿其父容器的寬度;
2.塊級(jí)元素可以設(shè)置width,height屬性;
3.塊級(jí)元素即使設(shè)置了寬度也是獨(dú)占一行，塊級(jí)元素可以設(shè)置margin、padding屬性；行內(nèi)元素的特點(diǎn)
1.行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到行排不下，就自動(dòng)換行，其寬度隨內(nèi)容而變化；
2.行內(nèi)元素的width、height屬性則無(wú)效；
3.行內(nèi)元素的margin、padding屬性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都會(huì)產(chǎn)生邊距效果，但是豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不產(chǎn)生邊距效果。詳細(xì)可以參考相關(guān)討論塊級(jí)元素與行內(nèi)元素的主要區(qū)別
1.塊級(jí)元素各占據(jù)一行,且會(huì)另起一行,而行內(nèi)元素會(huì)在同一行水平方向排列,這是行內(nèi)元素與塊級(jí)元素直觀上的區(qū)別;
2.塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素;
3.塊級(jí)元素可以設(shè)置width,height,而行內(nèi)元素則不能設(shè)置width,height,行內(nèi)元素是由其內(nèi)容決定寬度和高度,因此無(wú)法設(shè)置寬度和高度;
4.塊級(jí)元素只能包含文本和塊級(jí)元素;
行內(nèi)(inline-level)元素與塊級(jí)(block-level)元素的css相關(guān)屬性是display
相關(guān)聯(lián)的幾點(diǎn)總結(jié)
1.display:inline 對(duì)應(yīng)不顯示為 display:none
2.display:block 對(duì)應(yīng)不顯示為 hidden
說(shuō)通俗點(diǎn) 樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方。Visibility:none 和 Display:hidden 的區(qū)別是：
1.visibility:visible（元素可見(jiàn)，默認(rèn)值）
2.visibility:hidden（元素不可見(jiàn)，但仍然為其保留相應(yīng)的空間）
display:none;
使用該屬性后，HTML元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”;
visibility:hidden;
使用該屬性后，HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說(shuō)它仍具有高度、寬度等屬性值。
2.什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？
所謂的css繼承指的是被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì),它是一種機(jī)制,它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代。在css中，繼承是一種非常自然的行為，但是繼承也有其局限性。有些屬性是不能繼承的。這沒(méi)有任何原因，只是因?yàn)橐?guī)則就是這么設(shè)置的。
以下元素是不可以被繼承的:
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所有元素可繼承：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。
3.如何讓塊級(jí)元素水平居中？如何讓行內(nèi)元素水平居中?
- 塊級(jí)元素居中語(yǔ)法：margin：0 auto；
- 行內(nèi)元素水平居中：text-align：center；
4.單行文本溢出加.......如何實(shí)現(xiàn)？
要使得單行文本溢出可采取以下代碼
·
E{
white-space:nowrap; /強(qiáng)制在同一行內(nèi)顯示所有文本， 直到文本結(jié)束或者遭遇br對(duì)象。/
overflow:hidden; /隱藏溢出/
text-overflow;ellipsis;;/*當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）。 */
}
·
5.px, em, rem 有什么區(qū)別
- px ：像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
- IE無(wú)法調(diào)整那些使用px作為單位的字體大小；
- 國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
- Firefox能夠調(diào)整px和em，rem，但是96%以上的中國(guó)網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
-
em ：是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
- em的值并不是固定的；
- em會(huì)繼承父級(jí)元素的字體大小。
rem ：是CSS3新增的一個(gè)相對(duì)單位（root em，根em）使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。
解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
`
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
-
代碼作用`
- 設(shè)置默認(rèn)字體大小為12px，字體行高1.5，字體樣式（優(yōu)先級(jí)依次遞減）
-
為什么要加引號(hào)？
- 當(dāng)字體名字為中文時(shí)，需要加引號(hào)
- 當(dāng)有多個(gè)英文單詞，空格隔開(kāi)的字體名字，需要加引號(hào)
-
字體里..代表什么？
- 代表字體的Unicod碼，Unicode碼全球通用，用該碼表示字體是最保險(xiǎn)的，獲得該碼的方式可以在網(wǎng)上查找，或者在開(kāi)發(fā)者工具中輸入escape指令。
- \5b8b 為Unicode的“宋”，\4f53 為Unicode的“體”，合起來(lái)即為宋體。
