知识导图
选择器
多选
#poil , .bar , a , input a{
color: white;
background: red;
}伪类
:对应类型名称，是选中特定的元素在特定状态下触发的类
比如当鼠标移动到上方的时候改变一些css样式
a{
color: black;
font-size: 20px;
}
a:hover{
color: red;
}定位
溢出
子元素是可以超过父元素的大小的，这种现象称之为溢出
可以通过设置overflow(property)的value来使元素即将溢出的时候变成拉动框从而不会溢出
浮动
characteristic
自身浮动
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
未清除浮动时其他元素浮动
- 浮动元素之后的元素将围绕它。(浮动效果即环绕效果)，如果图像是右浮动，下面的文本流将环绕在它左边。
- 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动前后其他元素浮动
- 连续浮动的元素除非遇到清除浮动，否则都会进行水平浮动，当浮动宽度不够的时候会进行换行
- 浮动元素之前的元素将不会受到影响。
inherit
作为property的value，作用是继承父类
.father{
height: 44px;
float: left;
}
.father a{
height: inherit;
float: inherit;
}clear:both
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
<html>
<head>
<style>
img{
float: left;
width: 33%;
border: 2px solid;
box-sizing: border-box;/* 在计算size的时候计算入border 默认只会算入从content */
}
.clear{
clear: both;/* 如果不清除，接下来的p标签内的文字会围绕在图片周围，之后的元素也会产生一系列问题 */
}
</style>
</head>
<body>
<img href="img/a.jpg">
<img href="img/b.jpg">
<img href="img/c.jpg">
<img href="img/d.jpg">
<div class="clear"></div>
<p>
this is a paragraph.
</p>
</body>
</html>五种定位类型
通用
显示层级
/*显示层级 参考ps图层概念*/
z-index:-1;坐标定位left right top bottom
除了默认的static不受坐标定位符号的限制以外另外的四种非默认定位模式都受坐标定位模式
static受盒子模型的限制
relative
是相对于正常位置的偏移值
sticky
待学习（学会了回来补）
absolute+fixed
绝对定位还是不太懂关键是对于“绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于”待学习（学会了回来补）
/*绝对化定位不受盒子模型定位干扰*/
.box{
position:absolute;
/*从左上角的位置开始算相当于x y坐标*/
left:0px;
top:0px;
/*显示层级 参考ps图层概念*/
z-index:999;
}
/*相当于传统导航栏，定位在浏览器页面的固定位置*/
.box{
position:fixed;
/*从左上角的位置开始算相当于x y坐标*/
left:0px;
top:0px;
/*显示层级 参考ps图层概念*/
z-index:999;
}