定位的应用

定位的应用

情况一：

小盒子 大盒子宽高都已知的情况
使用padding
或者margin
或者 给小盒子设置绝对定位 大盒子设置相对定位

情况二：

小盒子宽高已知 大盒子宽高未知
给小盒子设置绝对定位 大盒子设置相对定位
小盒子：
left:50%;
top:50%;
此时，小盒子的左上角在中间点的位置，所以，需要小盒子往左移本身宽度的一半，往上移动本身高度的一半
margin-left:负的小盒子的宽度一半
margin-top:负的小盒子的高度的一半

情况三：

注意：

此种方法三种情况都适用。

大小盒子的宽高都未知
给小盒子设置绝对定位，大盒子相对定位
小盒子：
left:0;
top:0;
bottom:0;
top:0;
此时小盒子在某种层面上已知大盒子的宽高
margin:auto;
自动居中

比如：
html,body{
height:100%;
}
大盒子{
height:100%;
width:100%;(默认的，可以不写)
}
小盒子{
width：30%;
height:40%;
}
小盒子宽是大盒子宽的30%，
小盒子高是大盒子高的40%。
大盒子宽高未知，随浏览器的变化而变化，因此小盒子大小也跟着变化。