前端复习（三）

CSS定位
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行内从左到右排列。

position属性设置元素定位：
relative生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则就相对于body来定位。
absolute生产绝对定位元素，元素脱离文档流，不占文档流的位置。可理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来定位，如果没有就相对于body元素。
fixed生产固定定位元素，元素脱离文档流，不占文档流的位置。可理解为漂浮在文档流的上方，相对于浏览器窗口来定位。

定位元素的偏移
定位的元素需要用left, right, top, bottom来设置相对于参照元素的偏移值

定位元素的层级
定位元素是浮动在文档流之上的，可用z-index属性设置元素的层级，值越大越靠上层

定位元素水平垂直居中技巧：

.pop{
	width: 500px;
	height: 300px;
	border: 1px solid black;
	/*固定定位*/
	position: fixed;
	/*左边界到窗口50%位置*/
	left: 50%;
	/*左边界往左移动盒子一半的长度*/
	margin-left: -251px;
	top: 50%;
	margin-top: -151px;
}

设置元素透明度，此属性需要加一个兼容IE的写法
opacity: 0.3;
#兼容IE
filter:alpha(opacity=30);

CSS权重
权重等级：
1.内联样式，如style=""，权重为1000
2.ID选择器，如#cotent，权重为100
3.类，伪类选择器，如.content，:hover，权重为10
4.标签选择器，如div，权重为1

层级选择器

.box01 p{
	background: red;
}

组选择器

.box01,.box02,.box03{
	width: 100px;
	height: 100px;
}

伪类选择器：鼠标悬停时生效，移动端不适用

.box{
	width: 100px;
	height: 100px;
	background: gold;
}
.box:hover{
	width: 200px;
	height: 200px;
	background: red;
}

CSS显示特性
display属性：
1.none元素隐藏且不占位置
2.inline元素以行内元素显示
3.block元素以块元素显示

CSS元素溢出
overflow属性（在父元素中设置）：
1.visible 默认值，内容不被裁剪，子元素呈现在父元素之外
2.hidden 内容会被裁剪，其余内容不可见
3.scroll 内容会被裁剪，浏览器会显示滚动条查看其余内容
4.auto 如果内容被裁剪，浏览器会显示滚动条查看其余内容

outline设置input框获得焦点时，是否显示凸显的框线，一般设置为没有，outline:none;
placeholder设置input框的默认提示文字