CSS布局技巧

一、浮动布局

通过浮动布局可以使一个元素向其父元素的左侧或右侧浮动 使用float 属性来设置于元素的浮动可选值：none 默认值 元素不浮动，left 元素向左浮动，right 元素向右移动

注意： 元素设置浮动以后，水平布局的等式不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置所以元素下边的患者文档流中的元素会自动向上移动

二、定位

1. 相对定位 （position relative）

             特点：
                1.元素开启相对定位以后，如果不设置偏移量量，元素不会发生任何变化
                2.相对定位是参照于元素在文档流中的位置进行定位的
                    相对于之前的位置
                3.相对定位会提升元素的层级
                4.相对定位不会脱离文档流
                5.相对定位不会改变元素的性质 块还是块 行内还是行内
                6.原来位置还是被自己占据
                
   

2. 绝对定位（position absolute）

               -绝对定位的特点：
                1. 开启绝对定位后，如果不设置偏移量元素的位置不好发生变化
                2.开启绝定位后，元素会脱离文档流
                3. 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
                4.绝对定位会使元素提升一个层级
                5.绝对定位元素是相对于其包含块进行定位的
   
                包含块（ container block）
                    -正常情况下
                        包含块就是离当前元素最近的祖先块元素
                        <div> 
                            <div></div>
                        </div>
                    -绝对定位的包含块：
                        包含块就是离他最近的开启了定位祖先元素
                            如果所有的祖先元素都没有开启定位则根元素就是他的包含块
                    -html （根元素包含块）
   

3.固定定位（position fixed）

             -将元素的position属性设置为fixed 则开启了元素的固定定位
             -固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
                唯一不同的是固定定位永远参照于浏览器的视口进行定位
                固定不动

4.粘滞定位（position sticky）

         -当元素的positon属性设置为sticky时则开启了粘滞定位
         -粘滞定位于相对定位的特点基本一致，
         不同的是粘滞定位可以在元素到达某个位置时将其固定
         

三、弹性布局

 .container {

       display: flex;

       flex-direction: row; /* 或 column，控制主轴方向 */

       justify-content: space-between; /* 调整子项在主轴上的分布 */

       align-items: center; /* 调整子项在交叉轴上的对齐方式 */

     }

四、小米导航栏案例 利用flot 以及 flex布局

小米导航栏HTML结构
<!-- 顶部导航条外部容器 -->
    <div class="topbar-wrapper">
        <div class="topbar w">
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li class="line">|</li>
                <li><a class="app" href="javascript:;">
                        下载app
                        <!-- 添加弹出层 -->
                        <div class="qrcode">
                            <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
                            <span>小米商城app</span>
                        </div>

                    </a></li>
                <li class="line">|</li>
                <P class="clear"></P>
            </ul>
            <ul class="shop-cart">
                <li><a href="javascript:;">
                        <i class="fas fa-shopping-cart"></i>
                        购物车(0)
                        <div class="shop-goods">
                            <span>购物车中还没有商品，赶快选购吧！</span>
                        </div>
                    </a></li>
                <li class="line">|</li>
                <!-- <p class="clear"></p> -->  //清除浮动
            </ul>
        </div>
    </div>

小米导航栏css样式 运用浮动 以及 flex布局

/* 设置下载app的下拉 */
.app .qrcode{
    /* display: none; */
    position: absolute;
    left: -40px;
    width: 124px;

    height: 0px;
    overflow: hidden;

    /* margin-left: -40px; */
    background-color: #fff;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    /* transition: 用于为我们样式设置过度效果 */
    transition: height 0.3s;
}
.app{
    position: relative;
}
/* 设置app下的小三角 */
li:hover>.app::after{
    /* display: none; */
    content: '';
    /* display: block; */
    width: 0;
    height: 0;
    /* 设置绝对定位 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: #fff;
}

.user-info li{
    float: left;
}
.shop-cart li{
    float: left;
}