H5学习---html，css---定位，BFC

***定位position

- 分类
	1.相对定位position:relative;
		参考物：元素本身(自己的初始位置)
		是否脱离文档流：不脱离
		偏移位置：
			top
			bottom
			left
			right
	2.绝对定位position:absolute;
		参考物：外层具有position属性的元素,一层一层向上去查找,如果都没找到最终参考浏览器空白文档区域做定位
		是否脱离文档流：脱离
		偏移位置：
			top
			bottom
			left
			right
	3.固定定位position:fixed;
		参考物：浏览器空白文档区域
		是否脱离文档流：脱离
		偏移位置：
			top
			bottom
			left
			right
	4.粘性定位position:sticky;
- 层级z-index
	元素必须有position属性才能生效
	兄弟元素之间比较z-index,不带单位
	数值越大越靠前
- 包含块
	参考物

***定位实现元素水平垂直居中

- 方法1
	父元素宽高未知，子元素尺寸必须知道
		父{
			width: 1000px;
			height: 600px;
			border: 1px solid red;
			margin: 200px auto 0;
			position: relative;
		}
		子{
			background: yellow;
			width: 200px;
			height: 200px;
			position: absolute;
			top: 50%;/*父元素高度的一半*/
			left: 50%;/*父元素宽度的一半*/
			margin-left: -100px;/*自己宽度的一半*/
			margin-top: -100px;/*自己高度的一半*/
		}
- 方法2
	父元素,子元素都宽高未知
		父{
			width: 800px;
			height: 500px;
			border: 1px solid red;
			position: relative;
		}
		子{
			background: yellow;
			width: 100px;
			height: 160px;
			position: absolute;
			margin: auto;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
- 全屏轮播图居中办法
	<div class="banner">
		<div class="ba-content">
			<img src="img/banner.jpg" class="pic"/>
		</div>
	</div>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.banner{
			overflow: hidden;
		}
		.ba-content{
			width: 1200px;
			height: 410px;
			margin: auto;
			position: relative;
		}
		.pic{
			position: absolute;
			left: 50%;
			margin-left: -960px;
		}
	</style>

***定位设置元素尺寸

宽高自适应

- 宽高的默认值
	width:auto;
	height:auto;和不写值是一样的
- 元素最小宽高
	min-width最小宽度
	max-width最大宽度
	min-height最小高度
	max-height最大高度
	
	- height属性在IE6里就类似min-height作用
- 解决父元素高度塌陷的方法
- 元素高度自适应窗口高度
	html,body{
		height:100%;
	}
- 面试题：
	一侧固定一侧自适应布局(浮动,定位,BFC三种方式)
	左右固定中间自适应布局

BFC

- 块级格式化上下文,是一个独立的渲染区域
- 1.哪些元素会生成BFC:
	html根元素
	脱离文档流(float不为none,position为absolute和fixed)的元素
	display为inline-block,table-cell,table-caption,flex,inline-flex
	overflow不为visible(可以是hidden,auto,scroll)
- 2.BFC展现的特性
	BFC的区域不会与float元素重叠
	计算BFC的高度时，浮动元素也参与计算