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>