.container { width: 80%; height: 50%; }
上面的代码展示了一个CSS选择器,将一个容器的宽度设置成了父元素宽度的80%。同样,高度也设置成了父元素高度的50%。百分比单位非常适合设计响应式网页,因为它可以根据容器大小改变而自动调整元素的大小。
在使用百分比单位时,需要注意以下几点:
- 如果应用于元素的百分比单位是相对于其父元素的,则父元素必须具有确定的尺寸。
- 如果应用于元素的百分比单位是相对于视口的,则视口必须具有确定的尺寸。
- 如果百分比单位应用于字体大小,则它是相对于其父元素的字体大小。
总之,百分比单位是CSS布局中的重要组成部分,并且可以通过设置元素的大小,使元素自适应其容器大小,从而打造出响应式网页。