css學習筆記-盒子內顯示不下的內容的處理

學習 overflow:hidden,scroll,auto,visible

overflow-xoverflow-y

overflow-x,overflow-y和overflow的用法是一樣的,只是特地的指定了x與y軸而已。我這裏只寫了overflow的用法。

1.不添加overflow樣式

首先上代碼:限定了div的寬度和高度,但是裏面的內容缺超出了div的大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子中顯示不下的內容的學習</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: aqua;
        }

    </style>
</head>
<body>
<div>
    <h1>默認</h1>
    <p>
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
    <p>
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
</div>
</body>
</html>

得到的效果如是這樣的:


2.在css中添加:overflow:hidden 得到的效果是:


3.overflow:scroll 出現了左右和上下的滾動條,只是上下的內容還不夠多,所以有了滾動條組建,還沒有條而已。

4.overflow:auto 根據內容的多少,來智能的添加滾動條,與overflow:scroll不同的是,沒有添加上下的滾動條:


5還有一個overflow:visible,這個和不寫overflow的效果是一樣的






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章