后端程序员的前端速成经验分享

		作为一个java后端程序员，对于前端的一些知识是必不可少的，比如html，css，js三大件。
        现对前端基础知识做一个学习总结，掌握了这些知识，一个后端开发人员也可以不用模板独立完成开发。
       
        前端三大件里面html和js相对来说都比较简单，这两种知识都是比较固定的，不用全部掌握
        需要用到的时候，查询就可以了，而css相对三者中是较难的，页面布局和效果都要用css完成
        虽然css完成一个页面效果方式是多样的，但其实也是有套路可循的。

        东西不多，多了看着头疼，只把一些心得套路总结一下，至于细节也是可以通过很多网站查询。

        总结分为两大模块，分别是：布局、效果。

        布局方面，比较常用的让几个块元素横过来，会用到浮动，据说浮动兼容性比较好，但我不喜欢用
        ，因为会有高度塌陷的问题，解决这个问题方法很简单，添加after伪类，具体的百度，因为我也忘了
        我一般用flex弹性盒子 display: flex; 这个也是让几个块元素横过来，但是相对于浮动就太好用了，
        不用担心脱离文档流带来的高度塌陷问题，而且最关键的是弹性盒子有几个css属性来很好的帮组布局，
        比如：

        flex-direction: column; 主轴是竖着的，（默认是横着的）
        flex-wrap: wrap;自动换行
        justify-content: flex-start;元素沿着主轴起边排列
        justify-content: flex-end; 元素沿着主轴终边排列
        justify-content: center; 元素沿着主轴居中排列
        justify-content: space-around; 将主轴空白区域平均分配给元素2侧
        justify-content: space-evenly;将主轴空白区域平均分配给元素单侧 兼容性不太好
        justify-content: space-between; 将主轴空白区域分配到两个元素之间**

        主轴的意思是：弹性盒布局的方向，如果是把几个块元素横过来，那主轴就是横着的，
        相反，如果是把几个块元素或者行内元素竖着排列，那主轴就是竖着的，主轴的概念很重要
        弄清楚了才能利用弹性盒的各种属性布局，比如：我现在要把几个块元素横过来，我用display: flex;
        开启了弹性盒，然后我想让这些块元素紧靠着左右两端在页面均匀分布，我可以用 justify-content: space-between;完成
        需要注意的是justify-content是相对于主轴的，如果主轴不是横着的而是竖着的，那么justify-content: space-between
        会紧靠上下两端，将整个元素的高度均匀分布。

        
        align-items: stretch; 将元素的高度设置成相同的值 
        align-items: flex-start ;元素不会拉伸，沿着辅轴起边对齐 
        align-items: flex-end; 元素不会拉伸，沿着辅轴终边对齐 
        align-items: center; 沿着辅轴居中对齐 
        align-items: baseline; 沿着基线对齐，用得不多 

        辅轴的意思是：相对于主轴另一个方向就是辅轴，比如主轴是横着的，那么辅轴就是竖着的，反之亦然

        上面那么多属性，其实个人认为最常用的就6个而已，很好记忆：
        justify-content: space-around;将主轴空白区域平均分配给元素2侧
        justify-content: space-between;将主轴空白区域分配到两个元素之间
        justify-content: center;元素沿着主轴居中排列
        flex-wrap: wrap;自动换行
        flex-direction: column;让主轴竖着，（不指定，则默认是横着的）
        align-items: center;沿着辅轴居中对齐 
        就这几个谁用谁知道，非常好用。
        
        让一个元素在容器里垂直水平居中的方法
        justify-content: center;
        align-items: center; 
        以上属性，不要犹豫，立刻马上去实际体验一下什么效果，才能帮助加深记忆，只要灵活运用，页面布局就简单了

        再说说定位，先说特点：
        相对定位特点：
        1、相对的原点是元素自身原本的位置
        2、开启相对定位不会改变元素的性质，不会脱离文档流，元素以前的位置任然独占一行
        3、开启相对定位后，如果不设置偏移量，那么元素不会有任何的变化
        4、开启相对定位后，元素的层级会提升一个层次
        绝对定位特点：
        1、开启绝对定位后，元素会脱离文档流
        2、开启绝对定位后，会改变元素的性质，行内元素会变成块元素
        3、开启绝对定位后，元素的层级会提升一个层次
        4、开启绝对定位后，参照的原点是元素第一个开启了定位的包含块祖先
        5、不设置偏移量，那么元素不会有任何的变化
        固定定位特点：
        固定定位大部分性质和绝对定位相同，唯一不同之处在于，固定定位是相对于浏览器的视口，而不是相对于
        开启了定位的包含块元素，不会随着浏览器滚动条的滚动而改变位置
        粘滞定位特点：
        特性基本和相对定位相同，不同点在于可以通过设置粘滞定位让元素固定在某个位置

        如果你要微调某个元素的位置，可以开启 position: relative;相对定位，通过left，top，right，bottom
        去调整，开启相对定位的元素，随便你怎么移动，都不会对页面其他元素产生影响，用来微调最为合适。

        如果要做下拉层，可以开启position: absolute;绝对定位，绝对定位开启后，元素就飘起来了，不占任何位置
        最适合用来做没有事件触发时需要隐藏的下拉层，下拉层需要盖住其他元素显示，可以设置优先级z-index: 级别;
        级别是任意指定的数字，哪个元素的z-index级别高，该元素就在最上面，因为下拉层显示的时候不能对页面元素有影响，
        不显示的时候又不能占一个位置，所以需要开启绝对定位。
        开启绝对定位后也是通过left，top，right，bottom这几个属性定位，但是它与相对定位不同的是，相对定位直接从原点
        开始移动，而绝对定位是相对于它的开启了相对定位的包含块进行移动，如果它的包含块没有开启相对定位，则会相对于它包含块
        的上级开启了相对定位的包含块进行移动，如果都没有开启，则相对于html根元素进行移动，举个例子：
        <div class="box1">
            <div class="box2">
                
            </div>
        </div>
        这里box2开启了绝对定位，如果box1开启了相对定位，就相对于box1进行移动，如果box1没有开启相对定位，
        box2就相对于更上层开启了相对定位的父元素或者html根元素移动

        总结：相对定位的作用：1、用来做微调  2、给开启绝对定位的元素做参照物。
             绝对定位的作用：1、给不能占位置的元素开启 比如：下拉层 2、某个子元素需要参照父元素定位时（严格来说不是父元素，而是包含块）
        
            以上的弹性盒子和各种定位，只要灵活运用，布局完全没有问题

            码字比写代码还累，效果部分，等一段时间再写吧 。。。。。。