[HTML/CSS]盒子模型，块级元素和行内元素
目錄
概述
盒子模型
塊級元素
行內(nèi)元素
可變元素
總結(jié)
概述
在div+css中，了解塊級元素和行內(nèi)元素還是非常有必要的，比如：對行內(nèi)元素使用width屬性就會失效。雖然自己不是做前端的，但是，在項目中，曾經(jīng)也弄過從前端布局，也吃過這方面的虧。今天，群里有朋友問起這個，就趁著學(xué)習(xí)一下，也算是查漏補缺吧，雖然，談不上精通，但是了解，還是很有必要的。
盒子模型
css盒子模型分為兩種，一種是遵循w3c標準的標準盒子模型，另外一種就是IE盒子模型。
標準盒子模型
IE盒子模型
通過上面兩張圖可以看出，兩種盒子模型都包括padding，margin，border，content，但是ie盒子模型的content包括border和padding。
一個例子
一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px。
標準盒子模型
盒子需要占據(jù)的位置為：寬 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盒子模型
盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，
盒子的實際大小為：寬 200px、高 50px。
選擇多了，就要比個哪個好？
當然是“標準 W3C 盒子模型”了。怎么樣才算是選擇了“標準 W3C 盒子模型”呢？很簡單，就是在網(wǎng)頁的頂部加上 DOCTYPE 聲明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">如果不加 DOCTYPE 聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即 IE 瀏覽器會采用 IE 盒子模型去解釋你的盒子，而 FF 會采用標準 W3C 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。反之，如果加上了 DOCTYPE 聲明，那么所有瀏覽器都會采用標準 W3C 盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了。
塊級元素block element
塊狀元素排斥其他元素與其位于同一行，可以設(shè)定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內(nèi)元素。常見的塊級元素有div, p ,h1~h6等。
塊級元素有哪些？
1 <address>//定義地址 2 <caption>//定義表格標題 3 <dd> //定義列表中定義條目 4 <div> //定義文檔中的分區(qū)或節(jié) 5 <dl> //定義列表 6 <dt> //定義列表中的項目 7 <fieldset> //定義一個框架集 8 <form> //創(chuàng)建 HTML 表單 9 <h1> //定義最大的標題 10 <h2> // 定義副標題 11 <h3> //定義標題 12 <h4> //定義標題 13 <h5> //定義標題 14 <h6> //定義最小的標題 15 <hr> //創(chuàng)建一條水平線 16 <legend> //元素為 fieldset 元素定義標題 17 <li> //標簽定義列表項目 18 <noframes> //為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內(nèi)部 19 <noscript> //定義在腳本未被執(zhí)行時的替代內(nèi)容 20 <ol> //定義有序列表 21 <ul> //定義無序列表 22 <p> //標簽定義段落 23 <pre> //定義預(yù)格式化的文本 24 <table> //標簽定義 HTML 表格 25 <tbody> //標簽表格主體（正文） 26 <td> //表格中的標準單元格 27 <tfoot> //定義表格的頁腳（腳注或表注） 28 <th> //定義表頭單元格 29 <thead> //標簽定義表格的表頭 30 <tr> //定義表格中的行行內(nèi)元素inline element
行內(nèi)元素不可以設(shè)置寬（width）和高（height），但可以與其他行內(nèi)元素位于同一行，行內(nèi)元素內(nèi)一般不可以包含塊級元素。行內(nèi)元素的高度一般由元素內(nèi)部的字體大小決定，寬度由內(nèi)容的長度控制。常見的行內(nèi)元素有a, em ,strong等。
行內(nèi)元素有哪些？
1 <a> //標簽可定義錨 2 <abbr> //表示一個縮寫形式 3 <acronym> //定義只取首字母縮寫 4 <b> //字體加粗 5 <bdo> //可覆蓋默認的文本方向 6 <big> //大號字體加粗 7 <br> //換行 8 <cite> //引用進行定義 9 <code> // 定義計算機代碼文本 10 <dfn> //定義一個定義項目 11 <em> //定義為強調(diào)的內(nèi)容 12 <i> //斜體文本效果 13 <img> //向網(wǎng)頁中嵌入一幅圖像 14 <input> //輸入框 15 <kbd> //定義鍵盤文本 16 <label> //標簽為 input 元素定義標注（標記） 17 <q> //定義短的引用 18 <samp> //定義樣本文本 19 <select> // 創(chuàng)建單選或多選菜單 20 <small> //呈現(xiàn)小號字體效果 21 <span> //組合文檔中的行內(nèi)元素 22 <strong> //加粗 23 <sub> //定義下標文本 24 <sup> //定義上標文本 25 <textarea> //多行的文本輸入控件 26 <tt> //打字機或者等寬的文本效果 27 <var> // 定義變量可變元素
根據(jù)上下文語境決定轉(zhuǎn)為塊級元素還是行內(nèi)元素。
1 <button> //按鈕 2 <del> // 定義文檔中已被刪除的文本 3 <iframe> //創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架） 4 <ins> //標簽定義已經(jīng)被插入文檔中的文本 5 <map> //客戶端圖像映射（即熱區(qū)） 6 <object> //object對象 7 <script> //客戶端腳本總結(jié)
塊級元素和行內(nèi)元素區(qū)別
可以通過修改樣式display屬性改變元素是以塊級還是行內(nèi)元素呈現(xiàn)，當display的值設(shè)為block時，元素將以塊級方式呈現(xiàn)；當display值設(shè)為inline時，元素將以行內(nèi)形式呈現(xiàn)。
如果想讓一個元素可以設(shè)置寬度高度，又讓它以行內(nèi)形式顯示，我們可以設(shè)置display的值為inline-block。
一個例子
a{display:inline-block; width:100px; height:100px;}參考
百度百科
總結(jié)
以上是生活随笔為你收集整理的[HTML/CSS]盒子模型，块级元素和行内元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS块级元素和行内元素
- 下一篇： 点击更新没反应_Edge浏览器双击无反应