1.关于调整元素位置的问题（寻找最优办法，避免布局混乱）

（1）自定义调整元素位置 

           a.调整网页中的某个“板块”或者说大区域型盒子

                比如最上方的头部板块、中间的内容板块、最下方的底部板块（当然可以自己再细分），因为板块与板块之间一般宽度是相同的，且100%占据显示页面。将定位（Position）设置为relative相对定位，margin设置为0，auto，它不会脱离文档流，板块与板块之间就会上下相接，如果想让它们之间有距离，可以增加上下外边框，或者用定位修改。

            b.调整父级盒子内部子盒子的位置

                   最优的办法，是把子盒子的定位设置为absoult绝对定位，这样它就可以根据父级盒子（父级盒子的定位必须设置且不为static）来进行定位。

            c.通过外边距margin来调整元素的位置

                    如果是同类型的盒子，例如连续多个的<li><a>等标签，可以通过margin来调整他们之间的相对位置。但如果是不同类型的盒子，甚至他们大小样式都不同，那就非常非常非常不建议通过调整外边距来调整元素位置，因为这样操作，很容易导致后期的布局混乱，甚至会出现盒子塌陷问题。

            d.外边距magin与内边距padding合适的使用方法

                      内边距一般用于大盒子，用来“压缩”盒子内部可填充的空间，调整父级盒子。外边距一般用于小盒子

    （2）元素居中问题

               a.元素居中的方法、注意事项及最优适用场景

                        Ⅰ.margin:0 auto；

                                    该方法是通过auto自动调整元素相对于父级元素（没有手动设置父级，那就是body）的左右外边距，让左右外边距始终相等来实现元素居中。

                                    适用场景：网页板块盒子、顶部导航、填充板块内容的大盒子等等，使用该方法最为合适。

                                    注意事项：

                                                1.盒子宽度不能为100%或auto或特别大，比如999999px。

                                                2.如果要对盒子进行定位，不能使用绝对定位absoult。

                       Ⅱ.文字居中

                                    该方法通过text-align和line-height=盒子高度，来使文字水平和垂直居中。

                                     适用场景：文本内容居中

                       Ⅲ.绝对定位居中

                                     { position: absolute;

                                       left: 50%;

                                       top: 50%;

                                       transform: translate(-50%, -50%);}

                                    该方法原理：当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

                                    适用场景：让盒子内部元素居中，经常用于图片等

                        Ⅳ.利用flex布局居中

                                    {display:flex; 

                                    align-items: center（垂直居中）;

                                    justify-content: center（水平居中）;}

2.关于css轮播图的流程和注意事项。

      这个轮播图的实现方法在网上的视频博客有很多，我看了很多，但我觉得很多文章的轮播图写得很冗余，所以我精简了一下。

    主要流程

                Ⅰ.创建两个父子盒子。一般就是一个div盒子，一个ul盒子。div盒子要overflow:hidden。

                注意：div盒子的大小是一张图片的大小，而ul盒子的宽度是所有图片宽度加起来的大小。

                Ⅱ.一般用li,让图片左浮动排成一行。

                Ⅲ.给ul盒子设置属性animation: 名字 总时间 滚动方式 infinite;

                Ⅳ.通过@keyframes 名字{}，translateX向左移动ul盒子，来实现图片的轮播。

    这样就实现了图片的轮播，但如果想要手动让它轮播呢，就是点击单选按钮radio来选择播放哪张图片该如何实现？

    其实如果玩明白自动播放轮播的话，其实原理就一点改变ul在X轴的位置。

    既然如此，那通过点击单选按钮radio来控制ul偏移量就可以实现了。

    放张图吧。

    

    看起来还是比较好理解的吧。很多效果只要知道其中原理还是可以玩出花的，想怎么玩怎么玩。

    所以，如果想要实现图片两端有两个箭头，点击箭头就可以实现轮播图切换，也是可行的，用label标签设置好样式成箭头，和input按钮绑定，来移动ul的x坐标即可。

3.下拉窗的两种实现方法和视觉优化

    准备工作：    

            HTML：在对应元素的位置后面，创建下拉窗盒子，在盒子内部填充需要的内容。

            CSS:一般将定位position改为relative。因为下拉窗盒子结构上写在需要触摸的盒子后面，一般情况会相离得最近。再通过定位调整位置。

    方法一：

            将下拉窗盒子的display属性设置为none。只有当hover时，display:block。

            优点：操作简单，没有坑点。

            缺点：视觉上没有过渡效果。

    方法二：

            将下拉窗盒子的width和height或二者其中之一，看自己需要，设置为0。hover是将宽度和高度改为正常值。增加过渡属性transition:all 过渡时间;

            注意事项：宽度和高度必须设置，且不能设置为100%或auto。

4.关于组合选择符的运用。

        （1）后代选择器“ ”

                    其实就是空格，能选择到上一级元素的后代。

        （2）子代选择器“>”

                    只能选择到上一级元素的直接子元素（只能选儿子，不能是孙子）。

          (3)相邻兄弟选择器“+”

                    只能选择到与上一级元素紧邻的平级元素。   

         （4）后续兄弟选择器（通用兄弟选择器）“~”

                   能选择到与上一级元素后面的所有指定类型的元素。

        通过选用合适的选择器，对进行非js的鼠标监听有着很大的帮助。但在使用之前，一定要想好准备选择哪个选择器，然后再确定元素与元素之间的结构关系。

5.关于样式设置后，但不起作用的问题

       在写代码的时候，经常会遇到样式明明设置了，但是就是不起作用的情况，接下来我说说我所遇到的几种情况。

  （1）检查类名是否正确或是否出现类名重复的情况

            代码写的太多了，眼睛可能比较累，有时候类名相差一两个字母不同，结果样式一直设置不好，这种情况出现次数很多很多，所以首先检查类名。

            有时候起名字会起重复，也会导致样式失效的情况。前端好像没有教过命名法，不过命名法这东西日常也能学到。一般就是先将网页划成几个板块（头部-header，底部-bottom，中间几个板块-section-XXX），每个板块用一个超大盒子包裹（div或者section），然后板块内部的盒子用"-"连接。比如，游戏中心板块的左侧轮播图盒子-"center-left-tv"，我相信大部分同学都会，但是容易偷懒，不要偷懒，不然后面会写得很乱，瞻前顾后。

   （2）检查样式是否被覆盖

                css具有就近原则得特性，可能是后面设置得属性，将想要设置得属性覆盖，我们可以在网页”检查“中检查属性是否被划掉。或者说，某些情况下，不允许设置这样的属性。就比如，在position为static或者没有设置的情况下，是不允许用top等等来调整位置的。类似这样的问题还有很多，而且有些样式失效问题也比较复杂，需要具体问题具体分析，但也归于这一类问题，时间原因，就不再一一说明。

6.查看学习源代码的问题

        刚开始看官网源代码一定是感觉一团糟看不懂，但是看源代码确实能学到很多很多东西，而且速度比视频快很多。

        首先解决感觉一团糟，根本不知从何看起，看不下去的问题。关于这个问题，其实官网写的大体结构都是相似或者说基本相同的。分为头部，内容板块（内容板块细分游戏新闻、游戏攻略等等），底部。写网页时，可以先ctrl+shift+c来选择自己需要的某个大板块，观察他是如何布局的，什么时候用什么标签，一个板块一个板块来，最后写完再回顾一下自己写的结构。

        第二个问题就是，啊，其实感觉没问题了。只要能看的下去源码，耐着性子哈，剩下的就是经验和直觉的问题了。看的多了写的多了，自然而然就看源码很熟练，很多具体的问题不能说迎刃而解，而是大部分问题都能独立思考并解决。

        有些东西感觉挺难说出来的，反正就是做起来挺好的，所以如果有具体问题可以私信询问。

好像还有个问题，但我一时想不起来了，等想起来了，下次再说吧。如果觉得这篇文章对您有用的话可以点个赞哦，谢谢！

   如果文章某处有谬误，请立即指正，以免误人子弟。