CSS尺寸——CSS实验室

为了测试CSS尺寸相关的属性，我们需要一个包含了一个段落的div，点击下面的按钮将div圈出来。

CSS高度，height

设置CSS的height属性，可以控制元素的高度。下面我们就试着设置测试div的高度。

height: px　

CSS宽度，width

设置CSS的width属性，可以控制元素的宽度。下面我们就试着设置测试div的宽度。

width: px　

CSS溢出，overflow

为了测试溢出属性，我们先来设置div的宽度150像素，高度为100像素。

width:150px;

height:100px;

可以看到，有一部分文字“溢出”到了div的外部。但是它们仍然是显示出来的，可以通过设置CSS的overflow属性来控制这些溢出内容的显示。

overflow:hidden;

设置为hidden之后，溢出的内容就会隐藏起来。

overflow:scroll;

设置为scroll后，div周围会出现滚动条，可以通过滚动来显示溢出的内容。

overflow:visible;

设置为visible则表示仍然显示溢出内容。

overflow:auto;

设置为auto属性值表示根据是否有溢出内容来决定是否显示滚动条。