1. 塊級(jí)元素和行內(nèi)元素分別有哪些?動(dòng)手測(cè)試并列出4條以上的特性區(qū)別
塊級(jí)元素:div址芯,h1~h6灾茁,p,hr谷炸,form删顶,ul,dl淑廊,ol逗余,pre,table季惩,li录粱,dd,dt画拾,tr啥繁,td,th
行內(nèi)元素:em青抛,strong旗闽,span,a,br适室,img嫡意,button,iput捣辆,label蔬螟,select,textarea汽畴,code旧巾,script
塊級(jí)元素與行內(nèi)元素的區(qū)別:
- 塊級(jí)元素占一整行空間,而行內(nèi)元素只占據(jù)他自身的寬度空間忍些。
- 塊級(jí)元素總是在新行上開(kāi)始鲁猩,行內(nèi)元素和其他元素都在一行上。
- 塊級(jí)元素可以容納行內(nèi)元素和其他塊級(jí)元素罢坝,行內(nèi)元素只能容納文本或者其他行內(nèi)元素廓握。
- 塊級(jí)元素可設(shè)置寬高,行內(nèi)元素設(shè)置寬高無(wú)效炸客。
- 塊級(jí)元素設(shè)置padding和margin上下左右都生效疾棵,而行內(nèi)元素只有左右padding和margin生效,padding對(duì)行內(nèi)元素的背景色和邊框生效痹仙,但是不占據(jù)空間是尔。
2. 什么是 CSS 繼承? 哪些屬性能繼承,哪些不能开仰?
css的一個(gè)主要特征就是繼承拟枚,所謂css的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。它是依賴于祖先-后代的關(guān)系的众弓。繼承是一種機(jī)制恩溅,它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素,還可以應(yīng)用于它的后代谓娃。但是css繼承也有局限性脚乡,有些屬性是不能繼承的。
css可繼承和不可繼承的屬性
3. 如何讓塊級(jí)元素水平居中滨达?如何讓行內(nèi)元素水平居中?
塊級(jí)元素水平居中:
margin: 0 auto;
行內(nèi)元素水平居中:
text-align: center;
4. 用 CSS 實(shí)現(xiàn)一個(gè)三角形
Paste_Image.png
5. 單行文本溢出加 ...如何實(shí)現(xiàn)?
Paste_Image.png
white-space: nowrap; /*使文本不折行*/
overflow: hidden; /*溢出部分隱藏*/
text-overflow: ellipis; /*溢出部分用省略號(hào)表示*/
6. px, em, rem 有什么區(qū)別
px: 固定單位
百分比(寬高奶稠?文字大小捡遍?line-height? position?)
em: 相對(duì)單位锌订,相對(duì)于父元素字體大小
rem: 相對(duì)單位,相對(duì)于根元素(html)字體大小
7. 解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
Paste_Image.png
設(shè)置字體大小為12px画株,行高為字體的1.5倍辆飘。字體從tahoma開(kāi)始查詢啦辐,tahoma未查詢到則往右依次查詢。
'Hiragino Sans GB‘中間有空格蜈项,防止瀏覽器不能正確識(shí)別芹关,加引號(hào)代表一個(gè)整體。\5b8b\4f53是代表的宋體的unicode碼战得,以防瀏覽器不能很好的識(shí)別中文和英文充边,使用unicode碼更保險(xiǎn)庸推。