码迷,mamicode.com
首页 > Web开发 > 详细

css的display和overflow

时间:2020-07-27 17:42:56      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:lin   适应   block   box   溢出   滚动   auto   pre   doctype   


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>

 

css的display和overflow

标签:lin   适应   block   box   溢出   滚动   auto   pre   doctype   

原文地址:https://www.cnblogs.com/tilyougogannbare666/p/13385437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!