<html>
<head>
<meta charset="utf-8">
<title>行元素，塊元素，行内塊</title>
<style>
body{
text-align: center;
}
#d1{
background-color: red;
height: 50px;
width: 100px;
margin: 0 auto;
}
#d2{
background-color: blue;
height: 100px;
width: 100px;
}
.s{
background-color: yellow;
/* height: 100px;
width: 500px; */
}
#i1{
width: 100px;
height: 260px;
}
.d3{
background-color: green;
margin: 10px 0;
height: 50px;
/* display，設定元素的布局方式，常用的三個值：block塊元素，inline行元素，inline-block，行内塊元素。 */
display: inline-block;
}
</style>
</head>
<body>
<!-- HTML元素按照布局方式，主要可以分為行元素，塊元素，行内塊元素 -->
<!-- 塊元素的代表:div,h1-h6,p,hr -->
<!-- 塊元素的特點：可以設定寬高，不設定寬高時，寬度和父元素等寬，高度取決于自身内容。無論是否設定寬度，塊元素總是獨占一行 -->
<!-- 塊元素，可以通過margin 0 auto實作在父元素中居中 -->
<div id="d1">第1塊</div>
<div id="d2"></div>
<!-- 行元素代表：b,del,span,a -->
<!-- 行元素的特點：不能設定寬高，寬高隻取決于自身内容。多個行元素之間會左右排列，如果右側空間不夠則會自動換行 -->
<span class="s">第一個span</span>
<span class="s">第二個span</span>
<span class="s">第一個span</span>
<span class="s">第二個span</span>
<span class="s">第一個span</span>
<span class="s">第二個span</span>
<span class="s">第一個span</span>
<span class="s">第二個span</span>
<span class="s">第一個span</span>
<span class="s">第二個span</span>
<span class="s">第一個span</span>
<span class="s">第二個span</span>
<span class="s">第一個span</span>
<span class="s">第二個span</span>
<div></div>
<!-- 行内塊元素代表：img,button,input -->
<!-- 行内塊元素特點：可以設定寬高，如果不設定寬高，則寬高取決于自身内容。行内塊不獨占一行，也是從左往右排列，右側空間不夠則換行 -->
<!-- img标簽的特殊之處：如果不設定寬高，則寬高取決于所顯示的圖檔的寬高，如果隻設定寬度，則高度等比例縮放，隻設定高度，則寬度等比例縮放。如果寬高都設定，則按照設定的寬高顯示，但是這樣會導緻圖檔變形。 -->
<img id="i1" src="timg.jpg">
<img id="i2" src="timg.jpg">
<!-- 行元素和行内塊元素，需要在父元素中居中時，需要設定父元素的文本對齊方式為center -->
<br>
<!-- 行元素，塊元素，行内塊之間可以互相切換 -->
<!-- 是以平時我們說div是塊元素，指的是div的display屬性預設為block -->
<div class="d3">行元素的div</div>
<div class="d3">行元素的div</div>
</body>
</html>
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)