2021-05-26 Day-07 定位和元素居中办法

回顾

1.元素分类：块级、行内元素
2.img和input属于行内块、置换元素
3.display:
	block块
	inline行内
	inline-block行内块
	none无

定位position

1.相对定位position:relative;
	- 参考物：元素本身位置
	- 是否脱离文档流：否
	- 偏移距离：
		top自己的顶部距离自己顶部的距离
		bottom自己的底部距离里自己底部的距离
		left
		right
	- 用处：实现元素位置的微调,而且保留了元素的初始位置
2.绝对定位position:absolute;
	- 参考物：外层具有position属性的元素,如果都没有找到则参考浏览器空白文档区域
	- 是否脱离文档流：是
	- 偏移距离：
		top自己的顶部距离参考物顶部的距离
		bottom自己的底部距离参考物底部的距离
		left自己的左侧距离参考物左侧的距离
		right
	- 用处：相互叠加效果,而且元素初始位置空间不再占据
2.1 z-index定位元素的层叠顺序
	z-index:4;值越大越靠前，没有单位
3.固定定位position:fixed;
	- 参考物：浏览器空白文档区域
	- 是否脱离文档流：是
	- 偏移距离
	- 用处：不随滚动条滚动
4.粘性定位position:sticky;
	- 参考物：浏览器空白文档区域的顶部
	- 是否脱离文档流：否
	- 偏移距离top
	- 用处：吸顶效果

元素水平和垂直的居中

1.方法一：父元素尺寸未知、子元素尺寸已知,元素尺寸大小不受限
	父{
		position: relative;
	}
	子{
		width: 200px;
		height: 100px;
		background: red;
		position: absolute;
		top: 50%; 向下移动父元素高度的一半
		left: 50%; 向右移动父元素宽度的一半
		margin-top:-50px; 子元素向上移动自己高度的一半
		margin-left:-100px; 子元素向左移动自己宽度的一半
	}
2.方法二：父元素子元素尺寸都未知,只适用于父元素尺寸大于子元素尺寸
	父{
		position: relative;
	}
	子{
		width: 100px;
		height: 400px;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

面试题：哪些属性可以取负值

top
bottom
left
right
margin
text-indent
background-position
z-index

透明度

1.background:rgba(255,255,255,0-1之间的小数)
	数值越小越透明
	没有继承性
2.opacity:0-1之间的小数;
	background:rgb();
	opacity:0.4;
	有继承性
3.问题：IE6/7/8浏览器不支持以上两种透明度写法
	filter:alpha(opacity=40);

锚点

1.点击的位置
	<a href="#anchor"></a>
	<a href="页面路径#anchor"></a>
2.跳转到的位置
	<div id="anchor"></div>
3.<a href="#">点我返回顶部</a>
	返回页面顶部的空链接