不得不吐槽一句，基础班天天摆盒子，各种magin，padding，搞得人快疯了，直到今天学到了flex，才知道原来学的基本白给！我星星你个大星星~不要介意，吐槽一下，但是知识嘛，本来就是从难到易的过程，刚开始要先接触，要了解，说白了就是一个过程，进入今天的主题吧，每日知识点回顾。

移动端和PC端的不同

移动端

手机屏幕小，网页宽度为100%，即适配手机屏幕的宽度

不需要考虑浏览器兼容问题，可放心使用css新特性

PC端

屏幕大，网页固定版心

浏览器多，需要考虑兼容性问题

视口

视口简单来说就是浏览器显示页面内容的屏幕区域。

分为布局视口视觉视口理想视口

达到理想视口的方法：使布局视口等于视觉视口

head里加入下面这行代码即可

备注：一般head里默认都会有这行代码只需检查有没有即可

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

二倍图（美工设计稿基本为750px 利用txcook软件修改为2x 缩小一半按提示单位开发即可）

简单来说，二倍图的存在是为了让页面中的图片更加清晰，实际开发中还有三倍甚至四倍图，但是目前市场二倍图居多

1>主轴对齐方式（红色标注为常用，其他相对较少使用）

2>侧轴对齐方式（align-items-xxxxx）

3>伸缩比（把父盒子分成若干份，每个盒子各占几份）

flex：1；一定记得给子盒子加，分配父级剩余的空间

左右两边盒子大小固定不变，中间宽度自适应

一般用于各种移动端顶部搜索部分

核心：两侧盒子宽高固定，中间盒子flex：1；占满剩余空间

注意：中间flex: 1; 和 width 有冲突。优先执行 flex：1；

今天内容相对单一，我只想说浮动再见吧，还是flex香一些！