在css盒模型中的盒類型主要有“塊級元素”、“行內(nèi)元素”和“行內(nèi)-塊級元素”，分別簡稱為“區(qū)塊”、“內(nèi)聯(lián)”和“內(nèi)聯(lián)塊”，顧名思義這三種盒類型之間有一定關(guān)系也有一定區(qū)別。
一、塊級元素（區(qū)塊)）
塊級元素,就是能夠設(shè)置元素尺寸、隔離其他元素功能的元素。比如:<div>、<p>等文檔元素。
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
div {
background: silver;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>這是一個塊級元素</div>
這是一段文本
</body>
如上圖會塊級元素
div {
background: silver;
width: 200px;
height: 200px;
}
二、行內(nèi)元素（內(nèi)聯(lián)）
所謂行內(nèi)元素,不能夠設(shè)置元素尺寸,它只能自適應(yīng)內(nèi)容、無法隔離其他元素,其它元 素會緊跟其后。比如:<span>、 <b>文本元素。
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
span {
background: silver;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<span>這是一個行內(nèi)元素</span>
這是一段文本
</body>
span {
background: silver;
width: 150px;
height: 150px;
}
三、行內(nèi)-塊元素
行內(nèi)-塊元素,可以設(shè)置元素尺寸,但無法隔離其他元素的元素。比如<img>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
這是一段文本
</body>
img {
width: 150px;
height: 150px;
}
從以上“塊級元素”、“行內(nèi)元素”和“行內(nèi)-塊級元素”三個例子，我們可以看出主要區(qū)別在于“塊級元素”可以設(shè)置尺寸，而且會隔離其他元素；而行內(nèi)元素不能設(shè)置尺寸，而不會隔離其他元素；行內(nèi)-塊級元素可以設(shè)置尺寸單也不會隔離其他元素。
四、三種元素類型的轉(zhuǎn)換
在開發(fā)中我們有事會遇到不同元素之間轉(zhuǎn)換的需求，我們只需通過css中的display屬性來實現(xiàn),下面三個例子是三種類型的轉(zhuǎn)換例子。
1.塊級元素轉(zhuǎn)換成內(nèi)聯(lián)元素（將圖1.1中的塊級效果轉(zhuǎn)換成內(nèi)聯(lián)效果）
div {
background: silver;
width: 100px;
height: 100px;
display: inline;
}
如上圖轉(zhuǎn)換成行內(nèi)元素以后，兩個元素就不在隔離，無法設(shè)置尺寸
2.將行內(nèi)元素轉(zhuǎn)成塊級元素（2.1中的行內(nèi)元素效果轉(zhuǎn)換成塊級元素）
span {
background: silver;
width: 200px;
height: 200px;
display: block;
}
如上圖轉(zhuǎn)換成塊級元素以后，塊級元素就會隔離后面的文本元素，可以設(shè)置尺寸
3.將行內(nèi)元素和塊級元素裝換成行內(nèi)塊級元素
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
div, span{
background: silver;
width: 200px;
height: 200px;
display: inline-block;;;
}
</style>
</head>
<body>
<div>這是一個塊級元素</div>
<span>這是一個行內(nèi)元素</span>
</body>
如上圖行內(nèi)元素和塊級元素在設(shè)置成行內(nèi)塊元素后，就同時擁有塊級元素和行內(nèi)元素的特點即既可以設(shè)置元素尺寸又不會相互隔離。
