block、inline、inline-block
-
- 行内元素和塊級元素
-
- block
- inline
- inline-block
- 行内元素和塊級元素的差別
- 常見用法 display
- 案例(簡單實作導航欄)
行内元素和塊級元素
行内元素：又叫内聯元素，
特點是行高以及底邊距不可改變，隻占内容的寬度(高度就是内容文字或者圖檔的寬度)；
行内的元素都會在同一條直線上，也就是水準布局的；
預設不會換行(不強制換行)。
常見的行内元素有：<span>、<br>、<em>、<input>、<a>、<label>、<img>、<strong>、<select>、<textarea>、<sub>、<sup>、<small>等。
塊級元素：是一個元素，占用了全部寬度，在前後都是換行符。
可以設定width、height、padding、margin等屬性。
常見的塊元素有：<h1~6>、<p>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>、<div>等。
block
block元素會獨占一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨占一行。
block元素可以設定margin和padding屬性。
inline
inline元素不會獨占一行，多個相鄰的行内元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度随元素的内容而變化。
inline元素設定width,height屬性無效。
inline元素的margin和padding屬性，水準方向的padding-left, padding-right, margin-left, margin-right都産生邊距效果；
但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會産生邊距效果。
inline-block
簡單來說就是将對象呈現為inline對象，但是對象的内容作為block對象呈現。之後的内聯對象會被排列在同一行内。
比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
行内元素和塊級元素的差別
1. 塊級元素獨自占一行且寬度會占滿父元素寬度，行内元素不會獨占一行，相鄰行内元素可以排在同一行
2. 塊級元素可以設定width和height，行内元素設定width和height無效，而且塊級元素即使設定寬度也還是獨占一行
3. 塊級元素可以設定margin和padding屬性，行内元素水準方向的margin和padding如margin-left、padding-right,可以産生邊距效果，但是豎直方向的如padding-top和margin-bottom不會産生邊距效果。
常見用法 display
(1)其中塊級元素對應display：block
(2)行内元素對應display：inline。
(3)可以通過修改元素的display屬性來切換行内元素和塊級元素。
(4)display：inline-block；可以讓元素具有塊級元素和行内元素的特性：既可以設定長寬，可以讓padding和margin生效，又可以和其他行内元素并排。
案例(簡單實作導航欄)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>other</title>
<style>
/*将内聯元素轉成塊級元素 将一行變兩行*/
/*span{
display: block;
}*/
ul{
margin: 0 auto;
text-align: center;
}
/*将塊級元素轉換成内聯元素*/
ul li{
line-height: 50px; /*與height設為一緻 則字型垂直居中顯示*/
width: 80px;
display: inline-block;
height: 50px;
text-align: center;
background-color: greenyellow;
}
</style>
</head>
<body>
<p>塊級元素</p><p>lalala</p>
<span style="width: 50px; float: left;">北京</span>
<span>天安門</span>
<br />
<div style="width: 20%;float: left;">濟南</div><div style="width: 20%;float: left;">泉城廣場</div>
<br>
<b>Alubbar</b>
<a href="#">超連結</a>
<ul>
<a href="#"><li>News</li></a>
<li>Sport</li>
<li>Read</li>
<li>War</li>
<li>Games</li>
</ul>
</body>
</html>
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)