display幾種樣式的理解
在HTML標簽中卢未，存在著兩種標簽類型盗飒，即行內(nèi)元素（或者說行內(nèi)標簽）和 塊內(nèi)元素（或者塊級標簽）。 這兩種標簽的特點分別是：
行內(nèi)元素： 元素結(jié)束默認不換行架曹。內(nèi)部只能包含行內(nèi)元素 或者 文本內(nèi)容莫杈，不能由塊 級元素诱鞠。
塊級元素：從新的一行開始，結(jié)束時接著一個斷行这敬。元素內(nèi)部可以包含塊級元素航夺，行內(nèi)元素，文本內(nèi)容等崔涂。
下面來個簡單例子來看一下：
<body>
<p> Hello! 我是塊級元素阳掐。 你知道我兄弟們都有<strong>誰嗎？</strong></p>
<p> Hello! 我是塊級元素冷蚂。 你知道我兄弟們都有<strong>誰嗎缭保？</strong></p>
</body>
結(jié)果：
Hello! 我是塊級元素。 你知道我兄弟們都有誰嗎蝙茶？
Hello! 我是塊級元素涮俄。 你知道我兄弟們都有誰嗎？
可以看到尸闸，每個< p> 標簽輸出的內(nèi)容占一行彻亲，而每個< strong>標簽，并沒有換行吮廉。
在CSS中苞尝，我們有個屬性設(shè)置，即display, 可以用來設(shè)置元素的展示類型宦芦。其常用的主要有block,none,inline,inline-block;
1. display:none;
其實宙址，可以簡單從字面上理解，即不顯示调卑，因此 該元素會被隱藏抡砂，而且其隱藏后，頁面上不會保留其物理空間恬涧。
<html>
<head>
<meta charset="utf-8">
<style>
#p1{
display: none;
}
</style>
</head>
<body>
<p id="p1"> Hello! 我是塊級元素注益。 你知道我兄弟們都有<strong>誰嗎？</strong></p>
<p> Hello! 我是塊級元素溯捆。 你知道我兄弟們都有<strong>誰嗎丑搔？</strong></p>
</body>
</html>
結(jié)果是：
Hello! 我是塊級元素。 你知道我兄弟們都有誰嗎提揍？
這里只顯示一句話啤月，也就是說，第一個< p >標簽被隱藏了劳跃。
2 . display:block;
這個的意思是谎仲，以塊級元素的形式來展示該元素。而且刨仑，塊級元素默認是此屬性郑诺。
如果我們想把一個 行內(nèi)元素 以塊級元素的形式展示绞呈，那么就可以通過此方法
<span>你好，我是shandamengcheng.</span><span>你好间景，我是shandamengcheng.</span>
結(jié)果為：
你好佃声，我是shandamengcheng.你好，我是shandamengcheng.
如果我們把第一個< span>標簽設(shè)置以塊級元素方式展示：
<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;
這個的意思是 以行內(nèi)元素的方式展示該元素泽西。且它是行內(nèi)元素的默認屬性曹铃。
如果我們想把一個塊級元素以行內(nèi)元素的方式展示，那么可以通過此方法捧杉。
<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.
奇怪熔脂，為什么會出現(xiàn)這種情況佩研？按理說應(yīng)該是在同一行才對！Ｏ既唷旬薯！
這是因為，第一個< p>元素 確實是稱為行內(nè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è)置方法可以說是兼具上面的2耗式，3的功能胁住，可以實現(xiàn)以行內(nèi)元素的形式展示元素趁猴，又可以對該元素進行寬高，內(nèi)外邊距的設(shè)置彪见。
行內(nèi)元素和塊級元素的主要區(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é)果為：
其他地方也有用到此屬性，比如說酵镜，設(shè)置一個橫屏的目錄碉碉。
<html>
<head>
<meta charset="utf-8">
<style>
ul li{
display: inline-block;
width:80px;
height:20px;
background: pink;
}
</style>
</head>
<body>
<ul>
<li>主頁</li>
<li>新聞</li>
<li>個人</li>
</ul>
</body>
</html>
結(jié)果為：
以上內(nèi)容是個人的理解，也是個人筆記淮韭，如果感到有問題垢粮，歡迎隨時交流。 ：）
