前端重点与犯错总结


如有错误,各位大佬帮忙在评论区指正,感谢~~~

TIPS

一定一定要看最新的视频教程,否则等于白学!

1-遇到问题不要像无头苍蝇,找个前辈请教往往事半功倍。

2-一定要自己独立完成每一个项目和案例,看懂和会做之间有一道鸿沟

3-先看完教程,再自己独立完成,写不出来,再吸取经验。

H5和C3

1-没有理解align-self和align-items的区别

这个css一般只有flex布局后才有。

align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。(对齐弹性的各项元素)

align-self:align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。(对齐弹性对象元素内的某个

https://www.jianshu.com/p/430097e8cabd

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            display: flex;
            width:500px;
            height:200px;
            background-color: skyblue;
          
        }
        .r{
            display: flex;
            width:100px;
            height:100px;
            background-color: red;
            align-self: center;
            
        }
        .l{
            width:100px;
            height:100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="r">
            <p>hah</p>
            <p>cc</p>
        </div>
        <div class="l">l</div>
    </div>
</body>
</html>

263

总结:

简单来说,align-self是写给盒子自己的,当前盒子在父级大盒子中受到align-self的属性值影响。

align-items是写给盒子内部元素的,此盒子内部所有元素,受到align-items的属性值影响。

2-胡乱添加padding和margin

学完margin和padiding一看到空隙就加这两个,其实文字空隙等加个行高就能解决,还有一些盒子,加align-items:center也能解决,或者超链接下划线下移,给a加一个高度即可。

3-space-around等无效

给内容加这个,必须内容的父级有宽度,否则无法计算,就无法生效。

4-flex布局后,行内元素还是无法设置大小,还是得手动转行内块才可以。

305

如上图,flex生效的ul里面的li,超链接a归li管,li并没有flex。

5-对:last-child和:first-child与:nth-child()的认识不足

上述的选择器,如p:first-child的意思是:要p标签在父级标签中的第一个元素是p才会生效,不是说在父级元素中的第一个p生效。

cuowu1

6-单标签斜杠书写错误

原先以为是</hr>其实是<hr/>
斜杠是写在后面的,因为要闭口
不想双标签,是写在前面如:
<div>
</div>

7-作用域问题

电梯导航案例

犯错:js事件不生效

原因:找类选择器需要加点,但是增加删除classList的类名不需要加点。

犯错:for循环中i没有用let i =0 声明,而是直接写i = 0,导致有作用域链的问题,从而后面的content[i]无法识别。

在js中,如果某个变量没有var声明,会自动移到上一层作用域中去找这个变量的声明语句,如果找到,就是用,如果没找到,就继续向上寻找,一直查找到全局作用域为止,如果全局中仍然没有这个变量的声明语句,那么自动在全局作用域进行声明,这个就是js中的作用域链,也叫变量提升

因为我这里直接写i=0,上面也没有其他的声明i,所以默认也是全局作用域了

734

735

所谓的变量提升(Hoisting)就是:在任何作用域中使用var声明的变量,都会被提升到其作用域最顶部,也就 是说该变量的作用域相当于其函数或者全局,但是其赋值操作还是在原先的位置

但var是函数作用域,如下。

736

所以原因是:i=0,通过作用域链变成了全局变量,点击事件是我们主动去触发的,但是循环是一直在运行的,我们点击之前,循环体早已经执行完。因为var的作用域是全局,所以i恒等于最后执行的那一个值。

这是一个同步和异步的问题,并不是绑定事件的时候通过循环i的不同值就绑定好了,那个绑定事件当我们点击触发的时候,还是会去找i

解决方法:let=0即可

727

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .aside {
            position: fixed;
            width: 150px;
            /* 固定定位的top等是以浏览器窗口为参照物 */
            top: 50%;
            /* translate是以自身为参照物 */
            transform: translateY(-50%);
            text-align: center;
            line-height: 40px;
        }

        li {
            list-style: none;
            height: 40px;
            width: 100px;
            cursor: pointer;
        }

        .content {
            width: 500px;
            min-height: 1500px;
            margin: 0px 430px;
        }

        .content div {
            width: 500px;
            height: 300px;
            background-color: pink;
            margin-top: 20px;
        }

        .active {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="content">
        <div>男装</div>
        <div>女装</div>
        <div>电子产品</div>
        <div>美食</div>
    </div>
    <div class="aside">
        <ul>
            <li class="active">男装</li>
            <li>女装</li>
            <li>电子产品</li>
            <li>美食</li>
        </ul>
    </div>
    <script>
        let contents = document.querySelectorAll('.content div')
        let lis = document.querySelectorAll('li')
        // console.log(lis)
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                // 可以用排他原则,但是我设置了默认active,可以用以下语句更简单
                document.querySelector('.active').classList.remove('active')
                this.classList.add('active')
                console.log(contents[i])
                document.documentElement.scrollTop = contents[i].offsetTop

            })
        }
    </script>
</body>

</html>

文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 周东奇 !
免责声明: 本站所发布的一切内容,包括但不限于IT技术资源,网络攻防教程及相应程序等文章仅限用于学习和研究目的:不得将上述内容用于商业或者非法用途,否则一切后果请用户自负。本站部分信息与工具来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如有侵权请邮件(jinnian770@gmail.com)与我们联系处理。
  目录