Day14-弹性盒、怪异盒模型

回顾

1.css3新增的选择器
	div~p
	[class^="a"]
	[class&="a"]
	[class*="a"]
	:last-child
	:nth-child()
	:nth-last-child()
	:only-child
	:first-of-type
	:last-of-type
	:nth-of-type()
	:nth-last-of-type()
	:only-of-type
	:root
	:empty
	:not()
	:target
	UI元素状态伪类:
		:enabled启用
		:disabled禁用
		:checked选中
		::selection
2.css3新增的属性
	盒子阴影box-shadow
	文本阴影text-shadow
	@font-face
	文本换行相关属性word-wrap、break-word
	背景原点background-origin
	背景裁切background-clip
	背景尺寸background-size
	多背景background:url(),url();
	图片边框border-image
	边框倒角border-radius
	禁止用户更改元素尺寸resize:none;
	渐变background:linear-gradient();
	2d转换transform
	3d转
	过渡transition
	动画animation

怪异盒模型

盒模型：标准盒模型、怪异盒模型
- 标准盒模型box-sizing:content-box;(默认)
- 怪异盒模型box-sizing:border-box;
- 怪异盒模型:代码设置的width是包含padding和border的

***弹性盒

- 父元素的属性
	1.display:flex/inline-flex;
		flex将对象作为弹性伸缩盒显示
		inline-flex将对象作为内联块弹性伸缩盒显示
	2.flex-direction (主轴排列方向)
		row 默认，横向一行排列
	  	row-reverse 反转横向排列
	  	column 纵向排列
	  	column-reverse 反转纵向排列
	3.justify-content(主轴对齐方式)
		flex-start默认，顶端对齐
		flex-end末端对齐
		center居中对齐
		space-between两端对齐，中间自动分配
		space-around自动分配距离
		*默认元素在主轴上容不下不会换行，会被压缩
	4.align-items(侧轴对齐方式)
		flex-start 侧轴起始边界
		flex-end 侧轴结束边界
		center 居中放置
		baseline 基线对齐
		stretch 默认值，项目被拉伸以适应容器
	5.flex-wrap设置换行
		nowrap 容器为单行，该情况下子项可能会溢出容器
		wrap 容器为多行，子项内部会发生断行
		wrap-reverse 反转排列
	6.align-content(行与行之间对齐方式)
		flex-start 没有行间距
		flex-end 底对齐没有行间距
		center 居中没有行间距
		space-between 两端对齐，中间自动分配
		space-around 自动分配距离
		stretch 默认值，项目被拉伸以适应容器
- 子元素的属性
	1.align-self 灵活容器内被选中项目的对齐方式
		--可重写灵活容器的align-items属性
		auto 默认值，元素继承了它的父容器的align-items属性
		stretch	元素被拉伸以适应容器
		center 元素位于容器的中心
		flex-start 元素位于容器的开头
		flex-end 元素位于容器的结尾
	2.order 排序优先级
		数字越大越往后排，默认为0，支持负数
	3.flex-grow 项目的放大比例
		flex-grow:1;平分父元素剩余空间
		flex:1;平分父元素宽度
	4.flex-shrink 项目的缩小比例
		flex-shrink:0;元素不缩小
	5.flex-basis 项目的长度(主轴上的)
	6.flex为345的简写形式
		默认值flex:0 1 auto;