html5+css3的第5天 使用工具：HBuilder X

背景：

background： 集合属性;
background-image：url();
background-repeat：no-repeat|repeat-x|y;
background-position：精灵图;
background-size:拉伸比;

浮动：

float:left|right|none;
脱离文档流(不占body的标准位置)

浮动造成的影响:
1、浮动会覆盖没有浮动的元素;
2、子元素浮动 daozhi父元素的高度塌陷
3、文字环绕效果

清除浮动:
1、增加第三元素(挡板)

.clearFix{
	clear:both;
	zoom:1;
}
<div class="clearFix"></div>

2、

overflow:hidden; 
   zoom:1;
   

万能清除:

父元素::after{
	   content:"";
	   height:0;
	   display:block;
	   clear:both;
	   zoom:1;
   }

列表样式:

list-style:none;
list-style-image:url();

后代:ul li

子代:ul>li

伪类选择器:

:hover{
	
}

:nth-child(1){
	
}

:first-child{
	
}
:last-child{
	
}

:focus{
	
}

伪元素:
(清除浮动、图标)
后置操作:

::after{
	
}

前置操作:

::before{
	
}

css精灵图(雪碧图)sprites
合成图：图标(icon)
100图片
1000 请求：
缓存

定位:

position：static|relative|absolute|fixed;

relative：相对定位（占用标准文档流）
定位基准:
依赖元素自身所处的位置来进行位置偏移。
为绝对定位的元素做定位基准。

absolute：绝对定位（脱离文档流）
定位基准: 默认情况下依据浏览器的左上角进行定位；如果具备该属性的元素存在父元素、祖先元素
且存在相对定位，该元素不在依赖浏览器的左上角而是依据具备相对定位的父元素、祖先元素来进行定位。

下拉菜单
二级分类菜单
元素移入移出特效
轮播图布局

fixed:固定定位(绝对定位)
定位基准:依据浏览器的窗口进行定位。

---

固定头部、底部导航
固定的侧边栏
楼层定位

使用:

left：
top:
right:
bottom:
z-index:堆叠次序