div {
width: 80%;
height: 50%;
}如上所示代码，表示一个元素的宽度为父级容器的80%，高度为父级容器的50%。这种方式可以使元素随着父级容器大小的变化而自适应。例如，当父级容器的宽度变化时，元素也会随之变化，从而保证页面布局的灵活性。
需要注意的是，百分比值的基准点通常是父级容器的宽度和高度，而非元素本身的宽度和高度。因此，在使用百分比控制元素大小时，需要对父级容器的大小进行认真的设计和调整。
.container {
width: 1000px;
height: 500px;
}
.box {
width: 50%;
height: 80%;
}如上所示代码，在一个容器中，通过对容器宽度和高度进行设置，然后设置元素的宽度为容器宽度的50%，高度为容器高度的80%。这样，元素的大小将随着容器的大小变化而自适应，并且与容器大小的比例保持恒定。
总之，通过CSS3中的宽高百分比，大家可以轻松实现响应式网页设计，使得页面根据不同的设备和屏幕大小做出自适应调整，提升用户的交互体验和使用效果。