- HTML標(biāo)簽
- CSS盒模型
- 塊級(jí)元素和行內(nèi)元素的定義
- 塊級(jí)元素和行內(nèi)元素的分類(lèi)
1、 HTML標(biāo)簽
html標(biāo)簽定義：
- 是由一對(duì)尖括號(hào)包裹的單詞構(gòu)成,例如: <html>.
- 標(biāo)簽不區(qū)分大小寫(xiě)<html> 和 <HTML>, 推薦使用小寫(xiě).
- 標(biāo)簽分為兩部分: 開(kāi)始標(biāo)簽<html> 和 結(jié)束標(biāo)簽</html>, 兩個(gè)標(biāo)簽之間的部分我們叫做標(biāo)簽體.
- 有些標(biāo)簽功能比較簡(jiǎn)單,使用一個(gè)標(biāo)簽即可,這種標(biāo)簽叫做自閉和標(biāo)簽,例如: < br/>< hr/><input/><img/>
- 標(biāo)簽可以嵌套,例如:<a><b><b/><a/>;但是不能交叉嵌套,例如:<a><b><a/><b/>
所有的html標(biāo)簽參考w3school中的html手冊(cè)。
2、CSS盒模型
- 所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。
- CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周?chē)腍TML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
- 盒模型允許我們?cè)谄渌睾椭車(chē)剡吙蛑g的空間放置元素。
下面的圖片說(shuō)明了盒子模型(Box Model)：
image
不同部分的說(shuō)明：
- Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
- Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
- Padding(內(nèi)邊距) - 清除內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。
- Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
怪異模式和標(biāo)準(zhǔn)模式下的css盒模型的解析：
- 標(biāo)準(zhǔn)模式中，網(wǎng)頁(yè)元素的寬度是有padding,border,width三者的寬度相加決定的。
- 怪異模式中，width包含padding和border的寬度，即網(wǎng)頁(yè)寬度為width。
css3新增box-sizing屬性，用于更改用于計(jì)算元素寬度和高度的默認(rèn)的 CSS 盒子模型：
- content-box，默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來(lái)的元素寬度中，即**標(biāo)準(zhǔn)模式下的盒模型。
- border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說(shuō)，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會(huì)包含其它的border和padding，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border + padding的計(jì)算值，即**怪異模式下的盒模型。
3、塊級(jí)元素和行內(nèi)元素的定義
塊級(jí)元素？
- 總是在新行上開(kāi)始；
- 高度，行高以及外邊距和內(nèi)邊距都可控制；
- 寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
- 它可以容納內(nèi)聯(lián)元素和其他塊元素
行內(nèi)元素？
- 和其他元素都在一行上；
- 高，行高及外邊距和內(nèi)邊距不可改變；
- 寬度就是它的文字或圖片的寬度，不可改變
- 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對(duì)行內(nèi)元素，需要注意如下：
- 設(shè)置寬度width 無(wú)效。
- 設(shè)置高度height 無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。
- 設(shè)置margin 只有左右margin有效，上下無(wú)效。
- 設(shè)置padding 只有左右padding有效，上下則無(wú)效。注意元素范圍是增大了，但是對(duì)元素周?chē)膬?nèi)容是沒(méi)影響的。
通過(guò)display屬性對(duì)行內(nèi)元素和塊級(jí)元素進(jìn)行切換(主要看第 2.3.4個(gè)值)：
| 值 | 描述 |
|---|---|
| none | 此元素不會(huì)被顯示 |
| block | 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符 |
| inline | 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符 |
| inline-block | 行內(nèi)塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會(huì)作為列表顯示 |
| run-in | 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示 |
| compact | CSS 中有值 compact，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除 |
| marker | CSS 中有值 marker，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除 |
| table | 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類(lèi)似 <table>），表格前后帶有換行符 |
| inline-table | 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類(lèi)似 <table>），表格前后沒(méi)有換行符 |
| table-row-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <tbody>） |
| table-header-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <thead>） |
| table-header-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <thead>） |
| table-footer-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <tfoot>） |
| table-row | 此元素會(huì)作為一個(gè)表格行顯示（類(lèi)似 <tr>） |
| table-column-group | 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類(lèi)似 <colgroup>） |
| table-column | 此元素會(huì)作為一個(gè)單元格列顯示（類(lèi)似 <col>） |
| table-column | 此元素會(huì)作為一個(gè)單元格列顯示（類(lèi)似 <col>） |
| table-cell | 此元素會(huì)作為一個(gè)表格單元格顯示（類(lèi)似 <td> 和 <th>） |
| table-caption | 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類(lèi)似 <caption>） |
| inherit | 規(guī)定應(yīng)該從父元素繼承 display 屬性的值 |
4、塊級(jí)元素和行內(nèi)元素的分類(lèi)
html中的塊級(jí)元素：
| 標(biāo)簽 | 描述 |
|---|---|
| <address> | 定義地址 |
| <article> | 定義文章 |
| <aside> | 定義頁(yè)面內(nèi)容之外的內(nèi)容 |
| <audio> | 定義聲音內(nèi)容 |
| <blockquote> | 定義長(zhǎng)的引用 |
| <canvas> | 定義圖形 |
| <caption> | 定義表格標(biāo)題 |
| <dd> | 定義定義列表中項(xiàng)目的描述 |
| <div> | 定義文檔中的節(jié) |
| <dl> | 定義定義列表 |
| <dt> | 定義定義列表中的項(xiàng)目 |
| <details> | 定義元素的細(xì)節(jié) |
| <fieldset> | 定義圍繞表單中元素的邊框 |
| <figcaption> | 定義 figure 元素的標(biāo)題 |
| <figure> | 定義媒介內(nèi)容的分組，以及它們的標(biāo)題 |
| <footer> | 定義 section 或 page 的頁(yè)腳 |
| <form> | 定義供用戶(hù)輸入的 HTML 表單 |
| <h1> to <h6> | 定義 HTML 標(biāo)題 |
| <header> | 定義 section 或 page 的頁(yè)眉 |
| < hr> | 定義水平線(xiàn) |
| <legend> | 定義 fieldset 元素的標(biāo)題 |
| <li> | 定義列表的項(xiàng)目 |
| <menu> | 定義命令的列表或菜單 |
| <meter> | 定義預(yù)定義范圍內(nèi)的度量 |
| <nav> | 定義導(dǎo)航鏈接 |
| <noframes> | 定義針對(duì)不支持框架的用戶(hù)的替代內(nèi)容 |
| <noscript> | 定義針對(duì)不支持客戶(hù)端腳本的用戶(hù)的替代內(nèi)容 |
| <ol> | 定義有序列表 |
| <output> | 定義輸出的一些類(lèi)型 |
| <p> | 定義段落 |
| <pre> | 定義預(yù)格式文本 |
| <section> | 定義 section |
| <table> | 定義表格 |
| <tbody> | 定義表格中的主體內(nèi)容 |
| <td> | 定義表格中的單元 |
| <tfoot> | 定義表格中的表注內(nèi)容（腳注） |
| <th> | 定義表格中的表頭單元格 |
| <thead> | 定義表格中的表頭內(nèi)容 |
| <time> | 定義日期/時(shí)間 |
| <tr> | 定義表格中的行 |
| <ul> | 定義無(wú)序列表 |
html中的行內(nèi)元素：
| 標(biāo)簽 | 描述 |
|---|---|
| <a> | 定義錨 |
| <abbr> | 定義縮寫(xiě) |
| <acronym> | 定義只取首字母的縮寫(xiě) |
| <b> | 定義粗體字 |
| <bdo> | 定義文字方向 |
| <big> | 定義大號(hào)文本 |
| < br> | 定義簡(jiǎn)單的折行 |
| <button> | 定義按鈕 (push button) |
| <cite> | 定義引用(citation) |
| <code> | 定義計(jì)算機(jī)代碼文本 |
| <command> | 定義命令按鈕 |
| <dfn> | 定義定義項(xiàng)目 |
| <del> | 定義被刪除文本 |
| <em> | 定義強(qiáng)調(diào)文本 |
| <embed> | 定義外部交互內(nèi)容或插件 |
| <i> | 定義斜體字 |
| <img> | 定義圖像 |
| <input> | 定義輸入控件 |
| <kbd> | 定義鍵盤(pán)文本 |
| <label> | 定義 input 元素的標(biāo)注 |
| <map> | 定義圖像映射 |
| <mark> | 定義有記號(hào)的文本 |
| <objec> | 定義內(nèi)嵌對(duì)象 |
| <progress> | 定義任何類(lèi)型的任務(wù)的進(jìn)度 |
| <q> | 定義短的引用 |
| <samp> | 定義計(jì)算機(jī)代碼樣本 |
| <select> | 定義選擇列表（下拉列表） |
| <small> | 定義小號(hào)文本 |
| <span> | 定義文檔中的節(jié) |
| <strong> | 定義強(qiáng)調(diào)文本 |
| < sub> | 定義下標(biāo)文本 |
| < sup> | 定義上標(biāo)文本 |
| <textarea> | 定義多行的文本輸入控件 |
| <time> | 定義日期/時(shí)間 |
| <tt> | 定義打字機(jī)文本 |
| <var> | 定義文本的變量部分 |
| <video> | 定義視頻 |
| <wbr> | 定義可能的換行符 |
