CSS定位

定位的使用：

4种定位方式：静态(static)、相对(relative)、绝对(absolute)、固定(fixed)
定位的偏移属性：left/right/top/bottom

1. 静态定位

语法：position:static

<body>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 设置静态定位、偏移 */
      position: static;
      top: 20px;
      left: 20px;
    }
    .box2 {
      width: 400px;
      height: 400px;
      background-color: gray;
    }
  </style>
  <div class="box1">1</div>
  <div class="box2">2</div>
</body>

标准流元素设置了静态定位和不设置是一样的，且偏移对静态定位无效，对其他元素也没有影响

2.相对定位

语法：` position:relative`

 <body>
   <style>
     * {
       margin: 0%;
       padding: 0;
     }
     .box1 {
       width: 100px;
       height: 100px;
       border: 1px solid red;
       /* 相对定位、偏移 */
       position: relative;
       top: 20px;
       left: 20px;
     }
     .box2 {
       width: 200px;
       height: 200px;
       background-color: gray;
     }
   </style>
   <div class="box1">1</div>
   <div class="box2">2</div>
 </body>

相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置
不会对标准流的元素造成影响
可以覆盖标准流的元素

3.绝对定位

语法：position:absolute

<body>
  <style>
    * {
      margin: 0%;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /* 设置绝对定位、偏移 */
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .box2 {
      width: 200px;
      height: 200px;
      background-color: gray;
    }
  </style>
  <div class="box1">1</div>
  <div class="box2">2</div>
</body>

偏移位置参考设置过定位的父系元素，父系元素不设定，以html为参考

4.绝对定位

语法：position:fixed

<body>
  <style>
    .box2 {
      width: 100px;
      height: 100px;
      background-color: #eee;
      position: fixed;
    }
  </style> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  <div class="box2"></div>
  </body>

脱离文档流
不会随着滚动条滚动

定位	脱标否	偏移否	参照
static	否	否
relative	否	是	自身
absolute	是	是	含定位父级元素
fixed	脱	是	浏览器视口

5.定位元素的层叠效果

语法：z-index:值

取值：

数字
auto（默认值，与父级相同）

z-index只针对定位元素有效果（但不包括静态定位）
z-index值越大，层级越高

事件

1.什么是事件

一种“触发”到“响应”的机制
用户的行为 + 浏览器感知（捕获）到用户的行为+事件处理程序

事件三要素

事件源：触发事件的元素
事件类型：事件触发的方式（如，鼠标点击、移动或键盘点击等）
事件的处理程序：事件触发后腰执行的代码（函数形式）

2.事件绑定

行内绑定（元素属性）

<body>
    <input type="button" value="按钮" id="btn" onclick="alert(2)">
</body>
<body>
    <input type="button" value="按钮" id="btn" onclick="f()">
</body>
<script>
    function f(){
        console.log(3);
    }
</script>

动态绑定（节点对象属性）

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        alert(4);
    }
</script>

获取节点对象，然后修改节点对象的属性值

以上两种事件绑定，需要在事件名称前加on

事件监听（节点对象方法）

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        alert(5);
    });
</script>

每一个节点对象都提供了 addEventListener 方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序；
事件监听可以多次执行一个对象的同名事件。

移除事件监听

<body>
    <input type="button" value="按钮" id="btn">
</body>
<script>
    function f(){
        alert(5);
    }
    var btn = document.getElementById('btn');
    btn.addEventListener('click',f);
    btn.removeEventListener('click',f);
</script>

removeEventListener方法移除的监听函数，
必须与对应的addEventListener方法的参数完全一致，
而且必须在同一个元素节点，否则无效

3.事件的传播

事件冒泡：当多个嵌套的标签。都绑定了同名事件，点击内部的标签，会间接触发上层的事件。（三种事件绑定方式默认监听冒泡阶段，由内向外）

事件捕获：与冒泡的传播顺序相反，有外向内触发，捕获阶段只能通过addEventListener方法进行设置（第三个参数设置为true）

4.事件委托

event.target:事件触发的节点
event.currentTarget:事件绑定的节点

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父
节点上，由父节点的监听函数统一处理多个子元素的事件。
这种方法叫做事件的代理也叫 事件委托 也有人称为 事件代理

简易下拉菜单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="nav">
      <li><a href="">首页</a></li>
      <li><a href="">视频教程</a></li>
      <li><a href="">入门教程</a></li>
      <li><a href="">社区问答</a></li>
      <li>
        <a href="">技术文章</a>
        <ul>
          <li><a href="">头条</a></li>
          <li><a href="">博客</a></li>
          <li><a href="">PHP教程</a></li>
          <li><a href="">PHP框架</a></li>
          <li><a href="">PHP小知识</a></li>
          <li><a href="">mysql教程</a></li>
          <li><a href="">html教程</a></li>
          <li><a href="">css教程</a></li>
          <li><a href="">js教程</a></li>
          <li><a href="">服务器运维</a></li>
        </ul>
      </li>
      <li>
        <a href="">资源下载</a>
        <ul>
          <li><a href="">PHP工具</a></li>
          <li><a href="">在线工具</a></li>
          <li><a href="">手册下载</a></li>
          <li><a href="">学习课件</a></li>
          <li><a href="">js特效</a></li>
          <li><a href="">后端模板</a></li>
          <li><a href="">网站源码</a></li>
          <li><a href="">类库下载</a></li>
        </ul>
      </li>
      <li><a href="">工具下载</a></li>
      <li><a href="">PHP培训</a></li>
    </ul>
  </body>
</html
<style>
//初始化网页
    * {
  margin: 0;
  padding: 0;
}
//清除a标签默认样式
a {
  display: inline-block;
  text-decoration: none;
  color: #ccc;
  font-size: 14px;
  width: 100px;
  box-sizing: border-box;
  padding-left: 15px;
}
//导航栏样式
#nav {
  height: 50px;
  background-color: black;
  line-height: 50px;
  vertical-align: auto;
}
//清除li标签默认样式
li {
  list-style: none;
  float: left;
  box-sizing: border-box;
}
//相对定位，为次级列表提供定位容器
#nav > li {
  position: relative;
}
//鼠标浮动到a标签上的样式
#nav > li > a:hover {
  color: white;
}
//子菜单的样式，默认不显示
#nav > li > ul {
  position: absolute;
  top: 50px;
  left: -5px;
  border: 1px solid #ccc;
  border-radius: 5%;
  background-color: #eee;
  width: 200px;
  line-height: 30px;
  display: none;
}
</style>
<script>
//获取节点集合
  const navs = document.querySelectorAll("#nav>li");
//遍历集合
  navs.forEach(function (nav) {
    nav.addEventListener("mouseover", show);//监听鼠标移入，绑定事件处理函数
    nav.addEventListener("mouseout", hidden;//监听鼠标移出，绑定事件处理函数
  });
//完善事件处理函数
//显示函数
  function show(ev) {
  //判断是否有子菜单
    if (ev.target.nextElementSibling !== null) {
    //修改节点属性值
      ev.target.nextElementSibling.style.display = "block";
    }
  }
//隐藏函数
  function hidden(ev) {
     //受冒泡影响，需要规避li的影响
    if (ev.target.nextElementSibling !== null && ev.target.nodeName !== "a") {
    //修改节点属性值
      ev.target.nextElementSibling.style.display = "none";
    }
  }
</script>

初步理解css定位与事件监听与事件委托（实现简易下拉菜单）