css百分比规则 |css 撑开盒子

.example {
width: 50%;
height: 75%;
font-size: 120%;
border: 1px solid black;
padding: 2%;
}

在上面的例子中，width属性的值是50%，表示元素的宽度占父元素宽度的50%。同理，height属性的值是75%，表示元素的高度占父元素高度的75%。

字体大小的百分比规则也非常常见，通常用于响应式设计。在示例代码中，font-size属性的值是120%，表示文本的大小比默认大小增加20%。

边框和内边距也可以使用百分比规则来进行调整。在示例代码中，元素的边框宽度是1px，内边距是2%。这意味着边框的宽度不会随着元素的大小而改变，但内边距的大小将根据元素的大小而调整。

总的来说，CSS中的百分比规则可以帮助大家实现响应式设计和元素尺寸的灵活控制。虽然一些属性不能使用百分比规则，但大多数属性都支持并经常使用这种规则。