CSS布局

1、布局
1) 默认文档流

1. 元素在网页中显示的顺序与元素在代码中出现的顺序一致
2. 块级元素独占一行空间
3. 行内元素与其他元素共享一行空间

2) 改变默认布局

1. float：left/right
   浮动布局，采用浮动布局的元素会向左或者向右移动
   注意：

   1、元素使用了浮动之后，会脱离文档流,从左向右排列，当前行宽度不够会自动换行
   2、使用了浮动之后的元素，宽高由内容决定
   3、元素在网页中原本的位置会被其他块级元素替代
   4、使用了浮动之后的元素，其父元素的高度由于失去了支撑，所以变为0
   

清除浮动的方式:

1. 
    浮动元素的父元素::after {
        clear:both;
        content:'';
        display:block;
    }
2. 
    浮动元素的父元素 {
        overflow:hidden;
    }
3. 
    浮动元素的兄弟元素 {
        clear:both;
        content:'';
    }

2、定位布局

position
用途： 一个元素悬挂在另一个元素之上的时候，一般使用定位布局
案例： 模态框、二级下拉框
特点：
    1) 可以使用left、right、top、bottom来描述元素的位置
    2) 存在z-index
    3) 是否脱离文档流
    4) 参考点
属性：
    static  静态布局【默认值】
    relative    相对定位
        1) 不脱离文档流
        2) 相对于当前元素在网页中原本的位置

    absolute    绝对定位
        1) 脱离文档流
        2) 相对于当前元素的父定位元素，如果父级元素没有定位元素，则相对于浏览器视口
    fixed       固定定位
        1) 脱离文档流
        2) 相对于浏览器的视口
    sticky      粘滞布局  
        1) 不脱离文档流
        2) relative与fixed结合
            position:sticky;
            top:50px;
            当当前元素距离浏览器视口上方50px的时候，会体现fixed的特点
    添加浮动时，脱离文档流

3.伸缩盒布局

1) 作用：将子元素在父元素中列/行排布，与float的用法类似。一般用于响应式布局(手机app)
2) 属性：
    display:flex;   将当前盒子设置为伸缩盒
    flex-direction  设置伸缩盒的主轴
        column  行布局
        row     列布局
    flex-wrap   当子元素的宽或者高超出父元素主轴方向的宽或者高时，设置换行
        wrap    超出时换行
        nowrap  超出时不换行 【默认值】
    flex    速写
        flex-grow   指定了flex容器中剩余空间的多少应该分配给项目
        flex-shrink 指定了 flex 元素的收缩规则
        flex-basis  指定了 flex 元素在主轴方向上的初始大小

    align-items 交叉轴上对齐方式
        center  在交叉轴的中间显示
        stretch 在交叉轴上拉伸
        flex-start  【默认值】在交叉轴的开始显示
        flex-end    在交叉轴的结束显示

    justify-content 主轴上的对齐方式
        center  在主轴的中间显示
        flex-start  【默认值】在主轴的开始显示
        flex-end    在主轴的结束显示
3) 注意：
    1. 父元素在主轴方向上一定要有固定的宽/高，供子元素分配
    2. 子元素在交叉轴上默认的宽/高会占满父元素
        如果交叉轴为x轴，子元素默认的高会占满父元素
        如果交叉轴为y轴，子元素默认的宽会占满父元素
        
        

4、如何让元素在网页中自适应水平居中？

margin:0 auto;【只对块级元素生效】
1) 块级元素
    1. 设置宽度
    2. 设置margin:0 auto;
2) 行内元素
    1. 设置为块级元素
    2. 设置宽度
    3. 设置margin:0 auto;
3) 行内块元素
    input
    1. 设置为块级元素
    2. 可以不设置宽度
    3. 设置margin:0 auto;

5.子元素在父元素中水平垂直居中

方法一：
    父元素设置相对定位
        position:relative;
    子元素设置绝对定位
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        margin:auto;
方法二：
    父元素设置相对定位
        position:relative;
    子元素设置绝对定位
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-当前子元素宽度的一半;
        margin-top:-当前子元素高度的一半;
方法三：
    display：table-cell;
方法四：伸缩盒布局

6.子元素距离上方有10px的边距，同时不影响父元素

1. 子元素设置相对定位
    position: relative;
    top: 100px;
2. 父元素设置为边框盒子，再设置上内边距
    box-sizing:border-box;
    padding-top:100px;
3. 父元素设置相对定位，子元素设置绝对定位
    子元素top:100px;
4. 子元素浮动
    float:left;
    margin-top:100px;       
    

width:calc(100% - 400px); 宽度自适应