css响应式布局处理定位 |css3把背景颜色为椭圆

/* 以百分比为单位的定位 */
.container {
position: relative;
width: 100%;
}
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
}
/* 使用断点设置不同的定位 */
@media screen and (max-width: 600px) {
.box {
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
}
/* 使用尺寸单位定位 */
.box2 {
position: relative;
left: 10px;
top: 20px;
width: 200px;
height: 100px;
}
/* 超出屏幕范围的元素可使用margin负值调整显示 */
.box3 {
position: absolute;
right: -20px;
margin-right: -20px;
top: 50%;
transform: translateY(-50%);
width: 200px;
}

看到这里，你有没有发现，在响应式布局中，处理定位有多种方法，哪种更优，还需要根据实际需求和效果来判断。但多尝试和实践是必不可少的，这样才能掌握好响应式布局的各种技巧和方法。