問題一:塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別
- 塊級元素和行內(nèi)元素分別由哪些?
1、塊級元素:div;h1~h6;p;hrform;ul;dl;ol;pre;tableli;dd;dt;tr;td;th
2、行內(nèi)元素:em;strong;span;a;br;img;button;iput;label;select;textareacode;script - 動手測試并列出4條以上特性區(qū)別
1.塊級元素可以包含文本,塊級,行內(nèi)元素,而行內(nèi)元素只能包含文本和行內(nèi)元素;

塊元素的寬度占據(jù)父容器整行,行元素占據(jù)本身.png
2.塊級元素單獨占據(jù)一整行,行內(nèi)元素占據(jù)的位置只有自身文本寬度的空間;

塊元素的width和height 可調(diào),而行元素的寬高不可調(diào),只決定于行元素的內(nèi)容.png
3.塊級元素可以設(shè)置寬高,行內(nèi)元素設(shè)置寬高無效;

塊元素能容納塊元素和行內(nèi)元素,而行元素只能容納文本和其他行內(nèi)元素.png
4.塊級元素的padding,margin值設(shè)置有效,行內(nèi)元素padding,margin上下的值設(shè)置無效,但左右有效;

4.png
問題二:什么是 CSS 繼承? 哪些屬性能繼承,哪些不能?
- 什么是CSS繼承?
答:繼承就是子元素繼承了父元素的CSS樣式的屬性 - 什么屬性能繼承?
1.字體:family,size,weight,line-height
2.文本:letter-spacing,word-spacing,text-align, text-indent
3.列表:list-style-type
4.顏色:color,ps:a標簽不能繼承父元素的字體顏色,原因是a標簽自己有默認字體顏色,會覆蓋掉- 繼承自父元素的字體顏色; - 什么屬性不能被繼承?
1.display
2.float
3.padding和margin
4.背景相關(guān),比如顏色圖片等
問題三:用 CSS 實現(xiàn)一個三角形

三角.png
問題四:單行文本溢出加...如何實現(xiàn)?

小圓點.png
1、white-space:nomal;:設(shè)置文本不換行;
2、overflow:hidden;:設(shè)置文本溢出隱藏;
3、text-overflow:ellipsis: 設(shè)置溢出部分顯示為"...”
問題五:px, em, rem 有什么區(qū)別?
- px 像素的單位,當使用px來規(guī)定字體的大小時,那么該字體的大小就是規(guī)定的大小,不會改變。
- em 相對于父元素字體大小的倍數(shù)。
- rem 相對于根元素字體大小的倍數(shù)。
問題六:解釋下面代碼的作用?為什么要加引號? 字體里的數(shù)字符號代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
這段代碼的作用是:
- 代碼的作用:將
body元素設(shè)置字體的大小是12px(Chrome瀏覽器最小字體為12px),行高是字體大小的1.5倍,其中的字體待選為:tahoma字體,arial字體,Hiragino Sans GB字體,'\5b8b\4f53',sans-serif字體這幾種,瀏覽器查找用戶的字體庫,如果有第一種就使用第一種,如果沒有查找第二種,以此類推。 - 添加引號的原因:加引號是因為字體的名字中包含空格,避免瀏覽器解析時候把它解析成多個詞匯。
- 字體里的數(shù)字符號代表Unicode碼,為了避免直接寫中文的情況下編碼不匹配時會產(chǎn)生亂碼的情況,將字體名稱用Unicode來表示。'\5b8b\4f53'就代表宋體。