Flex弹性布局

1. flex布局原理

1. 当父元素设为flex布局以后，子元素的float、clear、vertical-align属性失效。因为设为flex布局之后，具有float的性质，并且不用再清楚浮动
2. 通过给父盒子添加flex属性，控制子盒子的位置和排列方式。

1.1 父级属性

flex-direction 设置主轴方向（默认向右row reverse向左 column向下 column-reverse向上）

justify-content 设置主轴上的子元素排列方式 （默认是flex-start，左边对齐） 从尾巴排列（flex-end，右边对齐） 水平居中对齐（center） 平分剩余空间（space-around） 先两边对齐再平分中间空间（space-between）

flex-wrap 设置子元素是否换行 （默认 nowrap）不换行，会压缩原来元素的大小 wrap 另起一行

align-content 设置侧轴上的子元素摆列方式（多行）（单行）flex-start 从上到下 flex-end 从下到上 center 居中 stretch 拉伸（组合字不能给高度） 平分剩余空间（space-around） 先两边对齐再平分中间空间（space-between）

align-items 设置侧轴上的子元素摆列方式（单行）flex-start 从上到下 flex-end 从下到上 center 居中 stretch 拉伸（组合字不能给高度）
flex-flow 复合属性 合并了flex-direction和flex-wrap

父级属性上加上flex之后， 子元素就变成了行内块元素，具有宽高等属性

1.2 子级属性

flex 子项目占剩余空间的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后）

2. rem布局

页面布局文字能随着屏幕大小变化而变化
流式布局和flex布局针对于宽度布局，rem布局可以设置高度
屏幕发生变化的时候，元素的高度和宽度等比例缩放

2.1 rem与em

rem 是单位 相对于html元素的字体大小
em也是单位，em是相对于父元素字体大小来说的

rem修改html中的文字大小来控制页面中的元素大小

em 例子

        div{
            font-size: 12px;
        }
        p{
            width: 10em; /*10*12=120*/
            height: 10em;
            background-color: yellow;
        }

    <div>
        <p></p>
    </div>

rem例子

        html{
            font-size: 2px;
        }
        div{
            font-size: 12px;
        }
        p{
            width: 10rem; /* 2*10=20 */
            height: 10em;/* 12*10=120 */
            background-color: yellow;
        }

    <div>
        <p></p>
    </div>

2.2 媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式。
媒体查询语法

@media all|print|screen  and|only|or (with|max-width|min-width : 尺寸px){
	body{
		指定样式
	}
}

在屏幕上最大尺寸不超过800的时候背景色为pink
在屏幕上最大尺寸不超过500的时候背景色为black

@media screen and (max-width:800px) {
    body{
        background-color: pink;
    }
}
@media screen and (max-width:500px) {
    body{
        background-color: black;
    }
}

屏幕变色

        /* 
        媒体查询一般按照从大到小或者从小到大
        */
        @media screen and (max-width:539px) {
            body{
                background-color: blue;
            }
        }
        
        @media screen and (min-width:540px) and (max-width:969px){
            body{
                background-color: green;
            }
        }
        or
         @media screen and (min-width:540px) {
            body{
                background-color: green;
            }
        }
        
        @media screen and (min-width:970px) {
            body{
                background-color: red;
            }
        }

2.3 rem搭配媒体查询

        @media screen and (max-width: 320px) {
            html{
                font-style: 10px;
            }
        }
        @media screen and (min-width: 860px){
            html{
                font-size: 100px;
            }
        }

        div{
            height: 10rem;
            color: 0.6rem;
        }

2.4 媒体查询引入资源

针对于不同的屏幕尺寸调用不同的css文件

3. less

css的扩展语言，css的预处理器。

3.1 less使用：

1. 创建.less文件
2. less变量  以@为前缀  大小写敏感
 @变量名：值；
 3. 调用： @变量名
 4. 编译： 安装easyless插件 每次保存文件就会自动生成对应的css文件，导入对应的html文件中就能插入样式

@bcolor: pink;
@fcolor: red;
@fs: 16px;
@as: 14px;
html{
    background-color: @bcolor;
}
div{
    color: @fcolor;
    font-size: @fs;
}
a{
    font-size: @as;
}

3.2 less嵌套：

子元素的样式直接写到父元素中

    <div>
        <p class="inner"></p>
        <a href="">okkk</a>
    </div>

div{
    width: 800px;
    height: 400px;
    background-color: bisque;
    .inner{
        color: aqua;
    }
    a{
        color: #ccc;
        /*伪类选择器 伪元素选择器 交集选择器 都要加上&*/
        &:hover{
            color: red;
        }
        
    }

    &::after{
        content: 'ccc';
        display: block;
        width: 50px;
        height: 50px;
        background-color: pink;
    
    }
    &:hover{
        color: purple;
    }
}

2.3 less中可以进行运算

运算符与变量或者常量要空格隔开
两个数参与计算 其中一个值带单位，就以这个单位为主
两个数都带单位，就以第一个单位为主

2.4 适配方案

rem+媒体查询+less技术

rem实际开发适配方案—等比例缩放

        @media screen and (max-width:320px) {
            html{
                font-size: 21.33px;
            }
        }
        @media screen and (min-width:750px) {
            html{
                font-size: 50px;
                /*750/15=50  750是屏幕宽度 15 是将屏幕分成15分 最后每一份都是50px*/
            }
        }
        div{
            width: 2rem;
            height: 2rem;
            background-color: aqua;
        }

元素大小rem计算

1. 假定以750px为屏幕宽度
2. 设定平分划分的份数 得到了html中的字体大小 屏幕宽度/份数
3. 页面元素的rem值= 页面元素大小/（屏幕宽度/份数）

3.响应式布局

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>

        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 750px;
            margin: 0 auto;
        }
        .container ul li {
            float: left;
            list-style: none;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }
        @media screen and (max-width: 768px) {
            .container{
                width: 100%;
            }
            .container ul li{
                width: 33.33%;
            }
        }

4.响应式布局

rem是针对浏览器整体
栅格是针对主题元素

5vh,vw

相对单位
相对于视口的寸尺计算结果
vw viewport width 1vw= 1/100 * 视口宽度 eg 400px的宽度 1vw=4px
vh viewport height
开发中vw和vh不会混用。 常用vw，关注宽度的变化

vw和vmin
vmin可以照顾手机横屏和竖屏状况
vmin和vmax是当下屏幕的宽度和高度中的最大值或者最小值有关。