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)單，就是多寫(xiě)一個(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)即為宋體肛走。
