DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> overflow 屬性
overflow 屬性
編輯:CSS特效代碼     

寫在前面的話:

2016年5月4日青年節,作為一名正青春的學生黨,開始了博客生涯,勵志做個勤奮上進的好青年。幻想著畢業後月薪W+ 、走上人生巅峰的職場生活......

然而 然而 然而 ,自制力有限的我昨天還是沒有控制住,追起了《歡樂頌》,啊啊啊啊啊,一看就是一整天啊,簡直是大寫的頹廢!!!

哈哈,我相信很多人也在追這部劇,在這部劇裡,每個人應該都能夠找到自己喜歡的角色,也應該能夠從她們身上找到點點相似的地方,個人感覺是一部很值得看的劇。

不過話又說回來,劇裡的故事都是別人的,還應該及時回到現實生活中,做好自己的主角,想清楚自己想要什麼樣的生活,或者是不要什麼樣的生活,踏踏實實往前走。。。

啊啊啊,請不要打翻這碗雞湯,勿噴 勿噴 勿噴,跪謝!

還有,今天是母親節,記得給自己母親打個電話。。。來自<一只有夢想的前端小白>


 

overflow 有以下四個屬性(來自何問起)

1、overflow:visible

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: visible;
        }
    </style>
</head>
    <body>
        <div class="box">
            <img src="img/flower.png"/>
        </div>
    </body>
</html>

效果如下:

overflow:visible 也是overflow 默認的屬性值,如上圖效果所示,超出父元素的部分會依舊顯示出來,同時超出部分不會撐開父元素的高。

2、overflow:hidden

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>
</head>
    <body>
        <div class="box">
            <img src="img/flower.png"/>
        </div>
    </body>
</html>

效果如下:

如圖所示,子元素會顯示在父元素內,超出父元素的部分會被隱藏。同時,在上一次清除浮動問題中也講到過,可以給父元素加overflow:hidden,來達到清除浮動的效果。

3、overflow:scroll

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: scroll;
        }
    </style>
</head>
    <body>
        <div class="box">
            <img src="img/flower.png"/>
        </div>
    </body>
</html>

效果如下:

如上圖所示,此時設置的是overflow:scroll ,x和y方向都會產生滾動條,及時父元素的寬足夠子元素的寬,也會產生滾動條,如果設置overflow-y: scroll;水平方向就不會產生滾動條,效果如下:

4、overflow: auto

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style type="text/css">
        .box{margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid red;
            overflow: auto;
        }
    </style>
</head>
    <body>
        <div class="box">
            <img src="img/flower.png"/>
        </div>
    </body>
</html>

效果如下:

此時浏覽器會根據父元素和子元素的寬和高,自動設置滾動條。

當然,以上overflow 的屬性都是在父元素固定寬和高的基礎上實現的效果。


 

希望以上的介紹對您能有所幫助,同時這也是我自己只是內化的過程,感謝!----來自<一只有夢想的前端小白>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved