[HTML/CSS]盒子模型，塊級元素和行內元素

時間 2019-11-10

標籤 html css 盒子模型元素欄目 HTML 简体版

原文原文鏈接

概述

在div+css中，瞭解塊級元素和行內元素仍是很是有必要的，好比：對行內元素使用width屬性就會失效。雖然本身不是作前端的，可是，在項目中，曾經也弄過從前端佈局，也吃過這方面的虧。今天，羣裏有朋友問起這個，就趁着學習一下，也算是查漏補缺吧，雖然，談不上精通，可是瞭解，仍是頗有必要的。學習

盒子模型

css盒子模型分爲兩種，一種是遵循w3c標準的標準盒子模型，另一種就是IE盒子模型。字體

標準盒子模型spa

IE盒子模型3d

經過上面兩張圖能夠看出，兩種盒子模型都包括padding，margin，border，content，可是ie盒子模型的content包括border和padding。

一個例子

一個盒子的 margin 爲 20px，border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px。

標準盒子模型

盒子須要佔據的位置爲：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，

盒子的實際大小爲：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；

IE盒子模型

盒子須要佔據的位置爲：寬 20*2+200=240px、高 20*2+50=70px，

盒子的實際大小爲：寬 200px、高 50px。

選擇多了，就要比個哪一個好？

固然是「標準 W3C 盒子模型」了。怎麼樣纔算是選擇了「標準 W3C 盒子模型」呢？很簡單，就是在網頁的頂部加上 DOCTYPE 聲明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

若是不加 DOCTYPE 聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即 IE 瀏覽器會採用 IE 盒子模型去解釋你的盒子，而 FF 會採用標準 W3C 盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。反之，若是加上了 DOCTYPE 聲明，那麼全部瀏覽器都會採用標準 W3C 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

塊級元素block element

塊狀元素排斥其餘元素與其位於同一行，能夠設定元素的寬（width）和高（height），塊級元素通常是其餘元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等。

塊級元素有哪些？

 1 <address>//定義地址
 2 <caption>//定義表格標題
 3 <dd>    //定義列表中定義條目
 4 <div>     //定義文檔中的分區或節
 5 <dl>    //定義列表
 6 <dt>     //定義列表中的項目
 7 <fieldset> //定義一個框架集
 8 <form> //建立 HTML 表單
 9 <h1>    //定義最大的標題
10 <h2>    // 定義副標題
11 <h3>     //定義標題
12 <h4>     //定義標題
13 <h5>     //定義標題
14 <h6>     //定義最小的標題
15 <hr>     //建立一條水平線
16 <legend>    //元素爲 fieldset 元素定義標題
17 <li>     //標籤訂義列表項目
18 <noframes>    //爲那些不支持框架的瀏覽器顯示文本，於 frameset 元素內部
19 <noscript>    //定義在腳本未被執行時的替代內容
20 <ol>     //定義有序列表
21 <ul>    //定義無序列表
22 <p>     //標籤訂義段落
23 <pre>     //定義預格式化的文本
24 <table>     //標籤訂義 HTML 表格
25 <tbody>     //標籤表格主體（正文）
26 <td>    //表格中的標準單元格
27 <tfoot>     //定義表格的頁腳（腳註或表注）
28 <th>    //定義表頭單元格
29 <thead>    //標籤訂義表格的表頭
30 <tr>     //定義表格中的行

行內元素inline element

行內元素不能夠設置寬（width）和高（height），但能夠與其餘行內元素位於同一行，行內元素內通常不能夠包含塊級元素。行內元素的高度通常由元素內部的字體大小決定，寬度由內容的長度控制。常見的行內元素有a, em ,strong等。

行內元素有哪些？

 1 <a>     //標籤可定義錨
 2 <abbr>     //表示一個縮寫形式
 3 <acronym>     //定義只取首字母縮寫
 4 <b>     //字體加粗
 5 <bdo>     //可覆蓋默認的文本方向
 6 <big>     //大號字體加粗
 7 <br>     //換行
 8 <cite>     //引用進行定義
 9 <code>    // 定義計算機代碼文本
10 <dfn>     //定義一個定義項目
11 <em>     //定義爲強調的內容
12 <i>     //斜體文本效果
13 <img>     //向網頁中嵌入一幅圖像
14 <input>     //輸入框
15 <kbd>     //定義鍵盤文本
16 <label>     //標籤爲 input 元素定義標註（標記）
17 <q>     //定義短的引用
18 <samp>     //定義樣本文本
19 <select> // 建立單選或多選菜單
20 <small>     //呈現小號字體效果
21 <span>     //組合文檔中的行內元素
22 <strong> //加粗
23 <sub>     //定義下標文本
24 <sup>     //定義上標文本
25 <textarea>     //多行的文本輸入控件
26 <tt>     //打字機或者等寬的文本效果
27 <var>    // 定義變量

可變元素

根據上下文語境決定轉爲塊級元素仍是行內元素。

1 <button>     //按鈕
2 <del>    // 定義文檔中已被刪除的文本
3 <iframe>     //建立包含另一個文檔的內聯框架（即行內框架）
4 <ins>     //標籤訂義已經被插入文檔中的文本
5 <map>     //客戶端圖像映射（即熱區）
6 <object>     //object對象
7 <script>     //客戶端腳本

總結

塊級元素和行內元素區別

行內元素同一行水平排列。
塊級元素各佔據一行，垂直方向排列。
塊級元素能夠包含行內元素和塊級元素。但行內元素不能包含塊級元素。
行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上。
行內元素設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效

能夠經過修改樣式display屬性改變元素是以塊級仍是行內元素呈現，當display的值設爲block時，元素將以塊級方式呈現；當display值設爲inline時，元素將以行內形式呈現。

若是想讓一個元素能夠設置寬度高度，又讓它以行內形式顯示，咱們能夠設置display的值爲inline-block。