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{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>