<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Div和Span的使用</title>
<style type="text/css">
div{
/* margin表示的是边界 */
background-color: #f6f6f6; color: #000000; height: 2em; margin: 2px;
}
/* 改变div显示方式,在一行内显示了 */
.inline_disp{display: inline;}
.block_disp{
/* 改变span标签的显示方式 */
display: block;
height: 4em;
/* 背景颜色 */
background-color: rgb(200, 200, 200);
margin: 2px;
}
</style>
</head>
<body>
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<span id="s1">这是span1</span>
<span id="s2">这是span2</span>
<div id="d3" class="inline_disp">这是div3</div>
<div id="d4" class="inline-disp">这是div4</div>
<span id="s3" class="block_disp">这是span3，在使用CSS排版的页面中，div标记和span标记是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便地实现各种效果。</span>
<span id="s4" class="block_disp">这是span4，在使用CSS排版的页面张总，div标记和span标记是两个常用的标签。利用这两个标签，加上CSS对其样式的控制，可以很方便地实现各种效果。</span>
</body>
</html>
