問答
1. 塊級元素和行內(nèi)元素分別有哪些赔退？動手測試并列出4條以上的特性區(qū)別
塊級元素(block-level)
h1 h2 h3 div p hr form ul dl ol table
li dt dd tr td th
行內(nèi)元素(inline-level)
span strong em a br img
button input label select texture
code script
行內(nèi)元素和塊級元素區(qū)別
- 塊級元素占據(jù)一行票编，垂直方向排列慧域；行內(nèi)元素和其他元素在一行，水平方向排列
- 塊級元素內(nèi)能包含行內(nèi)元素，行內(nèi)元素只能包含文本及其他行內(nèi)元素
- 塊級元素默認(rèn)寬度為父元素的100%，行內(nèi)元素默認(rèn)寬度是它本身容器的寬度
-
width和height只對塊級元素生效，對行內(nèi)元素?zé)o效桥氏。
2. 什么是 CSS 繼承? 哪些屬性能繼承凤藏，哪些不能揖庄？
每個(gè) CSS 屬性定義 的概述都指出了這個(gè)屬性是默認(rèn)繼承的 ("Inherited: Yes") 還是默認(rèn)不繼承的 ("Inherited: no")疙筹。
當(dāng)元素的一個(gè) 繼承屬性 沒有指定值時(shí)翘盖，則取父元素的同屬性的凹蜂。
- 可繼承的
- 文字相關(guān)的屬性是可被繼承的混弥，font-size, font-family, font, font-style, font-weight, line-height, text-align, letter-spacing, text-indent, text-transform, word-spacing.
- 列表相關(guān)屬性是被繼承的: list-style, list-style-image, list-style-position, list-style-type
- 顏色相關(guān)屬性是被繼承的: color
- 不可繼承的
- background仓手、border嗽冒、position這些背景辛慰、布局帅腌、定位相關(guān)的都是默認(rèn)不繼承的速客。
3. 如何讓塊級元素水平居中溺职？如何讓行內(nèi)元素水平居中?
/*塊級元素水平居中*/
p {
width: 60px;
margin: 0 auto;
}
/*行內(nèi)元素水平居中*/
.box {
text-align: center
}
4. 用 CSS 實(shí)現(xiàn)一個(gè)三角形
.triangle {
height: 0;
width: 0;
border-top: 40px solid blue;
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid transparent;
}
5. 單行文本溢出加 ...如何實(shí)現(xiàn)?
/*單行文本溢出*/
.text {
/*去掉自動換行*/
white-space: nowrap;
/*隱藏元素溢出的內(nèi)容*/
overflow: hidden;
/*設(shè)置溢出內(nèi)容顯示的樣式*/
text-overflow: ellipsis;
}
6. px, em, rem 有什么區(qū)別
-
px固定單位, 一般表示一個(gè)像素 -
em相對單位塑崖， 相對于父元素的大小。font-size屬性的單位，1em是父元素大小的一倍蛹稍。Chrome瀏覽器默認(rèn)字體大小16px,中文最小12px其爵。 -
rem相對單位， 相對于根元素的大小绰姻，1rem是根元素大小的一倍枉侧。
7. 解釋下面代碼的作用?為什么要加引號? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- 為body 設(shè)置字體大小為12px,1.5倍行高，字體類型依次為
tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-seri狂芋。 - 字體名字包含空格的時(shí)候應(yīng)該加上引號榨馁。
- 在 CSS 中設(shè)置字體時(shí)，直接寫字體中文或英文名稱瀏覽器都能識別银酗，直接寫中文的情況下編碼（GB2312辆影、UTF-8 等）不匹配時(shí)會產(chǎn)生亂碼。保險(xiǎn)的方式是將字體名稱用Unicode來表示黍特。
\5b8b\4f53代表Unicode的字體碼蛙讥。\5b8b\4f53代表宋體，英文名為SimSun灭衷。
