為了測試CSS尺寸相關的屬性,我們需要一個包含了一個段落的div,點擊下面的按鈕將div圈出來。
設置CSS的height屬性,可以控制元素的高度。下面我們就試著設置測試div的高度。
height: px
設置CSS的width屬性,可以控制元素的寬度。下面我們就試著設置測試div的寬度。
width: px
為了測試溢出屬性,我們先來設置div的寬度150像素,高度為100像素。
width:150px;
height:100px;
可以看到,有一部分文字“溢出”到了div的外部。但是它們仍然是顯示出來的,可以通過設置CSS的overflow屬性來控制這些溢出內容的顯示。
overflow:hidden;
設置為hidden之后,溢出的內容就會隱藏起來。
overflow:scroll;
設置為scroll后,div周圍會出現滾動條,可以通過滾動來顯示溢出的內容。
overflow:visible;
設置為visible則表示仍然顯示溢出內容。
overflow:auto;
設置為auto屬性值表示根據是否有溢出內容來決定是否顯示滾動條。