首頁 > 開發者 > JavaScript
block, inline和inline-block的區別，inlineinline-block
display:block元素的特點是：
總是在新行上開始；
高度，行高以及頂和底邊距都可控制；
寬度預設是它的容器的100%，除非設定一個寬度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。
display:inline元素的特點是：
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
display:inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。
inline-block的元素特點：
將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。(準確地說，應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設定寬度和高度地塊元素的屬性)
並不是所有瀏覽器都支援此屬性，目前支援的瀏覽器有：Opera、Safari在IE中對內嵌元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內嵌元素擁有了display:inline-block屬性的表症。從上面的這個分析，也不難理解為什麼IE下，對塊元素設定display:inline-block屬性無法實現inline-block的效果。這時塊元素僅僅是被display:inline-block觸發了layout，而它本就是行布局，所以觸發後，塊元素依然還是行布局，而不會如Opera中塊元素呈遞為內聯對象。
下面舉一個例子說明block, inline和inline-block的區別:
/***html頁面代碼****/<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>zlz</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/tab.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/tab.js"></script></head><body><ul id = "tabfirst"><li class = "tabin">標籤1</li><li>標籤2</li><li>標籤3</li></ul><div class = "contentin contentfirst">我是內容1</div><div class = "contentfirst">我是內容2</div><div class = "contentfirst">我是內容3</div></body></html>
/***css樣式代碼***/ul,li {margin: 0;padding: 0;list-style: none;}#tabfirst li {float: left;color: white;padding: 5px;margin-right: 2px;background-color: #868686;border: 1px solid white;}#tabfirst li.tabin {background-color: #6E6E6E;border: 1px solid #6E6E6E;}div.contentfirst {clear: left;background-color: #6E6E6E;color: white;height:100px;width: 300px;padding: 10px;display: none;}div.contentin {//display: block;//display: inline;display: inline-block;}
通過測試display: block;display: inline;和display: inline-block;可以測試得到這三個元素的區別。
這樣先講內嵌元素和區塊層級元素：
內嵌元素是不可以控制寬和高、margin等；並且在同一行顯示，不換行。
區塊層級元素時可以控制寬和高、margin等，並且會換行。
inline：使用此屬性後，元素會被顯示為內嵌元素，元素則不會換行。
block：使用此屬性後，元素會被現實為區塊層級元素，元素會進行換行。
inline-block：是使元素以區塊層級元素的形式呈現在行內。意思就是說，讓這個元素顯示在同一行不換行，但是又可以控制高度和寬度，這相當於內斂元素的增強。
要注意的是IE6 不支援inline-block
display:inline 與display:inline-block與display:block有什樣的不同?
簡單講就是display:inline 轉化成內嵌元素，不換行；display:block轉換成塊元素，換行；display:inline-block內聯塊元素，既不換行又可以使用塊元素所擁有的屬性，類似於塊元素加了浮動效果，但低版本瀏覽器對這個不支援。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
