<!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>
![]()
