css盒模型：
margin padding border
css标签的默认值和属性
div:
a:link hover visit active
img:background-size,background-position
浮动和清除浮动的方法
float:left,right.
overflow:hidden
clear:both
定位
相对定位：position:relative
绝对定位：position:absolute
固定定位：position:fixed
引入css的3中方式
外部样式、行间样式、内联样式<br>
优缺点，格式，权重
内联：优先级高，不会被覆盖，不会产生再次请求。不利于代码维护。没有样式内容分离。
行间样式：style 位于head 试用于单页面开发，
外部样式：link 内容 样式 行为 分离。代码复用。利于维护。
会增加请求次数。
reset.css/publice.css
@import url 引入方式，不常用
css构成
一般由选择器，属性和属性值构成
例：div{
width:100px;
height:100px;
}
如果值为若干个单词，则要给值加引号;
例：p{font-family:"sans serif";}
css选择器
1、统配选择器：
*
2、元素选择器：
div/a/h1/p/span{color:red}
3、id选择器：
#id名{color:red;}
4、类选择器：
.类名{fot-size:12px;}
5、属性选择器：
a[属性值：href/title/src/url]{color:red;}一般用于input标签
6、后代选择器:
div a{color:red;}
7、子元素选择器：
h1 > em{color:green;}.只作用于某个元素的子元素。
8、兄弟选择器:
h1 + p {margin-top:50px;}.同一个父级，h1和p是相邻的元素。
9、nth选择器：
nth-child(),nth-first-child(),nth-last-child()
10、状态选择器：
focus,checked,enabled,disabled 例：input[type="text"]:disabled { background:#ddd;}
11、伪元素选择器：
E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
12、伪类选择器：
a:link{color:red} 未被访问的链接
a:visited{color:green} 已被访问的链接
a:hover{color:black} 鼠标移动到链接上
a:active{color:glod} 选的的链接
13、分组选择器：
偏重代码优化，对于重复的代码合并到一块。
选择器的优先级：id >class>标签
!important
属性的继承
可继承属性：line-height color font font-family font-size font-style font-variant
不可继承属性：display margin border padding background width height overflow position left right top right top bottom z-index float
颜色值
red green 等英文单词
#0000 #号加16进制的数字
rgb：red green blue
<img src="http://p3.pstatp.com/large/23b00095416e3d2f534"/>
rgba: red green blue a代表透明度，取值0~1之间
hsl (IE8-浏览器不支持) HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色.h:色调(hue)可以为任意整数。0(或360或-360)表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红(当h值大于360时，实际的值等于该值模360后的值).s:饱和度(saturation)，就是指颜色的深浅度和鲜艳程度。取0-100%范围的值，其中0表示灰度(没有该颜色)，100%表示饱和度最高(颜色最鲜艳).l:亮度(lightness)，取0-100%范围的值，其中0表示最暗(黑色)，100%表示最亮(白色)
hsla (IE8-浏览器不支持)HSLA模式是HSL的扩展模式，在HSL的基础上增加一个透明通道alpha来设置透明度
单位：
px 具体单位 像素
百分比 单位根据父级
em 单位被定义为当前字体大小 根据body 例如：bidy{font-size:14px} 单位变化根据父级来改变
rem root em 基于根元素html进行设置
vh/vm 视窗单位 h等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px
line-height
可以用来居中
font
设置字体样式
BFC
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”
BFC的生成
满足下列css声明之一的元素便会生成BFC。
根元素：html 就是一个大的bfc
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
BFC的约束规则
生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而 position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然