Web前端第三章（清华 2019.2.18）

Float 父元素围住浮动的子元素
1. 父元素设置为overflow
2. 父元素也浮动
3. 添加一个空的 末元素 clear-both
4. clearfix规则:

.clearfix::after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

布局：
微博：左中右三栏 固定宽度
div:overflow
p1 p2 p3:float-left
Google drive:左中右 中栏自适应
div:overflow
p1 p3 p2: p1 float-left p2 float-right
p3:magin-left magin-right width:auto

定位:
Relative 层级高于static
Z-index
Absolute 类似于float 脱离div
位置相对于父元素的定位元素位置若都为static 则相对于坐上开始
Fixed 类似于absolute 但是相对于浏览器适口 滚动保持不动

CSS下拉菜单？

固定垂直居中按钮：
Fixed top:50% magin-top:-1/2height
[拓]弹出窗口？

Order:显示顺序 -1靠前 默认0

Flexbox:(container)
display:flex

flex-direction(主轴方向):row从左往右（默认）     row-reverse:从右往左
                  column从上往下    column-reverse:从下往上

flex-wrap:自动换行
no-wrap:默认不换行 会压缩在一行
wrap:换行

Flex-flow: flex-direction&& flex-wrap组合

Justify-content:
Flex-start 默认
Center flex-end space-between 均匀放置 space-around 均匀 但没有顶格 分散到两侧

Align-content:
Stretch 默认 撑大
Flex-start 单行 center 侧轴居中 flex-end

Flex-item:
Stretch 自动伸展为每一行高度(增量大小相同) 设定的不伸展
Flex-start 对齐每一行上边缘
Flex-start 对齐每一行下边缘
Baseline 基线对齐

Align-items:定义了各flex item在所在line中沿侧轴对齐的方式

Item:
Order 默认0 小的靠前
Align-self 自身对齐方式 auto继承
Flex-grow:1（增长因子） 抢占剩余空间
Flex-basis(主轴上item的基础大小) 强于width,height
Flex:1 1 200px 增长因子 缩减因子 基础大小

居中布局方式：
1. 弹性盒子 container justify-content:center align-items:center
2. 普通 container absolute
div relative top 50% left 50% margin-left:-1/2width margin-top:-1/2height

Autoprefixer css online (添加厂商前缀 flex-box)

Grid 网格布局
跨越两行 第二行clear-both
跨越两列 设置宽度
Bootstrap3 grid