每天一个知识点

• Flex:

flex-shrink: 0;  // 不缩小 默认值为1
flex-grow: 1;占一份 // 1.非图片布局一定要多用, 拓展性极强
			  // 2. 文本超出... 容器使用了flex: 1 , 再设置overflow: hidden 才能显示...

• box-sizing:

不可继承属性

• 垂直居中:

1. position:
    父box: position: relative; // width要固定!
	子box:
	postion: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	margin: auto;
	
2. flex+margin:
	父box:
	display: flex;
	align-items: center; // 子box在垂直方向上居中了
	子box:
	width: 100px; 
	height: 100px;
	marign: 0 auto;

3. top+translateY()      translate相对于自身而言

• 文本溢出:

父box: 有固定width
子box:
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis; 

• 动画的演变:

1.形变transform: scale() rotate() translate()
2.过渡动画transition: transform 1s ease-in ;  // 描绘过程
3.动画animation: idKey 2 ease;
		@keyframes idKey {
			0% {
				transform: ...	
			}
			100% {
				transform: ...
			}
		}

• vertical-align:

作用: 包裹行盒内所有内容
默认值: 以baseline对齐
		-img[底部有空隙]   <==  vertical-align: top
		-.box text: 以盒内最后一行文本的基线对齐[有尺寸有文字的行内块怪异展示]
		```