第九章 定位

定位

• 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 {
            /* width: 400px;
            height: 25px; */
            background-color: blueviolet;
            position: absolute; 参考div去定位
            bottom: 30px;
            right: 50px;
        }
      

    • 二级菜单
      1. 二级菜单添加绝对定位属性
• 定位元素的层级关系 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%;