1. 塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別
塊級元素
div h1 ~ h6(標(biāo)題) p(段落) hr(橫線) form ul li dl dd ol dt(列表) pre table tr td th(表格)
行內(nèi)元素
em strong span a br img buttoon input label select textarea code script code
區(qū)別:
- 塊級可以包含塊級和行內(nèi)消返,行內(nèi)只能包含文本和行內(nèi)
- 塊級占據(jù)一整行空間,行內(nèi)占據(jù)自身寬度空間
- 寬高設(shè)置 行內(nèi)不行 塊級可以
- 塊級元素可以設(shè)置 上下margin 行內(nèi)元素不行
5.行內(nèi)元素使用padding 對于實(shí)際高度無效但是可以撐開整個元素的高度
2. 什么是 CSS 繼承? 哪些屬性能繼承宇攻,哪些不能倡勇?
父元素樣式 可以應(yīng)用于后代
可繼承屬性:
- 字體系列屬性
font:組合字體
font-family:規(guī)定元素的字體系列
font-weight:設(shè)置字體的粗細(xì)
font-size:設(shè)置字體的尺寸
font-style:定義字體的風(fēng)格
font-variant:設(shè)置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫夸浅,但是所有使用小型大寫字體的字母與其余文本相比扔役,其字體尺寸更小。
font-stretch:對當(dāng)前的 font-family 進(jìn)行伸縮變形亿胸。所有主流瀏覽器都不支持预皇。
font-size-adjust:為某個元素規(guī)定一個 aspect 值婉刀,這樣就可以保持首選字體的 x-height。
- 文本系列屬性
text-indent:文本縮進(jìn)
text-align:文本水平對齊
line-height:行高
word-spacing:增加或減少單詞間的空白(即字間隔)
letter-spacing:增加或減少字符間的空白(字符間距)
text-transform:控制文本大小寫
direction:規(guī)定文本的書寫方向
color:文本顏色
- 元素可見性:
visibility
- 表格布局屬性
caption-side溯街、border-collapse洋丐、border-spacing、empty-cells友绝、table-layout
- 列表布局屬性
list-style-type、list-style-image迁客、list-style-position、list-style
- 光標(biāo)屬性:
cursor
不可繼承屬性
1粘室、display:規(guī)定元素應(yīng)該生成的框的類型
2卜范、文本屬性:
vertical-align:垂直文本對齊
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怀大、頁面樣式屬性:size呀闻、page-break-before、page-break-after
9蓖康、聲音樣式屬性:pause-before垒手、pause-after、pause科贬、cue-before、cue-after优妙、cue憎账、play-during
3. 如何讓塊級元素水平居中?如何讓行內(nèi)元素水平居中?
塊級:margin: 0 auto
行內(nèi): 父元素text-align:center
4.用 CSS 實(shí)現(xiàn)一個三角形
.t1 {
height: 0px;
width: 0px;
border-top: 20px solid black;
border-right: 20px solid transparent;
border-bottom:20px solid transparent;
border-left: 20px solid transparent;
}
5. 單行文本溢出加 ...如何實(shí)現(xiàn)?
/*不折行*/
white-space:nowrap;
/*超出部分隱藏*/
overflow:hidden;
/*顯示省略符號來代表被修剪的文本熟菲。*/
text-overflow:ellipsis;
6. px, em, rem 有什么區(qū)別
px:(Pixel)相對長度單位朴恳。像素px是相對于顯示器屏幕分辨率而言的
em: 相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸呆贿。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對于瀏覽器的默認(rèn)字體尺寸
rem: 為元素設(shè)定字體大小時做入,仍然是相對大小,但相對的只是HTML根元素
塊級元素行內(nèi)元素
- 塊級(block-level); 行內(nèi)(內(nèi)聯(lián)壶运、inline-level)
- 塊級可以包含塊級和行內(nèi)浪秘,行內(nèi)只能包含文本和行內(nèi)
- 塊級占據(jù)一整行空間,行內(nèi)占據(jù)自身寬度空間
- 寬高設(shè)置棵癣、內(nèi)外邊距的差異
7. 解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
解釋:body元素的字體高度為12px夺衍,行高為字體大小的1.5倍,字體選擇 tahoma沟沙,沒有的話選擇arial矛紫,依次類推。
加引號是因?yàn)檫@種字體的名字本來中間就含有空格含衔,加引號是為了讓機(jī)器識別 Hiragino Sans GB是一種字體名而不是三個字體名。\5b8b\4f53 這是使用 Unicode 編碼的字體名缓呛,這個例子中杭隙, \5b8b 為Unicode的“宋”,\4f53 為Unicode的“體”痰憎,所以這個編碼就是指“宋體”。
代碼
task1
task2
task3
task4
task5
border-width border-color border-style