CSS复习（1）

常见选择器

id选择器 #div
class选择器 .div
标签选择器 div
后代选择器 div p
子带选择器 div > p
伪类类选择器 :hover
伪元素选择器 ::after
群组选择器 div,p
属性选择器 div[id]
紧邻的兄弟元素 div+p
后边所有的元素 div ~ p
网址：http://css.doyoe.com/

CSS优先级

!import > style> > id > class、伪类 > 标签、伪元素

position定位

absolute
绝对定位 定位后空间释放，脱离文档流 相对于最近已定位的祖先元素
relative
相对定位 定位后空间不释放 相对于自己的初始位置
fixed
固定定位 定位后空间释放 相对于浏览器可视窗口（IE6不支持）
static
默认的定位
sticky
粘性定位 （吸顶效果 ）

浮动 元素塌陷

float:left right ：浮动元素脱离文档流、空间释放 、宽高是内容撑的（子元素浮动，父元素高度塌陷）

解决塌陷：

1. 父元素添加高度 （前提是已知父元素高度）
2. overflow:hidden;加在父元素上(触发BFC)
3. 定义css样式clearfix，之后需要清浮动的位置，是要添加clearfix样式即可。

    .clearfix::after{
	    content:"",
	    display:block;（伪元素设置为块元素）
	    clear:both
    }

4. 在浮动的元素下加一个元素，添加样式“clear：both”
5. 父元素也浮动

盒模型

内容 content + padding + border + margin
标准盒模型
width:200
width = content
怪异盒模型（ie6及ie6以下的浏览器 不写doctype 会表现成怪异）
width:200
width = border + padding + content
标准和模型 和 怪异 转化
box-sizing : content-box(标准盒模型) border-box (怪异盒模型);

外边距合并

1.父元素加
overflow : hidden;
2.父元素加边框
border : 1px solid 颜色；
3 父元素或子元素进行浮动或者定位