今天完成的事情，任务五模拟下拉框布局完成，对css选择器进行规范命名，内容部分，做到一半。

css部分代码

.button{

    display: flex;

    margin: 0;

    height: 59px;

    align-items: center;

    border-bottom: 1px solid #dddddd;

    background-color: #FFFFFF;

}

.dropdown {

    width: 33vw;

    position: relative;

    display: inline-block;

    text-align: center;

    height: 40px;

    line-height: 40px;

    background-position: 92%

}    

   遇到的问题1，完全看不懂模拟下拉框的代码，就不知道是干什么的。解决方法，看了菜鸟教程，自己尝试去抄下去，在浏览器里面不断去调试，他到底是做什么的。

   遇到的问题2，三个模拟下拉框改变位置之后，页面直接炸了，用flax也无法去解决布局问题，后面师兄发现我写的代码有问题，他自己都不知道我在写什么。解决方法，还是对布局不太理解，把三个盒子放进一个div里面，在父级div里面设置就就可以了。

  遇到的问题3，模拟下拉框的代码，css部分看不懂，为什么可以这样去写，之前div div写习惯了，总是写无数个小盒子，然后去margin，padding。一个div一个选择器，很难去理解这种方式，解决方法，通过写模拟下拉框，理解了为什么要这么去写。一个div里面可以有n个选择器。

  代码如下

<div>

    <div class="button">

        <div class="dropdown">

            <div class="photo"><img src="image/task06two.png"></div>

            <button class="dropbtn">所在地</button>

            <div class="dropdown-content">

                <a>郑州</a>

                <a>上海</a>

                <a>云南</a>

            </div>

            <div class="nabla"></div>

        </div>

     收获1，对css里面的选择器进行命名，收获2，了解了关于父级元素里面的一些基础常识问题。对布局加深理解，布局就是一行一行的去布，不是去造无数个小盒子，不断margin。

     总结，对css的理解还是太少了，基础差，就完全想象不到这个可以这么写，这么去做。

     明天计划，慢慢去做任务5，把之前欠下来的基础知识，部分补上来。