1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 /* display:inline按照内联方式呈现 */
8 #box01,#box02{width: 200px; height: 200px; background-color: red; display: inline;}
9 /* display:block 按照块方式呈现*/
10 #s1,#s2{width: 200px; height: 200px; background-color: red;display: block;}
11
12 </style>
13 </head>
14 <body>
15 <div id="box01">
16 我是box01
17 </div>
18 <div id="box02">
19 我是box02
20 </div>
21 <span id="s1">
22 内联1
23 </span>
24 <span id="s2">
25 内联2
26 </span>
27 </body>
28 </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* div{width: 200px;height: 200px;overflow: hidden;border: 1px #000000 solid;} 截取没超出的，在框外的不显示*/
/* div{width: 200px;height: 200px;overflow: auto;border: 1px #000000 solid;} 自适应，文字超出时有滚动条，没超出时没有*/
/* x和y轴都有滚动条 */
div{width: 200px;height: 200px;overflow: scroll;border: 1px #000000 solid;}
</style>
</head>
<body>
<div >
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>
</body>
</html>
