css的display和overflow


 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{ 200px;height: 200px;overflow: hidden;border: 1px #000000 solid;} 截取没超出的，在框外的不显示*/
            /* div{ 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>