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框的默认提示文字