css简单的回顾

一、flex简单的使用

1.flex主轴的切换属性： flex-direction

2.flex布局下元素是默认在一行显示的，需要元素换行就需要flex-wrap属性，在一行装不下的时候就元素就会自动的换行。

3.管理多行元素的排列方式：align-content

二、

三倍图简单的使用：

1. background: url(图片路径) no-repeat 图片背景定位；

background-size 加上背景缩放 ，x轴或者y轴总有一个是需要进行auto的，这样才能是的背景图片可以正常的显示。

三、媒体查询

一、rem(默认情况下需要使用元素的宽高来除以37.5rem来得到元素对应的rem宽高)

1、rem，通过 @media 属性来检测屏幕的宽度，从而改变元素对应的宽高。

2、1rem=1html的字体大小，一般浏览器默认的字体大小的16px。

3、语法：

 @media (width:375px){
            body{
                background-color: aqua;
            }
        }

4、同时也可以通过flexble.js文件来自动检测屏幕的宽度，同时自动改变html的字体大小，来实现在不同屏幕大小的设备下使得元素展现出不同的宽高。

二、

vw单位：

1、1vw=1/100的屏幕大小（默认情况下需要使用元素的宽高来除以3.75rem来得到元素对应的vw宽高）

2、语法：

 @media (max-width:800px) {
            .box>div:nth-child(1){
                display: none;
            }
        }

3、通过 @media 属性来检测屏幕的宽度，从而改变元素对应的宽高。

4、不需要利用其他的操作来检测屏幕宽度，只需要利用vw或者vh单位即可。