盒模型

盒模型: box-sizing:; content-box 标准盒模型 border-box 怪异盒模型(IE盒模型) W = width(包含了border padding) + margin H = height(包含了border padding) + margin 【拓展】 丢失 在ie低版本中显示怪异盒模型

flex布局:
	flex容器: 设置了flex的父元素
	flex项目: flex元素的子元素
	
	flex布局的基本特征:
		1: 默认水平方向为主轴,垂直方向为侧轴
		2: 项目默认沿着主轴方向排列
		3: 设置为flex布局后,浮动,清除浮动,vertical-align 都失效
		
	容器属性:(给自己设置,控制子元素)
		1: display:设置为弹性盒; 
			flex 
			inline-flex
			【注】所有的flex相关属性都必须设置为了flex布局,才能生效
			
		2: flex-direction:设置主轴方向;
			row 水平主轴
			row-reverse 反向水平主轴
			column 垂直主轴
			column-reverse 反向垂直主轴
			
		3: flex-wrap:是否换行;
			nowrap 不换行
			wrap 换行
			wrap-reverse 反向换行
			
		4: flex-flow:主轴方向 是否换行;
		
		5: justify-content:主轴对齐方式;
			flex-start 起始位置
			center 居中
			flex-end 结束位置
			space-between 两端对齐
			space-around 两端平分
			space-evenly 平均分配
			
		6: align-items:侧轴对齐方式;
			flex-start 起始位置
			center 居中
			flex-end 结束位置
			stretch 拉伸(默认值)
			baseline 文本底部对齐
			
		7: align-content:多行的侧轴对齐方式;
			flex-start 起始位置
			center 居中
			flex-end 结束位置
			space-between 两端对齐
			space-around 两端平分
			space-evenly 平均分配
			stretch 拉伸(默认值)
			【注】必须换行的元素才能使用
	
	项目属性:(给自己设置,控制自己)
		1: align-self:侧轴对齐方式;
			flex-start 开始位置
			center 居中
			flex-end 结束位置
			stretch 拉伸
			auto 默认值(跟随父元素的align-items的值一致)
			
		2: order:反向排序;
			数字越大越靠后,反之靠前
			
		3: flex:缩放大小;
			子元素的总占位宽小于父元素的宽度,那就是放大
			子元素的总占位宽大于父元素的宽度,那就是缩小
			flex-grow:放大;
			flex-shrink:缩小;
			flex-basis:长度;
				px %
				
多列布局:
	column-count:分列;
	column-gap:列间距;
	column-rule:列边框大小 形态 颜色;
	column-fill:填充方式;
		auto 优先填满上一列
		balance 尽可能平均分配
	column-span:是否合并;
		none 不合并
		all 合并
	column-width:列宽;
	columns:列数 列宽;
	
常见布局方案:
	1: 固定布局
	2: 可切换固定干部局
	3: 弹性布局
	4: 混合布局
	5: 布局响应
	
响应式开发的特点
	特点:
		面对不同分辨率设备灵活性强 
		能够快捷解决多设备显示适应问题
	缺点:
		兼容各种设备工作量大，效率低下
		代码累赘，会出现隐藏无用的元素，加载时间加长
		其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
		一定程度上改变了网站原有的布局结构，会出现用户混淆的情况