这是我参与【第五届青训营】伴学笔记活动的第一天
1.flex flex: 1 flex-grow:1
flex:100px flex-basis:100px
flex: 2 1 flex-grow:2;flex-shrink:1
flex:1 100px flex-grow:1;flex-basis:100px
flex: 2 0 100px flex-grow:2;flex-shrink:0;flex-basis:100px
flex: auto flex: 1 1 auto
flex: none flex: 0 0 auto
2.Flexibility 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度
3.块级排版上下文
Block Formatting Context (BFC)
某些容器会创建一个BFC
根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overtlow值不是visible 的块盒
display: flow-root;
4.行级排版上下文
Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
·盒子在一行内水平摆放
·一行放不下时，换行显示
·text-align决定一行内盒子的水平对齐
·vertical-align决定一个盒子在行内的垂直对齐
·避开浮动(float)元素*
5.display属性
block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略
6.直接组合 AB 满足A同时满足B input:focus
后代组合 AB 选中B，如果它是A的子孙 nav a
亲子组合 A>B 选中B，如果它是A的子元素 section>p
兄弟选择器AB 选中B，如果它在A后且和A同级 h2p
相邻选择器 A+B 选中B，如果它紧跟在A后面 h2 + p
7.border
三种属性
border-width
border-style
border-color
四个方向
border-top
boder-right
border-bottom
border-left
8.通用字体族
Serif衬线体 Georgia宋体
Sans-Serif无衬线体 Arial、Helvetica、黑体、微软雅黑
Cursive手写体 Caflisch Script、楷体
Fantasy Comic Sans MS, Papyrus,
Monospace 等宽字体 Consolas、Courier、中文字体
