談?wù)勎覍?duì) 行內(nèi)元素/塊級(jí)元素/空元素 的區(qū)別的認(rèn)識(shí)
之前一直很熟悉 在行內(nèi)元素、塊級(jí)元素绿贞，后來(lái)聽(tīng)說(shuō)竟然還有空元素一說(shuō)因块，于是就趕緊總結(jié)一下，增長(zhǎng)一下見(jiàn)識(shí)
先說(shuō)說(shuō)行內(nèi)元素
行內(nèi)元素又叫內(nèi)聯(lián)元素或者行內(nèi)標(biāo)簽.
它的特點(diǎn)有
- 設(shè)置
寬高無(wú)效籍铁，只能由內(nèi)容撐起來(lái)涡上，即行內(nèi)元素設(shè)置width,height屬性無(wú)效. - 行內(nèi)元素
不會(huì)獨(dú)占一行,相鄰的行內(nèi)元素會(huì)排列在同一行里,直到一行排不下,才會(huì)換行,其寬度隨元素的內(nèi)容而變化. - 設(shè)置
上下margin無(wú)效，左右margin有效 - 設(shè)置
上下padding無(wú)效拒名，左右padding有效 - 行內(nèi)元素的margin和padding屬性,
水平方向的padding-left,padding-right,margin-left,margin-right都產(chǎn)生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不會(huì)產(chǎn)生邊距效果. - 行內(nèi)元素對(duì)應(yīng)于display:inline
常見(jiàn)的行內(nèi)元素有：
span吩愧、em、i增显、b雁佳、strong、a、img糖权、input堵腹、br、select星澳、textarea疚顷、q、bdo禁偎、sub腿堤、sup...等等
塊級(jí)元素
塊級(jí)元素又叫塊級(jí)標(biāo)簽
它的特點(diǎn)有
- 能夠
設(shè)置寬高，即塊級(jí)元素可以設(shè)置width,height屬性. - 塊級(jí)元素會(huì)
獨(dú)占一行,默認(rèn)情況下,其寬度自動(dòng)填滿其父元素寬度. - 塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行
- 塊級(jí)元素
可以設(shè)置margin和padding屬性届垫，即上下左右margin有效释液，上下左右padding有效 - 塊級(jí)元素對(duì)應(yīng)于
display:block
常見(jiàn)的塊級(jí)元素有：
div、p装处、h1~h6误债、
ul、ol妄迁、li寝蹈、
dl、dt登淘、dd箫老、
form、table黔州、hr耍鬓、
blockquote // 瀏覽器以縮進(jìn)方式顯示被引用的文本，通常定義一段長(zhǎng)的文本引用流妻、
address牲蜀、menu、pre.....等等
空元素
這個(gè)我之前不了解绅这，但了解了特性就很簡(jiǎn)單了涣达，大家都看一看記住就行了
什么是 空元素缆镣？
沒(méi)有內(nèi)容的 HTML 元素被稱為空元素帘睦。空元素是在開(kāi)始標(biāo)簽中關(guān)閉的暂吉。
<br>就是沒(méi)有關(guān)閉標(biāo)簽的空元素（<br>標(biāo)簽定義換行）浑度。
在 XHTML寇窑、XML 以及未來(lái)版本的 HTML 中，所有元素都必須被關(guān)閉箩张。
由于HTML元素的內(nèi)容是
開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容甩骏。
而某些 HTML 元素具有空內(nèi)容完残。那些含有空內(nèi)容的HTML元素，就是空元素横漏。
簡(jiǎn)單的說(shuō)就是：
沒(méi)有 HTML 內(nèi)容的元素被稱為空元素∈斓啵空元素是在開(kāi)始標(biāo)簽中關(guān)閉的缎浇。
空元素最顯著的特點(diǎn)？
沒(méi)有HTML內(nèi)容-
單標(biāo)簽赴肚，只有開(kāi)始標(biāo)簽素跺，沒(méi)有結(jié)束標(biāo)簽
常見(jiàn)的空元素有哪些？
<br> //換行
<input> //文本框等
<img> //圖片
<hr> //分割線
...等等
空標(biāo)簽注意的地方誉券？
<br />就是沒(méi)有關(guān)閉標(biāo)簽的空元素（<br />標(biāo)簽定義換行）指厌。
在開(kāi)始標(biāo)簽中添加斜杠，比如 <br />踊跟，是關(guān)閉空元素的正確方法踩验，HTML、XHTML 和 XML 都接受這種方式商玫。
即使 <br>在所有瀏覽器中都是有效的箕憾，但使用 <br />其實(shí)是更長(zhǎng)遠(yuǎn)的保障。
HTML 元素語(yǔ)法
- HTML 元素以
開(kāi)始標(biāo)簽起始 - HTML 元素以
結(jié)束標(biāo)簽終止 - 元素的內(nèi)容是開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
- 某些 HTML 元素具有
空內(nèi)容（empty content） - 空元素在開(kāi)始標(biāo)簽中進(jìn)行關(guān)閉（以開(kāi)始標(biāo)簽的結(jié)束而結(jié)束）
- 大多數(shù) HTML 元素可擁有屬性
HTML 提示：使用小寫(xiě)標(biāo)簽
HTML 標(biāo)簽對(duì)大小寫(xiě)不敏感：<P> 等同于 <p>拳昌。許多網(wǎng)站都使用大寫(xiě)的 HTML 標(biāo)簽袭异。
W3School 使用的是小寫(xiě)標(biāo)簽，因?yàn)槿f(wàn)維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫(xiě)炬藤，而在未來(lái) (X)HTML 版本中強(qiáng)制使用小寫(xiě)御铃。
行內(nèi)元素與塊級(jí)元素的嵌套規(guī)則？
大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）沈矿。
HTML 文檔由嵌套的 HTML 元素構(gòu)成上真。
-
塊級(jí)元素可以嵌套內(nèi)聯(lián)元素或者某些塊級(jí)元素 -
內(nèi)聯(lián)元素只能嵌套內(nèi)聯(lián)元素，不能嵌套塊級(jí)元素
比較典型的特例
-
a無(wú)所不能细睡，但a不能嵌套它本身 p標(biāo)簽不能嵌套塊級(jí)元素- h1~h6谷羞、p、dt標(biāo)簽：
只能包含內(nèi)聯(lián)元素溜徙，不能再包含塊級(jí)元素 -
li很強(qiáng)大湃缎，它可以包含div，甚至可以包含它的父元素ul或者ol
怎么改變?cè)氐呐帕蟹绞酱酪迹ㄟ^(guò)設(shè)置display屬性嗓违？
常見(jiàn)的屬性值有：
diaplay: none 此元素不會(huì)被顯示。
diaplay: block 此元素將顯示為塊級(jí)元素图贸，此元素前后會(huì)帶有換行符蹂季。
diaplay: inline 默認(rèn)冕广。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符偿洁。
diaplay: inline-block 行內(nèi)塊元素撒汉。（CSS2.1 新增的值）
diaplay: list-item 此元素會(huì)作為列表顯示。
diaplay: inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值涕滋。
可做了解睬辐，不做深入：
diaplay: run-in 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
diaplay: compact CSS 中有值 compact宾肺，不過(guò)由于缺乏廣泛支持溯饵，已經(jīng)從 CSS2.1 中刪除。
diaplay: marker CSS 中有值 marker锨用，不過(guò)由于缺乏廣泛支持丰刊，已經(jīng)從 CSS2.1 中刪除。
diaplay: table 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>）增拥，表格前后帶有換行符啄巧。
diaplay: inline-table 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 <table>），表格前后沒(méi)有換行符掌栅。
diaplay: table-row-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tbody>）棵帽。
diaplay: table-header-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <thead>）。
diaplay: table-footer-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tfoot>）渣玲。
diaplay: table-row 此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）逗概。
diaplay: table-column-group 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 <colgroup>）。
diaplay: table-column 此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>）
diaplay: table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>）
diaplay: table-caption 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>）
display: inline-block行內(nèi)塊元素的兼容性問(wèn)題忘衍？
給元素設(shè)置display: inline-block屬性逾苫，元素將變成行內(nèi)塊元素，結(jié)合盒子模型理解枚钓，該元素整體以內(nèi)聯(lián)元素表現(xiàn)铅搓，但它的內(nèi)容以塊狀元素表現(xiàn)。
簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象搀捷，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞星掰。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)，允許空格嫩舟。
但是這個(gè)屬性目前不是所有的瀏覽器都支持氢烘，只有Opera和Safari支持，F(xiàn)ireFox3和IE8據(jù)說(shuō)將會(huì)支持家厌，F(xiàn)irefox2和IE使用特殊辦法可以實(shí)現(xiàn)這種效果播玖，下面就來(lái)探討一下
在火狐瀏覽器上存在的問(wèn)題
在Firefox2中有-moz-inline-stack和-moz-inline-box實(shí)現(xiàn)，但是這兩個(gè)私有屬性在某些情況下都會(huì)有異常饭于，具體如下：
1蜀踏、display:-moz-inline-stack
“當(dāng)它所應(yīng)用的外包裝器（wrapper）的display為inline的時(shí)候维蒙，它所包含的a或button將無(wú)法點(diǎn)擊或無(wú)法選取，需要通過(guò)position:relative還hack掉這個(gè)bug”--烏龍茶
2果覆、display:-moz-inline-box
使用這一屬性后颅痊，text-align就會(huì)出問(wèn)題，必須使用Firefox的私有屬性 -moz-box-align來(lái)解決
所以局待，建議不要使用-moz-inline-box八千，還是使用-moz-inline-stack
在IE瀏覽器上怎么實(shí)現(xiàn)的
在IE（以下IE8除外）下，如果對(duì)內(nèi)聯(lián)元素燎猛，比如a或span元素，使用inline-block屬性是有效的照皆，似乎IE是支持的重绷，其實(shí)是觸發(fā)了IE的layout，從而擁有了inline-block屬性的表癥膜毁。這樣我們就有了一種在IE下實(shí)現(xiàn)display:inline-block效果的兩種方法：
1昭卓、先用display:inline-block屬性觸發(fā)塊元素，然后再定義display:inline瘟滨，讓塊元素呈遞為內(nèi)聯(lián)對(duì)象（原理：這是IE的一個(gè)經(jīng)典bug候醒，如果先定義了display:inline-block，然后再設(shè)置display為inline或block杂瘸，layout不會(huì)消失）倒淫，代碼如下：
div {display:inline-block;}
div {display:inline;}
2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象(display:inline)败玉，然后通過(guò)zoom:1觸發(fā)塊元素的layout敌土，代碼如下：
div {display:inline; zoom:1;}
怎么兼容所有瀏覽器？
那么為了能夠讓所有瀏覽器支持display:inline-block运翼，綜合一下返干，最終的實(shí)現(xiàn)代碼如下（參考懌飛：模擬兼容性的 inline-block 屬性）：
display:inline-block; /*一方面Firefox3 beta、IE8 beta血淌、Opera矩欠、Safari 支持，另一方面下觸發(fā)IE下inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有屬性悠夯，需要時(shí)還必須用到position:relative解決上面提到的bug */
zoom:1; /*同樣是IE 下觸發(fā) hasLayout*/
*display:inline; /*一旦IE 下觸發(fā)了 hasLayout癌淮，設(shè)置 block 元素為 inline 會(huì)使 display:inline 效果與 display:inline-block 相似*/
/*擴(kuò)展一下一些其他可能用到的屬性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隱藏文字，可用這四個(gè)屬性 */
/*另外上面隱藏文字沦补，還可以用更簡(jiǎn)化的方法：line-height:超級(jí)大值;font-size:0; */
overflow:hidden; /* 隱藏溢出的內(nèi)容 */
vertical-align:middle; /* 行內(nèi)垂直居中该默，針對(duì) Opera 比較大的偏離 */
width:？px; /*策彤？為任意非auto值*/
height:栓袖？px; /*匣摘？為任意非auto值*/
