前端重点与犯错总结


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

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


文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 瑾年 !
评论
  目录