問答
1.塊級(jí)元素和行內(nèi)元素分別有哪些？動(dòng)手測試并列出4條以上的特性區(qū)別
- 塊級(jí)元素
<address> 定義地址
<caption> 定義表格標(biāo)題
<div> 定義文檔中的分區(qū)或節(jié)
<ol> 定義有序列表
<ul> 定義無序列表
<li> 標(biāo)簽定義列表項(xiàng)目
<dl> 定義列表
<dt> 定義列表中的標(biāo)題
<dd>標(biāo)簽定義列表項(xiàng)目
<fieldset> 定義一個(gè)框架集
<form> 創(chuàng)建 HTML 表單
<h1~6> 定義標(biāo)題
<hr> 創(chuàng)建一條水平線
<legend> 元素為 fieldset 元素定義標(biāo)題
<noframes> 為那些不支持框架的瀏覽器顯示文本曲伊，于 frameset 元素內(nèi)部
<noscript> 定義在腳本未被執(zhí)行時(shí)的替代內(nèi)容
<p> 標(biāo)簽定義段落
<pre> 定義預(yù)格式化的文本
<table> 標(biāo)簽定義 HTML 表格
<tbody> 標(biāo)簽表格主體（正文）
<td> 表格中的標(biāo)準(zhǔn)單元格
<tfoot> 定義表格的頁腳（腳注或表注）
<th> 定義表頭單元格
<thead> 標(biāo)簽定義表格的表頭
<tr> 定義表格中的行
- 行內(nèi)元素
<a> 標(biāo)簽可定義錨
<abbr> 表示一個(gè)縮寫形式
<acronym> 定義只取首字母縮寫
<b> 字體加粗
<bdo> 可覆蓋默認(rèn)的文本方向
<big> 大號(hào)字體加粗
<br> 換行
<cite> 引用進(jìn)行定義
<code> 定義計(jì)算機(jī)代碼文本
<dfn> 定義一個(gè)定義項(xiàng)目
<em> 定義為強(qiáng)調(diào)的內(nèi)容
<i> 斜體文本效果
<img> 向網(wǎng)頁中嵌入一幅圖像
<input> 輸入框
<kbd> 定義鍵盤文本
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）
<q> 定義短的引用
<samp> 定義樣本文本
<select> 創(chuàng)建單選或多選菜單
<small> 呈現(xiàn)小號(hào)字體效果
<span> 組合文檔中的行內(nèi)元素
<strong> 語氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容
<sub> 定義下標(biāo)文本
<sup> 定義上標(biāo)文本
<textarea> 多行的文本輸入控件
<tt> 打字機(jī)或者等寬的文本效果
<var> 定義變量
- 區(qū)別特征
| 塊級(jí)元素 | 行內(nèi)元素 |
|---|---|
| 總是在新行上開始 | 和其他元素在一行 |
| 寬度默認(rèn)是容器的100% | 寬度就是它本身內(nèi)容的寬度 |
| 四個(gè)方向的margin和padding都可與設(shè)置 | 只能設(shè)置左右margin和padding |
| 可以容納其他塊級(jí)元素和行內(nèi)元素 | 只能容納行內(nèi)元素 |
- 補(bǔ)充
塊級(jí)元素對應(yīng)display：block，行內(nèi)元素對應(yīng)display：inline懈糯〉ノ恚可以通過修改元素的display屬性來切換行內(nèi)元素和塊級(jí)元素。
補(bǔ)充說明一個(gè)屬性：display：inline-block屿储；可以讓元素具有塊級(jí)元素和行內(nèi)元素的特性：既可以設(shè)置長寬够掠，可以讓padding和margin生效茄菊，又可以和其他行內(nèi)元素并排赊堪。是一個(gè)很實(shí)用的屬性
2. 什么是 CSS 繼承? 哪些屬性能繼承哭廉，哪些不能期丰？
CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素
- 文本相關(guān)屬性可以繼承
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent,
text-transform,word-spacing
- 列表相關(guān)屬性可以繼承
list-style-image, list-style-position,
list-style-type, list-style
- 顏色屬性可以被繼承
color
- 其他可以被繼承屬性
azimuth, border-collapse, border-spacing,
caption-side, cursor, direction, elevation,
empty-cells, orphans, pitch-range,
pitch, quotes, richness, speak-header,
speaknumeral,speak-punctuation,
speak, speechrate,stress,visibility,
voice-family, volume, whitespace,widows
3. 如何讓塊級(jí)元素水平居中？如何讓行內(nèi)元素水平居中?
塊級(jí)元素劇中
margin-left: auto; margin-right: auto;
行內(nèi)元素居中
text-align: center;
4. 用 CSS 實(shí)現(xiàn)一個(gè)三角形
基本思想是設(shè)置一個(gè)元素的高和寬為0赎离，通過控制四個(gè)方向不同的邊的厚度和透明度來繪制三角形
一個(gè)簡單的例子端辱，繪制如下三角形
三角形
div{
width: 0;
heigh: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 100px solid transparent;
}
5. 單行文本溢出加 ...如何實(shí)現(xiàn)?
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
6. px, em, rem 有什么區(qū)別
- px:
- px像素（Pixel）舞蔽。相對長度單位渗柿。像素px是相對于顯示器屏幕分辨率而言的。
- IE無法調(diào)整那些使用px作為單位的字體大屑樟痢陨溅；
- 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
- Firefox能夠調(diào)整px和em雹有，rem悯嗓，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
- **em: **
- em是相對長度單位铅祸。相對于當(dāng)前對象內(nèi)文本的字體尺寸临梗。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸吃沪。
- em的值并不是固定的什猖；
- em會(huì)繼承父級(jí)元素的字體大小不狮。
- rem:
- rem是CSS3新增的一個(gè)相對單位（root em降铸，根em）
- 和em區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對大小摇零，但相對的只是HTML根元素推掸。
- 通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)驻仅。
7. 解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- body里文本的大小為12px谅畅，行高為1.5倍大小，字體按從左到右順序顯示一種電腦或?yàn)g覽器中存在的tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
- 'Hiragino Sans GB' 加引號(hào)的作用是字體名中存在空格噪服，加引號(hào)防止被誤認(rèn)為兩種字體毡泻。
- \5b8b\4f53 （黑體）是字體名的Unicode碼表示方式，防止字體名編碼不匹配產(chǎn)生亂碼導(dǎo)致無法識(shí)別
