盒子模型：    padding为1个值代表上下左右四个值相同；    padding为2个值:第一个代表上下内边距，第二个代表左右内边距；    padding为3个值:第一个代表上内边距，第二个值代表左右内边距，第三个值代表下内边距；    padding为4个值:分别代表上、右、下、左内边距    

1.margin:.两个盒子上下排列时，上面盒子margin-bottom，下面盒子margin-top，两个盒子间的距离取最大者。       

2.两个盒子互相包含，都有margin-top值时，以大者为主。        

3.两个盒子左右排列，左边盒子有margin-right，右边盒子有margin-left。两个盒子间距离为两个之和。

4.border-style:solid（实心） dotted（小圆点状） dashed（虚线）double（双实线） transparent（透明）默认solid

5.上三角形： width:0;        border:10px solid transparent;        border-top-color:red;

6.行内元素、行内块级元素转化为块级元素:  display:block;任何元素转化为行内块级:  display:inline-block;任何元素转化为行内元素:  display:inline;

7.去掉边框: border:none;解决间距问题: font-size:0或者将margin-left设为负值;任何元素消失不见:display:none;

8.CSS精灵——sprite雪碧图  

9.背景图片:background-image;background-repeat:定义背景图片的显示方式（默认水平垂直都平铺）

background-position:定义图片的位置，如center center

background-size:定义背景图片的大小 length | percentage | cover | containcover:等比例扩展至足够大，可能会引起图片的切割（可能图片无法显示完整）contain:等比例扩展至足够大，图片完整（可能会引起局域内空白）

background-origin:定义背景图片的渲染位置，背景图片可以放置于content-box、padding-box、border-box

background-attachment:定义背景图片是否固定或者随着页面的其余部分滚动（标准文档流:浏览器解析HTML）scroll（背景图片会随着正常的文档流滚动）（默认）fixed（背景图片固定不动，不会随着正常的文档流滚动）box-sizing:content-box（默认）、border-box（padding、border不会对盒子大小产生影响）

10.浮动float:left左浮动  float:right右浮动对span元素加一个"float:left"，span元素已经“块”化。浮动只会对后面的布局产生影响

11.清除浮动：1.给父元素加高度          2.给父元素加overflow:hidden          3.在有浮动的元素后面加一个空的块级元素，给此元素加样式"clear:both"

4.给受影响的元素加"clear:both"     

5.给父元素家为伪类:after                    .box:after{    content:""; display:block;  clear:both;                        }

12.图片和下方内容之间有间隙:

1.给图片img加style="valign:middle" 

2.给包含图片的div加"font-size:0"        去掉外边框:outline:none(input)

13.CSS使用position属性指定标签的定位方式

1.static（默认值）使用基于“文档流”的定位相对定位

2.relative:相对原来的自己。相对定位结合left和top（left、top、right、bottom只在定位的情况下才起作用）

3.绝对定位absolute:脱离文档流，并基于它的包含框，使用left和top来定位1.有绝对定位的元素的外层没有定位元素包着，此元素相对于浏览器定位2.有绝对定位的元素的外层的父元素（祖父元素）有定位，此元素相对于外层定位元素定位固定定位fixed:相对于浏览器定位

4.z-index值越大，层越靠上（多个定位元素的覆盖次序）

14.list-style-type列表样式类型 

disc/circle/square

list-style-image列表样式图片

list-style-position:outside（默认） inside（内容和前面的序列号对齐）

cursor光标 pointer小手 wait加载 help帮助 display:none（元素不见，所占区域消失）

15.visibility:visible（可见，默认）hidden（元素不可见，所在区域还在）opacity:0（元素不可见，区域还在，背景文字透明度均改变）（适用于火狐、谷歌、safari、欧朋）RGBA（只改变背景透明度，不改变文字）

filter:alpha(opacity=40)(opacity取值范围0~100)（适用于ie8及以下版本）overflow属性:（overflow-x、overflow-y）

16.滚动条

1.scroll:使用滚动条，不论内容是否超出；

2.auto:如果内容超出了width，则出现横向滚动条，如果内容超出了height，则出现纵向滚动条。否则不显示滚动条；

3.hidden:超出部分被隐藏；

4.visible 默认值定位元素居中显示:left:0;right:0;top:0;bottom:0;margin:auto;width为100%的后面要加min-width:缩小屏幕时，右边内容不会溢出圆形:width:200px;height:200px;border-radius:100pxdisplay:inline-block和float作用一样，让元素在一行显示