1.塊級(jí)元素和行內(nèi)元素分別有哪些午乓？動(dòng)手測(cè)試并列出4條以上的特性區(qū)別
- 塊級(jí)元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
- 行內(nèi)元素：span, strong, em, br, img , input, label, select, textarea, cite
- 區(qū)別：
- 塊級(jí)元素寬單獨(dú)占據(jù)整行蝉娜，行內(nèi)元素寬高是內(nèi)容的寬高
- 塊級(jí)元素可以設(shè)置寬高倚聚，行內(nèi)元素不能設(shè)置寬高
- 塊級(jí)元素可以設(shè)定margin忌傻、padding驶悟，行內(nèi)元素margin蕾盯、padding不能設(shè)置top、bottom
- 塊級(jí)元素可以放置行內(nèi)元素太惠、文字磨淌，行內(nèi)元素只能放置行內(nèi)元素和文字
- 塊級(jí)元素和行內(nèi)元素某些屬性值不同，如：margin:0 auto凿渊、text-align
2.什么是 CSS 繼承? 哪些屬性能繼承梁只，哪些不能？
- css繼承：設(shè)置父級(jí)元素埃脏，其子級(jí)元素的樣式會(huì)和父級(jí)元素一樣搪锣。
-
能繼承的元素：
1、字體系列屬性
font：組合字體
font-family：規(guī)定元素的字體系列
font-weight：設(shè)置字體的粗細(xì)
font-size：設(shè)置字體的尺寸
font-style：定義字體的風(fēng)格
font-variant：設(shè)置小型大寫(xiě)字母的字體顯示文本彩掐，這意味著所有的小寫(xiě)字母均會(huì)被轉(zhuǎn)換為大寫(xiě)构舟，但是所有使用小型大寫(xiě)字體的字母與其余文本相比，其字體尺寸更小佩谷。
font-stretch：對(duì)當(dāng)前的 font-family 進(jìn)行伸縮變形旁壮。所有主流瀏覽器都不支持监嗜。
font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值谐檀，這樣就可以保持首選字體的 x-height。
2裁奇、文本系列屬性
text-indent：文本縮進(jìn)
text-align：文本水平對(duì)齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫(xiě)
direction：規(guī)定文本的書(shū)寫(xiě)方向
color：文本顏色
3桐猬、元素可見(jiàn)性：visibility
4、表格布局屬性：caption-side刽肠、border-collapse溃肪、border-spacing、empty-cells音五、table-layout
5惫撰、列表布局屬性：list-style-type、list-style-image躺涝、list-style-position厨钻、list-style
6、生成內(nèi)容屬性：quotes
7、光標(biāo)屬性：cursor
8夯膀、頁(yè)面樣式屬性：page诗充、page-break-inside、windows诱建、orphans
9蝴蜓、聲音樣式屬性：speak、speak-punctuation俺猿、speak-numeral茎匠、speak-header、speech-rate押袍、volume汽抚、voice-family、pitch伯病、pitch-range造烁、stress、richness午笛、惭蟋、azimuth、elevation
-
不能繼承：
1药磺、display：規(guī)定元素應(yīng)該生成的框的類(lèi)型
2告组、文本屬性：
vertical-align：垂直文本對(duì)齊
text-decoration：規(guī)定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
unicode-bidi：設(shè)置文本的方向
3、盒子模型的屬性：width癌佩、height木缝、margin 、margin-top围辙、margin-right我碟、margin-bottom、margin-left姚建、border矫俺、border-style、border-top-style掸冤、border-right-style厘托、border-bottom-style、border-left-style稿湿、border-width铅匹、border-top-width、border-right-right饺藤、border-bottom-width包斑、border-left-width考杉、border-color、border-top-color舰始、border-right-color崇棠、border-bottom-color、border-left-color丸卷、border-top枕稀、border-right、border-bottom谜嫉、border-left萎坷、padding、padding-top沐兰、padding-right哆档、padding-bottom、padding-left
4住闯、背景屬性：background瓜浸、background-color、background-image比原、background-repeat插佛、background-position、background-attachment
5量窘、定位屬性：float雇寇、clear、position蚌铜、top锨侯、right、bottom冬殃、left囚痴、min-width、min-height造壮、max-width渡讼、max-height、overflow耳璧、clip、z-index
6展箱、生成內(nèi)容屬性：content旨枯、counter-reset、counter-increment
7混驰、輪廓樣式屬性：outline-style攀隔、outline-width皂贩、outline-color、outline
8昆汹、頁(yè)面樣式屬性：size明刷、page-break-before、page-break-after
9满粗、聲音樣式屬性：pause-before辈末、pause-after、pause映皆、cue-before挤聘、cue-after、cue捅彻、play-during
3.如何讓塊級(jí)元素水平居中组去？如何讓行內(nèi)元素水平居中?
- 塊級(jí)元素水平居中：設(shè)置寬高后添加屬性margin:0 auto
- 行內(nèi)元素水平居中：text-align:center
4.用 CSS 實(shí)現(xiàn)一個(gè)三角形
5.單行文本溢出加 ...如何實(shí)現(xiàn)?
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
6.px, em, rem 有什么區(qū)別
- PX實(shí)際上就是像素，用PX設(shè)置字體大小時(shí)步淹，比較穩(wěn)定和精確从隆。但是這種方法存在一個(gè)問(wèn)題，當(dāng)用戶(hù)在瀏覽器中瀏覽我們制作的Web頁(yè)面時(shí)缭裆，如果改變了瀏覽器的縮放广料，這時(shí)會(huì)使用我們的Web頁(yè)面布局被打破。這樣對(duì)于那些關(guān)心自己網(wǎng)站可用性的用戶(hù)來(lái)說(shuō)幼驶，就是一個(gè)大問(wèn)題了艾杏。因此，這時(shí)就提出了使用“em”來(lái)定義Web頁(yè)面的字體盅藻。
- EM:
EM就是根據(jù)父元素來(lái)縮放字體大小购桑，如果父元素沒(méi)有設(shè)置字體大小，將根據(jù)body的值進(jìn)行縮放氏淑，EM是一個(gè)相對(duì)值勃蜘。
Rem: - EM是相對(duì)于其父元素來(lái)設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問(wèn)題假残，進(jìn)行任何元素設(shè)置缭贡，都有可能需要知道他父元素的大小。而Rem是相對(duì)于根元素(HTML標(biāo)簽)辉懒，這樣就意味著阳惹，我們只需要在根元素確定一個(gè)參考值。
7.為什么要加引號(hào)，字體里的數(shù)字符號(hào)表示什么泣棋？
- 因?yàn)樽址虚g有空格，如果不加引號(hào)纲岭，將內(nèi)識(shí)別為兩個(gè)字符
- 數(shù)字符號(hào)是所屬字體的unicode編碼,可以在瀏覽器控制臺(tái)輸入escape('黑體')查詢(xún)對(duì)對(duì)應(yīng)的編碼抹竹，把%u替換為
\
8.代碼
- 合并邊框：border-collapse:collapse
邊框距離：border-spacing:0
放在table標(biāo)簽屬性
- 有個(gè)外邊距塌陷問(wèn)題，解決辦法：添加這三個(gè)屬性padding止潮、border窃判、overflow:hidden其中一個(gè)。
