css中怎样写百分比布局

CSS百分比布局是一种针对不同屏幕尺寸的响应式布局方案。通过在CSS中指定元素的宽度或高度为百分比，可以使页面在不同设备上显示出最佳效果。

以下是一个简单的百分比布局示例：

.container {
    width: 80%;
    margin: 0 auto;
}

.item {
    width: 25%;
    float: left;
    margin: 0 2.5%;
} 

其中，container为容器元素，设置宽度为80%并通过margin属性居中。item为子元素，设置宽度为25%并使用float属性实现横向布局，同时通过margin属性定义元素间隔。

需要注意的是，在使用百分比布局时，不应该将具体数值写死，而应该根据实际情况进行计算。例如，若需要将一个元素宽度设置为浏览器窗口宽度的50%，应该使用如下代码：

.element {
    width: 50vw;
} 

其中，vw单位表示视口宽度的百分比，是一种相对于视口的尺寸单位，可在响应式布局中非常方便的进行使用。

在实际应用中，需要根据实际需求进行调整，例如根据设计稿确定元素宽度比例、使用媒体查询在不同屏幕尺寸下进行布局调整等。