[HTML/CSS]盒子模型，块级元素和行内元素
目錄
概述
盒子模型
塊級元素
行內元素
可變元素
總結
概述
在div+css中，了解塊級元素和行內元素還是非常有必要的，比如：對行內元素使用width屬性就會失效。雖然自己不是做前端的，但是，在項目中，曾經也弄過從前端布局，也吃過這方面的虧。今天，群里有朋友問起這個，就趁著學習一下，也算是查漏補缺吧，雖然，談不上精通，但是了解，還是很有必要的。
盒子模型
css盒子模型分為兩種，一種是遵循w3c標準的標準盒子模型，另外一種就是IE盒子模型。
標準盒子模型
IE盒子模型
通過上面兩張圖可以看出，兩種盒子模型都包括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> //客戶端腳本總結
塊級元素和行內元素區別
可以通過修改樣式display屬性改變元素是以塊級還是行內元素呈現，當display的值設為block時，元素將以塊級方式呈現；當display值設為inline時，元素將以行內形式呈現。
如果想讓一個元素可以設置寬度高度，又讓它以行內形式顯示，我們可以設置display的值為inline-block。
一個例子
a{display:inline-block; width:100px; height:100px;}參考
百度百科
總結
以上是生活随笔為你收集整理的[HTML/CSS]盒子模型，块级元素和行内元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS块级元素和行内元素
- 下一篇： PHP时间格式大全