定位
absolute 绝对定位
应用场景
元素的水平垂直居中有重叠效果
<div>
<img src="img/1.webp" alt="">
<ul>
<li class="first"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
div {
width: 800px
; 设置宽高和图片一样的宽高
height: 300px
;
border: 10px solid black
;
position: relative
;
}
ul {
background-color: blueviolet
;
position: absolute
; 参考div去定位
bottom: 30px
;
right: 50px
;
}
二级菜单
二级菜单添加绝对定位属性 定位元素的层级关系 z-index
auto 默认值数值 数值越大，层级越高，在最上面显示，可以为负数
宽高自适应
宽度自适应,参考父元素
宽度不设置设置百分比最大宽度(max-width)和最小宽度(min-width) 高度自适应
auto 自动 根据内容撑开高度不设置 根据内容撑开百分比 参考父元素最小高度(min-height)和最大高度(max-height)一屏页面(盒子的宽高和当前浏览器的宽高一样)的实现方式
html,body{
height:100%
;
}
div{
height:100%
;
width:100%
; (可设，可不设
)
}
圆形
border-radius:50%/100%;
