<meta-name="viemport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,use-scalable=no">针对还没有开发的网页，写在head里面，对已经开发好的网页没有效果。
vertical-align:top 顶端对齐
vertical-align:bottom 底端对齐
vertical-align:baseline 默认情况下基线对齐
渐进增强：先满足网站的基本要求，（搭建网站是否保证基本功能），再根据高版本浏览器进行修改，交互等性能的改进。
优雅降级：一开始就把网站的功能全部实现，再根据低版本浏览器进行兼容。
flex 布局：又叫“弹性布局”为盒状模型。提供最大的灵活型，每一个容器都可以指定为flex布局。
{display:flex}
行内元素 {display:inline-flex}
flex
以下6各属性写在容器上面：
1 . flex-direction:row 默认值 主轴为水平方向，起点在左端
flex-direction:row-reverset 主轴为水平方向，起点在右端
flex-direction:column 主轴垂直方向，起点在上沿
flex-direction:column-reverset 主轴为垂直方向，起点在下沿
2 . flex -wrap 默认情况下，项目排成一条线（双轴线）如果一条线排不下，换行。
flex-wrap:nowrap 默认 不换行
flex-wrap:wrap 换行 第一行在上方
flex-wrap:warp-reverse 换行 第一i行在下方
3 . flex -flow 默认值 ：row nowrap
flex -flow :flex-direction
flex -flow :flex-wrap
4. justify-content 属性定义了项目在主轴上对齐
justify-content ：flex-start 默认值 左 对齐
justify-content ：flex-end 右对齐
justify-content ：center 居中
justify-content ：space-betwen 两端对齐 项目之间间隔相等
justify-content ：space-around 每个项目两侧间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍
5 align-tems 属性 定义项目在叉轴上如何对齐。
align-tems：flex-start 交叉轴的起点对齐
align-tems：flex-end 交叉轴的终点对齐
align-tems：center 交叉轴的中点对齐
align-tems：baseline项目第一行的基线对齐 一般用于杂志 排版
align-tems：stretch 默认值 如果项目未设置高度或设为 auto ,将占满整个容器的高度。
6 . align-content 属性：多行多轴 不常用，用的几率很小
以下6个是项目的属性：
1 order 定义了项目的排列顺序，数值越小，排列越靠前，默认为0
2 flex-grow ：定义了项目的放大比例，默认为0 .如果存在剩余空间，也不放大。
如果所有项目的flex-grow的属性都为1，则它们等分剩余空间（如果有的话），如果一个 项目的flex-grow属性都为2，其他项目都为1，则前者占数据剩余空间将比其他项多一倍。
（注：当项目的宽度大于容器的宽度时，项目不会放大。只有容器的宽度大于项目的宽度，就是告诉浏览器 当前我这个浏览器把父级所有剩余的空间填满） （1倍 1.5 倍....）
3 flex-shrink :缩小比例，默认为1，如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都等比例缩小，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效。
4 flex-basis 属性 ：定义在分配多余空间之前，项目占据主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto,即项目本来的大小。
5 flex 属性flex-grow , flex-shrink ,flex-basis的简写 ，默认值为0 1 auto
6 align-self ：允许单个项目与其他不一样的对齐方式，可覆盖align-items 默认值为auto 表继录align-items属性，如果没有父元素，stretch: flex-start flex-end
BFC: 块级格式上下文
block:块级元素
FC：formatting Context
定义：页面中css渲染的一个部分（区域）主要用于“决定”盒子的布局以及浮动的（相互影响的范围）的一个区域。
适用范围：只应用于BFC的子级元素，对产生BFC的元素不适用。
注：BFC 之间不影响。
如何触发BFC：
1 根元素
2 float 值不为none
3 position值为absolute和fixed
4 display:inline-block
display:table-cell
display:flex
display:inline-flex
display:table-caption
5 overflow 不为 visiable
触发BFC后，BFC的布局规则：
1 内部的块级元素在垂直方向上，一个接一个的排列；
2 块级元素垂直方向上的Margin合并（重叠）取最大值（注：同一个BFC）
3 计算BFC的高度时候，浮动元素也要参与计算；
4 BFC的区域不会与float重叠
5 每个元素的Margin 盒子左边，与包含快的boeder box 的左边挨着 （接触），浮动元素也是如此。
6 BFC（它是一个独立区域（容器）），容器里的子元素不管如何浮动的布局（排版）都不会影响容器外元素的布局。
这些都是我的一些课堂笔记,不是很全面。如果大家要看全面，可以在网上搜 ：“阮一峰”
谢谢观看！ 再见！
