display幾種樣式的理解
在HTML標(biāo)簽中，存在著兩種標(biāo)簽類型，即行內(nèi)元素（或者說(shuō)行內(nèi)標(biāo)簽）和 塊內(nèi)元素（或者塊級(jí)標(biāo)簽）。 這兩種標(biāo)簽的特點(diǎn)分別是：
行內(nèi)元素： 元素結(jié)束默認(rèn)不換行。內(nèi)部只能包含行內(nèi)元素 或者 文本內(nèi)容，不能由塊 級(jí)元素。
塊級(jí)元素：從新的一行開(kāi)始，結(jié)束時(shí)接著一個(gè)斷行。元素內(nèi)部可以包含塊級(jí)元素，行內(nèi)元素，文本內(nèi)容等。
下面來(lái)個(gè)簡(jiǎn)單例子來(lái)看一下：
<body>
<p> Hello! 我是塊級(jí)元素。 你知道我兄弟們都有<strong>誰(shuí)嗎？</strong></p>
<p> Hello! 我是塊級(jí)元素。 你知道我兄弟們都有<strong>誰(shuí)嗎？</strong></p>
</body>
結(jié)果：
Hello! 我是塊級(jí)元素。 你知道我兄弟們都有誰(shuí)嗎？
Hello! 我是塊級(jí)元素。 你知道我兄弟們都有誰(shuí)嗎？
可以看到，每個(gè)< p> 標(biāo)簽輸出的內(nèi)容占一行，而每個(gè)< strong>標(biāo)簽，并沒(méi)有換行。
在CSS中，我們有個(gè)屬性設(shè)置，即display, 可以用來(lái)設(shè)置元素的展示類型。其常用的主要有block,none,inline,inline-block;
1. display:none;
其實(shí)，可以簡(jiǎn)單從字面上理解，即不顯示，因此 該元素會(huì)被隱藏，而且其隱藏后，頁(yè)面上不會(huì)保留其物理空間。
<html>
<head>
<meta charset="utf-8">
<style>
#p1{
display: none;
}
</style>
</head>
<body>
<p id="p1"> Hello! 我是塊級(jí)元素。 你知道我兄弟們都有<strong>誰(shuí)嗎？</strong></p>
<p> Hello! 我是塊級(jí)元素。 你知道我兄弟們都有<strong>誰(shuí)嗎？</strong></p>
</body>
</html>
結(jié)果是：
Hello! 我是塊級(jí)元素。 你知道我兄弟們都有誰(shuí)嗎？
這里只顯示一句話，也就是說(shuō)，第一個(gè)< p >標(biāo)簽被隱藏了。
2 . display:block;
這個(gè)的意思是，以塊級(jí)元素的形式來(lái)展示該元素。而且，塊級(jí)元素默認(rèn)是此屬性。
如果我們想把一個(gè) 行內(nèi)元素 以塊級(jí)元素的形式展示，那么就可以通過(guò)此方法
<span>你好，我是shandamengcheng.</span><span>你好，我是shandamengcheng.</span>
結(jié)果為：
你好，我是shandamengcheng.你好，我是shandamengcheng.
如果我們把第一個(gè)< span>標(biāo)簽設(shè)置以塊級(jí)元素方式展示：
<head>
<meta charset="utf-8">
<style>
#span1{
display: block;
}
</style>
</head>
<body>
<span id="span1">你好，我是shandamengcheng.</span><span>你好，我是shandamengcheng.</span>
</body>
結(jié)果為：
你好，我是shandamengcheng.
你好，我是shandamengcheng.
可以看到，結(jié)果為兩行。
3. display:inline;
這個(gè)的意思是 以行內(nèi)元素的方式展示該元素。且它是行內(nèi)元素的默認(rèn)屬性。
如果我們想把一個(gè)塊級(jí)元素以行內(nèi)元素的方式展示，那么可以通過(guò)此方法。
<style>
/*#span1{
display: block;
}*/
</style>
</head>
<body>
<p id="p1">你好，我是shandamengcheng.</p>
<p>你好，我是shandamengcheng.</p>
</body>
結(jié)果為：
你好，我是shandamengcheng.
你好，我是shandamengcheng.
若加上屬性設(shè)置：
<style>
#p1{
display: inline;
}
</style>
</head>
<body>
<p id="p1">你好，我是shandamengcheng.</p>
<p>你好，我是shandamengcheng.</p>
</body>
結(jié)果為：
你好，我是shandamengcheng.
你好，我是shandamengcheng.
奇怪，為什么會(huì)出現(xiàn)這種情況？按理說(shuō)應(yīng)該是在同一行才對(duì)?。。?/p>
這是因?yàn)?，第一個(gè)< p>元素 確實(shí)是稱為行內(nèi)元素，但是第二個(gè)仍為塊級(jí)元素。塊級(jí)元素的特性之一就是 ------以新的以新的一行開(kāi)始。
所以，我們可以做一些修改：
<style>
#p1{
display: inline;
}
</style>
</head>
<body>
<p id="p1">你好，我是shandamengcheng.</p>
<span>你好，我是shandamengcheng.</span>
</body>
結(jié)果為：
你好，我是shandamengcheng. 你好，我是shandamengcheng.
4. display:inline-block;
這種設(shè)置方法可以說(shuō)是兼具上面的2，3的功能，可以實(shí)現(xiàn)以行內(nèi)元素的形式展示元素，又可以對(duì)該元素進(jìn)行寬高，內(nèi)外邊距的設(shè)置。
行內(nèi)元素和塊級(jí)元素的主要區(qū)別是盒子模型：即 行內(nèi)元素不能設(shè)置寬高，上下位置的內(nèi)外邊距。
<style>
#p1{
display: inline-block;
width:200px;
height:200px;
background: pink;
}
</style>
</head>
<body>
<p id='p1'>你好，我是shandamengcheng.</p>
<span>你好，我是shandamengcheng.</span>
</body>
結(jié)果為：
其他地方也有用到此屬性，比如說(shuō)，設(shè)置一個(gè)橫屏的目錄。
<html>
<head>
<meta charset="utf-8">
<style>
ul li{
display: inline-block;
width:80px;
height:20px;
background: pink;
}
</style>
</head>
<body>
<ul>
<li>主頁(yè)</li>
<li>新聞</li>
<li>個(gè)人</li>
</ul>
</body>
</html>
結(jié)果為：
以上內(nèi)容是個(gè)人的理解，也是個(gè)人筆記，如果感到有問(wèn)題，歡迎隨時(shí)交流。 ：）
