css的display和overflow
阿新 • • 發佈：2020-07-27
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>