<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
/*塊元素*/
body,h1,h6,p,dl,dd{margin: 0;}
h1{width: 100px;height: 100px;background: red;}
p{width: 100px;height: 100px;background: blue;}
ul,ol{margin: 0;padding: 0;}
ul{width: 100px;height: 100px;background: red;}
ol{width: 100px;height: 100px;background: blue;}
dl{width: 100px;height: 100px;background: yellow;}
/*內聯元素*/
span{width: 50px;height: 50px;background: green;/*margin: 100px;padding: 0px;*/}
/*相互轉換*/
div{width: 100px;height: 100px;background: red;display: inline;}
span.s1,span.s2{width: 100px;height: 100px;background: blue;display: block;}
</style>
</head>
<body>
1.塊元素<br />
塊元素性質：1.獨佔一行顯示2.寬度默認值爲：整行。且支持寬高3.支持margin、padding4.塊元素之間無間隙
<h1>標題</h1>
<p>段落</p>
<ul>
<li>ul列表項1</li>
<li>ul列表項2</li>
</ul>
<ol>
<li>ol列表項1</li>
<li>ol列表項2</li>
</ol>
<dl>
<dt>
<dd>dl列表項1</dd>
<dd>dl列表項2</dd>
</dt>
</dl>
2.內聯元素<br />
內聯元素：1.內聯元素間同行顯示2.寬度默認值爲：其中內容的寬度。且不支持寬高3.不支持上下margin、padding4.內聯元素之間有間隙（換行被解析）
<hr />
<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
<hr />
3.相互轉換:display屬性<br />
<div>div1</div>
<div>div2</div>
<span class="s1">span1</span>
<span class="s2">span2</span>
</body>
</html>
![]()
