<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 大盒子 */
.box {
position: relative;
box-sizing: border-box;
background-color: #ff0000;
width: 300px;
height: 300px;
}
/* 内部盒子公共部分 */
.outer,.inner{
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
}
/* 自定义颜色 */
.outer {
background-color: green;
}
.inner {
background-color: rgb(21, 0, 128);
}
/* 媒体查询,响应式页面 */
@media (max-width: 300px) {
.outer,
.inner {
position: absolute;
top: 0;
left: 0;
}
}
@media (min-width: 301px) and (max-width: 768px) {
.outer,
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
@media (min-width: 769px) and (max-width: 1080px) {
.outer,
.inner {
position: absolute;
bottom: 0;
right: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
嵌套盒子定位:
1.position:子绝父相对 同时 父盒子给固定宽高 、子盒子使用相对长度单位%
2.通过top、left、bottom、right定位相关元素到指定位置
响应式设计:
使用条件媒体查询根据视口不同宽度用css展示不同页面效果。