css 比例布局 |css优雅降级

css自制半圆，css纸张背景效果，浮窗样式css，css js 幻灯片，水痕进度条css，如何用html css做网页，css优雅降级 css 比例布局 |css优雅降级

/* HTML代码 */
<div class="container">
<div class="box">这里是内容</div>
</div>
/* CSS代码 */
.container {
position: relative;
width: 100%;
padding-top: 100%; /* 长宽比 1:1 */
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f1f1f1;
text-align: center;
line-height: 150%;
font-size: 24px;
}

在上面的代码中，大家先创建了一个父元素类名为“container”的div，它的宽度设置为100%，然后给它设置了一个padding-top为100%，这里的百分比可以根据实际需求进行调整。

接下来，大家创建了一个子元素类名为“box”的div，并设置了它的位置为绝对定位（position:absolute），然后设置左上角坐标为0，宽度和高度均为100%。这样，在“container” div中添加任何内容都可以自适应窗口大小并保持1:1的长宽比。

通过CSS比例布局，大家可以轻松地实现网页的响应式设计。不管是在PC端、平板还是手机上，网页都可以自适应设备屏幕大小并呈现出较好的视觉效果。