首頁 > web前端 > css教學 > css怎麼加捲軸

css怎麼加捲軸

王林
發布: 2023-01-07 11:43:03
原創
5828 人瀏覽過

css新增捲軸的方法是,為div新增overflow屬性,並且設定屬性值為scroll,如【overflow: scroll;】。 overflow屬性指定了內容溢出時,會發生什麼。

css怎麼加捲軸

本文操作環境:windows10系統、css 3、thinkpad t480電腦。

要新增滾動條其實很簡單,有一個屬性overflow,它指定如果內容溢出一個元素的框,會發生什麼事。

來看看屬性值:

visible    預設值。內容不會被修剪,會呈現在元素框外。

hidden    內容會被修剪,且其餘內容是看不見的。

scroll    內容會被修剪,但是瀏覽器會顯示捲軸以便查看其餘的內容。

auto    如果內容被修剪,則瀏覽器會顯示捲軸以便查看其餘的內容。

inherit    規定應該從父元素繼承 overflow 屬性的值。

範例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>php中文网(php.cn)</title>

<style>

div.ex1 {

    background-color: lightblue;

    width: 110px;

    height: 110px;

    overflow: scroll;

}

 

div.ex2 {

    background-color: lightblue;

    width: 110px;

    height: 110px;

    overflow: hidden;

}

 

div.ex3 {

    background-color: lightblue;

    width: 110px;

    height: 110px;

    overflow: auto;

}

 

div.ex4 {

    background-color: lightblue;

    width: 110px;

    height: 110px;

    overflow: visible;

}

</style>

</head>

<body>

<h1>overflow 属性</h1>

 

<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>

 

<h2>overflow: scroll:</h2>

<div class="ex1">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>

 

<h2>overflow: hidden:</h2>

<div class="ex2">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>

 

<h2>overflow: auto:</h2>

<div class="ex3">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>

 

<h2>overflow: visible (默认):</h2>

<div class="ex4">php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!php中文网,梦开始的地方!</div>

 

</body>

</html>

登入後複製

大家可以將上面的程式碼複製到本地,然後在本地運行看看效果。

相關影片教學分享:css影片教學

#

以上是css怎麼加捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板