美文网首页web基础学习之路
第九周第三天笔记

第九周第三天笔记

作者: 果木山 | 来源:发表于2018-09-21 23:52 被阅读0次

事件

1 事件流

  • 冒泡:从该元素开始由里向外触发一类事件,事件对象中的事件源为该元素,触发同一类事件,在子级父级祖级中拿到的事件源一样,均为被触发元素;

    • 阻止冒泡:e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
    • 关于冒泡的运用:典型的是事件委托
      • 事件委托:将事件添加到最高级元素上,事件中获取事件源的属性,当触发某元素上的事件时,就会在最高级中获取事件源,也就是该元素;
    • 实例1:在多层嵌套的div中,点击哪个元素,就弹出哪个元素的class名;
      • 方法:
        • 1)遍历div,给每个元素添加点击事件,然后弹出class名,但是会出现冒泡事件,所以必须阻止冒泡事件
        • 2)事件委托
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>冒泡与阻止冒泡</title>
           <style>
               div{
                   padding: 100px;
                   font-size: 50px;
               }
               .div1{
                   background-color: red;
               }
               .div2{
                   background-color: blue;
               }
               .div3{
                   background-color: green;
               }
           </style>
       </head>
       <body>
       <div class="div1">div1
           <div class="div2">div2
               <div class="div3">div3</div>
           </div>
       </div>
       <script>
           //需求:点击谁,弹出谁的class名
           var oDiv1=document.getElementsByTagName("div")[0];
           var aDiv=document.getElementsByTagName("div");
           //第一种方法:遍历div,给每个元素添加点击事件,然后弹出class名,要阻止冒泡事件
           for(var i=0; i<aDiv.length; i++){
               aDiv[i].onclick=function (e) {
                   alert(this.className);
                   //会存在冒泡事件,所以要阻止冒泡
                   e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
               }
           }
           //第二种方法:事件委托,委托给最高级,通过事件源获取
           //由于事件存在冒泡特性,所以在触发某元素的事件时,同时会触发其父级和祖级的该类事件,都传入同一个事件对象,里面的事件源都是触发的某元素,所以只要在最高级上添加点击事件,里面获取事件源的class名即可
           oDiv1.onclick=function (e) {
               e=e||window.event;
               e.target=e.target||e.srcElement;
               alert(e.target.className);
           }
       </script>
       </body>
       </html>
      
    • 实例2:在body元素中有多个div元素,在点击里面的a链接后,就删除该a元素的父级div;
      • 方法:事件委托给最高级body元素,给body添加点击事件,然后在事件匿名函数中获取事件源,然后删除事件源的父级div;
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>事件委托</title>
           <style>
               div{
                   width: 100px;
                   height: 100px;
                   background-color: lightseagreen;
                   float: left;
                   margin: 5px;
               }
               div a{
                   color: red;
                   text-decoration: none;
                   font-weight: bold;
               }
           </style>
       </head>
       <body>
       <!--<div>
           <a href="javascript:void(0);">点吧</a>
       </div>-->
       <script>
           for(var i=0; i<20; i++){
               var odiv=document.createElement("div");
               odiv.innerHTML=`<a href="javascript:void(0);">${i}点吧</a>`;
               document.body.appendChild(odiv);
           }
           //事件委托,给最高级元素添加事件
           //当点击a标签时,就会触发a的点击事件,同时由里向外触发父级div和祖级body的点击事件,然后每个事件中拿到的事件对象上的target属性值都是a元素,即事件源都是a元素;
           //通过判断事件源来决定删除哪个a元素的父级;
           document.body.onclick=function (e) {
               e=e||window.event;
               e.target=e.target || e.srcElement;
               if(e.target.tagName.toLowerCase()==="a"){
                   this.removeChild(e.target.parentNode);
               }
           }
       </script>
       </body>
       </html>
      
    • 注:某个元素事件发生,不用给其添加代码,只要在它身上触发该事件就行,添加代码,只不过给其设置一个能够显现出来的动作而已,不添加,也会触发;
  • onmouseenter、onmouseleave、onmouseover、onmouseout四者关系解读

    • 相同点:都是添加鼠标移入移出事件
    • 不同点:onmouseover和onmouseout中会存在冒泡事件;onmouseenter和onmouseleave中不存在冒泡事件;
    • 实例解读:
      • 需求:当鼠标移动到div元素身上时,p元素显示,显示的时候,移动到p元素身上,仍然显示,移动到div和p元素之外的位置,p元素再隐藏;
      • 方法:
        • 使用onmouseenter与onmouseleave设置:当光标从div上移出到p元素上时,没有打印out,也没有再次打印in,意思是两个事件都没有被触发,指的就是当移动到子级身上时,根本不算移出;所以给oDiv元素添加onmouseenter事件,指的是当光标移入到它或者是它的子级,都会触发事件;不是冒泡事件,而是将oDiv和它的子级作为了一个整体;
        • 使用onmouseover与onmouseout设置:使用onmouseover和onmouseout也会实现需求,但是实现的过程不同,当光标移入div会触发onmouseover事件,然后打印in,当光标从div元素上移出并立刻进入p元素时,此时发生了两个过程,移出div时,会触发div的onmouseout事件,打印out,并使p隐藏;然后迅速进入p元素,此时触发p元素的onmouseover事件,但是没有动作,会通过冒泡事件,连带父级div触发onmouseover事件,所以再次打印in,然后p显示;所以肉眼没有发现p被隐藏,又被显示。当移出p元素时也是通过冒泡事件,将父级onmouseout事件触发,进而打印out,使p隐藏;
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>onmouseenter与onmouseleave解读</title>
           <style>
               *{
                   margin: 0;
                   padding: 0;
               }
               .div1{
                   width: 200px;
                   height: 50px;
                   background-color: lightseagreen;
                   position: relative;
                   margin: 20px auto;
               }
               .div1 p{
                   width: 500px;
                   height: 300px;
                   position: absolute;
                   right: 0;
                   top: 50px;
                   background-color: lightpink;
                   display: none;
               }
           </style>
       </head>
       <body>
       <div class="div1">
           <p></p>
       </div>
       <script>
           //需求:当鼠标移动到div元素身上时,p元素显示,显示的时候,移动到p元素身上,仍然显示,移动到div和p元素之外的位置,p元素再隐藏;
           var oDiv=document.getElementsByTagName("div")[0];
           var oP=document.getElementsByTagName("p")[0];
           //1 使用onmouseenter与onmouseleave设置
           oDiv.onmouseenter=function () {
               console.log("in");
               oP.style.display="block";
           };
           oDiv.onmouseleave=function () {
               console.log("out");
               oP.style.display="none";
           };
           //当光标移入div,再移入p,再移出p,整个过程中打印结果:in-out;
           //2 使用onmouseover与onmouseout设置
           oDiv.onmouseover=function () {
               console.log("in");
               oP.style.display="block";
           };
           oDiv.onmouseout=function () {
               console.log("out");
               oP.style.display="none";
           }
           //当光标移入div,再移入p,再移出p,整个过程中打印结果:in-out-in-out
       </script>
       </body>
       </html>
      
  • 冒泡的问题:给父级添加事件后,在子级上触发,还会触发父级的事件,会重复触发,造成性能不好,还会造成代码混乱;

    • 解决方法:在子级中添加相同事件,并在事件中阻止冒泡;代码:e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
    • 通过关联元素获取到子级,然后判断阻止,此方法只能解决代码混乱问题,不会进行性能优化,父级事件还会因子级事件触发而触发,只不过是在父级事件中阻断了一些代码的执行,避免重复设置,造成混乱;
    • 在父级事件函数中,通过事件对象获取事件源,通过事件源来筛选触发元素,不能阻止冒泡事件发生,但是可以阻止,当从子级触发时,不会再执行父级函数体内的代码;
  • 冒泡的问题及解决问题的实例:

    • 实例1:当鼠标滑到div上时,新建一个p元素,让其跟随光标移动,当光标移出div后,p元素消失;
      • 问题:当鼠标移动到子级p身上的时候,会触发鼠标事件,通过冒泡触发父级身上的鼠标事件,进而再新建一个p元素,进而出错;
      • 解决方法:1)将子级p元素中的冒泡事件阻止,这样父级就不会被关联触发;2)利用对象事件上的属性获取添加事件元素的关联元素,判断当包含时,则阻止程序执行,进而不会被影响;3)利用onmouseenter和onmouseleave添加事件;
      • 注意:鼠标移动事件太灵敏,所以需要在定位数值设置时使光标与定位元素有一段距离;
      • 代码:
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>实例2</title>
           <style>
               *{
                   margin: 0;
                   padding: 0;
               }
               .div{
                   width: 500px;
                   height: 350px;
                   background-color: red;
                   margin: 20px auto;
                   position: relative;
               }
               .div p{
                   width: 50px;
                   height: 50px;
                   background-color: blue;
                   position: absolute;
               }
           </style>
       </head>
       <body>
       <div class="div"></div>
       <script>
           var oDiv=document.getElementsByTagName("div")[0];
           var oS=null;
           //方法1:将子级p元素中的冒泡事件阻止,这样父级就不会被关联触发;
           oDiv.onmouseover=function () {
               oS=document.createElement("p");
               oS.onmouseover=function (e) {
                   //阻止冒泡事件
                   e=e||window.event;
                   e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
               };
               this.appendChild(oS);
           };
           oDiv.onmousemove=function (e) {
               e=e||window.event;
               oS.style.left=e.clientX-this.offsetLeft-this.clientLeft+5+"px";
               oS.style.top=e.clientY-this.offsetTop-this.clientTop+5+"px";
           };
           oDiv.onmouseout=function () {
               oS.onmouseout=function (e) {
                   //阻止冒泡事件
                   e=e||window.event;
                   e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
               };
               this.removeChild(oS);
           }
           //方法2:利用对象事件上的属性获取添加事件元素的关联元素,判断当包含时,则阻止程序执行,进而不会被影响;
          oDiv.onmouseover=function (e) {
               e=e||window.event;
               //关联元素的获取,在事件对象上
               var oMo=e.fromElement || e.realtedTarget;
               //判断是否包含关联元素,包含则阻止程序执行;
               if(this.contains(oMo)) return;
               oS=document.createElement("p");
               this.appendChild(oS);
           };
           oDiv.onmousemove=function (e) {
               e=e||window.event;
               oS.style.left=e.clientX-this.offsetLeft-this.clientLeft+8+"px";
               oS.style.top=e.clientY-this.offsetTop-this.clientTop+8+"px";
           };
           oDiv.onmouseout=function (e) {
               e=e||window.event;
               var oMo=e.toElement || e.realtedTarget;
               if(this.contains(oMo)) return;
               this.removeChild(oS);
           }
           //方法3:使用onmouseenter和onmouseleave
           oDiv.onmouseenter=function () {
               oS=document.createElement("p");
               this.appendChild(oS);
           };
           oDiv.onmousemove=function (e) {
               e=e||window.event;
               oS.style.left=e.clientX-this.offsetLeft-this.clientLeft+10+"px";
               oS.style.top=e.clientY-this.offsetTop-this.clientTop+10+"px";
           };
           oDiv.onmouseleave=function () {
               this.removeChild(oS);
           }
       </script>
       </body>
       </html>
      
    • 实例2:当鼠标移动到div元素身上时,p元素显示,显示的时候,移动到p元素身上,仍然显示,移动到div和p元素之外的位置,p元素再隐藏;
      • 问题:当鼠标移动到子级p元素身上时,会触发p元素的鼠标事件,进而再次触发父级div的鼠标事件,这样就会重复触发,性能不好,所以要阻止子级的冒泡事件
      • 解决方法:1)在子级中阻止冒泡事件,但是需要在子级中添加显示隐藏;2)通过对象事件获取关联元素;3)设置onmouseenter和onmouseleave事件,能够解决性能问题,事件只触发一次
      • 注意:关联元素的方法可取,但是没有解决性能问题,因为滑到子级上,还是会触发父级的鼠标事件,没有完成性能优化,此处要注意的是,显示隐藏代码一定要设置在判断元素之后;在父级事件中代码执行前,判断关联元素的目的:是阻止父级事件中代码的执行,不会阻止冒泡事件的发生;
      • 代码:
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>冒泡问题解读</title>
           <style>
               *{
                   margin: 0;
                   padding: 0;
               }
               .div1{
                   width: 200px;
                   height: 50px;
                   background-color: lightseagreen;
                   position: relative;
                   margin: 20px auto;
               }
               .div1 p{
                   width: 500px;
                   height: 300px;
                   position: absolute;
                   right: 0;
                   top: 50px;
                   background-color: lightpink;
                   display: none;
               }
           </style>
       </head>
       <body>
       <div class="div1">
           <p></p>
       </div>
       <script>
           //需求:当鼠标移动到div元素身上时,p元素显示,显示的时候,移动到p元素身上,仍然显示,移动到div和p元素之外的位置,p元素再隐藏;
           //问题:当鼠标移动到子级p元素身上时,会触发p元素的鼠标事件,进而再次触发父级div的鼠标事件,这样就会重复触发,性能不好,所以要阻止子级的冒泡事件
           var oDiv=document.getElementsByTagName("div")[0];
           var oP=document.getElementsByTagName("p")[0];
           //方法1:在子级中阻止冒泡事件,但是需要在子级中添加显示隐藏;
           oDiv.onmouseover=function () {
               console.log("in");
               oP.style.display="block";
               oP.onmouseover=function (e) {
                   //阻止冒泡但是要重新设置显示隐藏;
                   this.style.display="block";
                   e=e||window.event;
                   //阻止子级的冒泡事件
                   e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
               }
           };
           oDiv.onmouseout=function () {
               console.log("out");
               oP.style.display="none";
               oP.onmouseout=function (e) {
                   this.style.display="none";
                   e=e||window.event;
                   e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
               }
           }
           //方法2:通过对象事件获取关联元素
           //方法可取但是没有解决性能问题,因为滑到子级上,还是会触发父级的鼠标事件,没有完成性能优化,此处要注意的是,显示隐藏代码一定要设置在判断元素之后
           //在父级事件中代码执行前,判断关联元素的目的:是阻止父级事件中代码的执行,不会阻止冒泡事件的发生;
           oDiv.onmouseover=function (e) {
               console.log("in");
               e= e||window.event;
               var oMo=e.fromElement || e.relatedTarget;
               if(this.contains(oMo)) return;
               console.log(2);
               oP.style.display="block";
           };
           oDiv.onmouseout=function (e) {
               console.log("out");
               e= e||window.event;
               var oMo=e.toElement || e.relatedTarget;
               if(this.contains(oMo)) return;
               console.log(1);
               oP.style.display="none";
           }
           //打印结果:从进入div,在出来进入p,然后再从p移出这个过程的打印结果为:in-2-out-in-out-1;
           //方法3:设置onmouseenter和onmouseleave事件,能够解决性能问题,事件只触发一次
           oDiv.onmouseenter=function () {
               console.log("in");
               oP.style.display="block";
           };
           oDiv.onmouseleave=function () {
               console.log("out");
               oP.style.display="none";
           }
       </script>
       </body>
       </html>
      
    • 实例3:当鼠标移上div元素身上时,p显示;移出div元素后,p隐藏;强调:移出到任何位置,p都隐藏,移动p元素身上,也必须隐藏;
      • 问题:当鼠标移动到子级p元素身上时,会触发p元素的鼠标事件,进而再次触发父级div的鼠标事件,这样就会重复触发,性能不好,同时当鼠标移动到子级p元素身上的时候,子级不会隐藏,所以要阻止子级的冒泡事件;
      • 解决方法:1)在子级元素身上绑定同行为事件,然后在事件函数中阻止冒泡发生;2)在父级元素中,通过事件对象获取事件源,然后判断事件源的nodeName来获取元素TagName名,判断是否为父级元素标签,若不是,则阻止代码执行;
      • 代码:
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>需求2</title>
           <style>
               *{
                   margin: 0;
                   padding: 0;
               }
               .div1{
                   width: 200px;
                   height: 50px;
                   background-color: lightseagreen;
                   position: relative;
                   margin: 20px auto;
               }
               .div1 p{
                   width: 500px;
                   height: 300px;
                   position: absolute;
                   right: 0;
                   top: 50px;
                   background-color: lightpink;
                   display: none;
               }
           </style>
       </head>
       <body>
       <div class="div1">
           <p></p>
       </div>
       <script>
           var oDiv=document.getElementsByTagName("div")[0];
           var oP=document.getElementsByTagName("p")[0];
           //方法1:在子级事件函数中阻止冒泡发生;
           oDiv.onmouseover=function () {
               console.log("in");
               oP.style.display="block";
               oP.onmouseover=function (e) {
                   e=e||window.event;
                   //阻止子级的冒泡事件
                   e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
               }
           };
           oDiv.onmouseout=function () {
               console.log("out");
               oP.style.display="none";
               oP.onmouseout=function (e) {
                   e=e||window.event;
                   e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
               }
           };
           //方法2:在父级元素中判断事件源
           oDiv.onmouseover=function(e){
               e=e || window;
               e.target=e.target || e.srcElement;
               if(e.target.nodeName.toLowerCase!=="div") return;
               oP.style.display="block";
            };
            oDiv.onmouseout=function(e){
               e=e || window;
               e.target=e.target || e.srcElement;
               if(e.target.nodeName.toLowerCase!=="div") return;
               oP.style.display="none";
            };
       </script>
       </body>
       </html>
      
  • 购物车点击版实例

    • 需求:当点击div元素及p元素时,p元素显示,点击除二者以外的任何区域都让p隐藏
    • 思路:如果一个父级容器下添加多个事件,那么就将事件委托给父级容器,通过判断事件源来进行相应的操作;
    • 方法:1)通过开关思想,控制隐藏与显示,但是会存在一个问题,在第二个判断中如果不设置bOk=true,就会出现,第一次点击div后,p显示,然后点击外面,p消失,但此时的bOk为false,再次点击div时,会走else语句,不会显示;所以必须设置bOk=true; 2)通过判断p的行间样式是否为block来控制显示和隐藏;3)通过给父级容器添加点击事件,然后通过事件对象来获取事件源,判断事件源的nodeName是否为div和p的tagName名,若是二者之一,则设置p为显示,若都不是,则设置p为隐藏;
    • 知识点:事件委托的应用环境及行间样式的获取
    • 代码:
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>购物车点击版实例</title>
         <style>
             *{
                 margin: 0;
                 padding: 0;
             }
             html,body{
                 height: 100%;
             }
             .div1{
                 width: 200px;
                 height: 50px;
                 background-color: lightseagreen;
                 position: relative;
                 margin: 20px auto;
             }
             .div1 p{
                 width: 500px;
                 height: 300px;
                 position: absolute;
                 right: 0;
                 top: 50px;
                 background-color: lightpink;
                 display: none;
             }
         </style>
     </head>
     <body>
     <div class="div1">
         <p></p>
     </div>
     <script>
         //需求:当点击div元素及p元素时,p元素显示,点击除二者以外的任何区域都让p隐藏
         var oDiv=document.getElementsByTagName("div")[0];
         var oP=document.getElementsByTagName("p")[0];
         var bOk=true;
         //思路:如果一个父级容器下添加多个事件,那么就将事件委托给父级容器,通过判断事件源来进行相应的操作;
         //方法1:通过开关思想,控制隐藏与显示,但是会存在一个问题,在第二个判断中如果不设置bOk=true,就会出现,第一次点击div后,p显示,然后点击外面,p消失,但此时的bOk为false,再次点击div时,会走else语句,不会显示;所以必须天机bOk=true;
         document.body.onclick=function (e) {
             e=e||window;
             var target=e.target ||e.srcElement;
             if(target.className.toLowerCase()==="div1"){
                 if(bOk){
                     oP.style.display="block";
                 }else{
                     oP.style.display="none";
                 }
                 bOk=!bOk;
             }else if(target.tagName.toLowerCase()!=="p"){
                 oP.style.display="none";
                 bOk=true;
             }
         };
         //方法2:通过判断p的行间样式是否为block来控制显示和隐藏
         //需注意:在第一次点击div时,此时oP.style.display拿到的值为空,因为拿到的是行间样式,行间没有设置,而在style中设置的都是非行间样式,通过style是不能获取的,所以第一次点击会执行else语句;
         document.body.onclick=function (e) {
            e=e||window;
            var target=e.target ||e.srcElement;
            if(target.className.toLowerCase()==="div1"){
                if(oP.style.display==="block"){
                    oP.style.display="none";
                }else{
                    oP.style.display="block";
                }
            }else if(target.tagName.toLowerCase()!=="p"){
                oP.style.display="none";
            }
        }
         //方法3:通过判断事件源的nodeName来进行设置
         document.body.onclick=function (e) {
            e=e || window.event;
            e.target=e.target || e.srcElement;
            if(e.target.nodeName==="DIV" || e.target.nodeName==="P"){
                 oP.style.display="block";
            }else{
                 oP.style.display="none";
            }
        }
     </script>
     </body>
     </html>
    
  • 购物车点击版实例2

    • 需求:当点击div时,p显示,当移出div后,p隐藏,但是保证从div移出到p元素身上时,p不隐藏,从p上移出后,p隐藏;
    • 方法:1)用onclick和onmouseleave事件设置;2)用onclick和onmouseout事件设置,但是用onmouseout事件设置,会存在问题:当移出div到p元素身上后,p会隐藏;所以需要获取关联元素,阻断隐藏代码;
    • 知识点:onmouseout与onmouseleave的区别,以及关联元素的获取及阻断代码执行;
    • 代码:
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>购物车实例</title>
         <style>
             *{
                 margin: 0;
                 padding: 0;
             }
             .div1{
                 width: 200px;
                 height: 50px;
                 background-color: lightseagreen;
                 position: relative;
                 margin: 20px auto;
             }
             .div1 p{
                 width: 500px;
                 height: 300px;
                 position: absolute;
                 right: 0;
                 top: 50px;
                 background-color: lightpink;
                 display: none;
             }
         </style>
     </head>
     <body>
     <div class="div1">
         <p></p>
     </div>
     <script>
         //需求:当点div时,p显示,当移出div后,p隐藏,但是保证从div移出到p元素身上时,p不隐藏,从p上移出后,p隐藏;
         //方法1:用点击事件和onmouseleave事件设置
         var oDiv=document.getElementsByTagName("div")[0];
         var oP=document.getElementsByTagName("p")[0];
         oDiv.onclick=function () {
             oP.style.display="block";
         };
         //用onmouseleave设置,当移出div到p元素身上后,p不会隐藏;
         oDiv.onmouseleave=function () {
             oP.style.display="none";
         };
         //方法2:用onclick和onmouseout事件设置,但是用onmouseout事件设置,会存在问题:当移出div到p元素身上后,p会隐藏;所以需要获取关联元素,阻断隐藏代码;
         oDiv.onclick=function () {
             oP.style.display="block";
         };
         oDiv.onmouseout=function (e) {
             e=e||window.event;
             //获取关联元素,阻断隐藏代码执行;
             var omo=e.toElement || e.relatedTarget;
             if(this.contains(omo)) return;
             oP.style.display="none";
         }
     </script>
     </body>
     </html>
    

知识点扩充

  • 定位:
    • 页面结构中元素A包含着B元素,A为父级元素,B为子级元素,B相对于A定位
    • B的盒子模型是包含margin在内的大盒子,然后相对于A的边框内边缘定位,即若B的margin设置为0,并且定位中left也设置为0,则B的左边框外边缘与A的左边框内边缘贴合,当添加margin之后,二者之间会存在相应间隔;
    • 总结:子级元素盒子模型(包含margin)相对于定位父级的边框内边缘进行定位;

相关文章

网友评论

    本文标题:第九周第三天笔记

    本文链接:https://www.haomeiwen.com/subject/hgltoftx.html