css3的笔记
1、width属性和height属性只能用在block类型的元素上，对于inline元素不起作用。inline-block也是block元素，但是表现的效果与inline一样。
2、使用inline-block可以将两个div元素并列显示，不需要float属性。同时去除环形围绕方式的clear:both属性也不需要了。
3、inline-block并列显示的元素默认是底部对齐。为了改成顶部对齐，还需要在div元素中加入vertical-align属性。vertical-align:top;要去除两个div之间的间隔，需要

去掉div之间的换行符。（2个div在同一行写不要换行）
4、使用inline-block可以实现水平布局，并去掉li的项目标记符号。
5、inline-table类型可以让table与其他元素在同一行。
6、  display:list-item;可以将多个元素作为列表来显示。
        list-style-type:circle;设置列表标志为circle
7、display:run-in类型会被包含在block类型的内部。display:compact类型会被放置在block类型元素的左边。只有opera浏览器支持。
8、 overflow:表示溢出的内容如何处理。属性值有hiddeen,scroll,auto，visible等。还可以指定 overflow-x和 overflow-y的值。
9、 text-overflow: ellipsis;表示一行（水平方向）中内容溢出如何处理，ellipsis表示溢出的内容用省略号显示。 white-space: nowrap; 表示禁止换行。
-webkit-text-overflow: ellipsis;safari浏览器
        -o-text-overflow: ellipsis;opera浏览器
-moz-text-overflow: ellipsis;firefox浏览器
10、 -moz-box-shadow: 10px 10px 10px gray; 对div的box使用阴影。4个参数表示x距离，y距离，模糊半径，颜色
        -webkit-box-shadow:10px 10px 10px gray;
11、 box-sizing: content-box;指定针对元素的宽度和高度的计算方法。 box-sizing: border-box;
box-sizing可以用width属性和height属性分别指定的宽度和高度是否包含元素内部的补白区域以及边框的宽度和高度.也就是说是否包含margin,border，padding这些元素的

宽度和高度。
content-box：表示元素的宽度和高度不包括内部补白区域，以及边框的宽高。这是默认值。
border-box：表示包括。
比如设置div的width为300,padding:30px,border:30px,margin:10px，若使用content-box，则width300px是不包括以上的margin,border，padding的，所以总宽度是要加上这

些数值，等于300+30*2+30*2+10*2=440px，300px就是div内容的宽度。而border-box，则width300px是包括以上内容的，div内容的宽度是300-140=160px。
padding-box:指定的宽度和高度包含内容的宽度和高度和内容补白区域padding的宽度和高度，但是不包括边框的宽度和高度。
12、-moz-background-clip: border;修改背景的显示范围。border，则背景范围包括边框区域，如果设定为padding，则不包括边框区域。在firefox中不支持在chrome中支持
13、-moz-background-origin: border;  指定绘制背景图像的绘制起点。默认padding。可选参数content，border。
-webkit-background-origin: content;       
14、-webkit-background-size:指定背景图片的尺寸。
15、-moz-border-radius: 20px; 圆角边框
border: dashed 5px blue;
border-radius: 20px;
-moz-border-radius: 20px;
16、-webkit-border-image: url(borderimage.png) 20 20 20 20 / 20px;使用图像边框。会让浏览器在显示图像边框时自动将所使用到的图像分割为9部分
        -moz-border-image: url(borderimage.png) 20 20 20 20 / 20px;
        width:200px;
border-image必须至少指定5个参数。1：图像文件路径。其它分别表示当浏览器自动把边框所使用到的图像进行分隔时的上下左右边距。第六个参数表示边框的宽度。可以为4

条边框分别指定宽度。
border-image: url(borderimage.png) 18 18 18 18/18px;
-moz-border-image: url(borderimage.png) 18/5px;中央图像自动拉伸。
-moz-border-image: url(borderimage.png) 18/5px repeat repeat;可以指定元素四条边中的图像是以拉伸的方式显示还是以平铺的方式显示。第一个repeat表示上下两条

边的显示方式，后一个repeat表示左右边的显示方式。可选参数有repeat，stretch，round。stretch表示拉伸。round表示平铺显示，但是最后一幅图像不能被完全显示，且

能够显示的部分不到图像的一半，则不显示最后的图像，然后扩大前面的图像，使显示区域正好平铺。如果显示的部分超过一半，则缩小显示。而在chrome和safari中，都是

照原样显示。
17、-moz-column-count: 2;       多栏布局。可以确保各栏中的内容底部对齐。
-moz-column-width:20em;指定每栏的宽度。
-moz-column-gap:2em;指定栏之间的间隔。如果超过父容器的宽度，则会换行显示。
-moz-column-rule: 1px solid red;栏间隔线的显示样式
18、display: -moz-box;盒布局。
盒布局和多栏布局的区别：使用多栏布局，各栏的宽度必须相等。
19、-moz-box-flex:1;变成了弹性盒布局。会根据浏览器的窗口宽度大小而调节box的宽度大小以适应浏览器。参数表示空白部分的占位比例。当排列完后，对空白空间按照所

有box-flex的总和进行等分，再分配给每个对应的div。1表示1个单位空间。2表示2个单位。
20、-moz-box-ordinal-group: 3;改变元素的显示位置。
21、 使用盒布局，宽度和高度有自适应性，即宽度和高度会根据排列方向的改变而改变。-moz-box-orient: vertical;改变元素的排列方向。-moz-box-orient: horizontal;
22、-moz-box-orient和-moz-box-flex结合，可以使box适应父窗口的宽度和高度，消除空白。
23、 -moz-box-pack: center;对齐方式。属性有：start（水平排列：左对齐，文字图像或子元素被放置在最左边；垂直排列：顶部对齐，在元素最顶部。），center，end（

水平：右对齐。垂直：底部对齐）
-moz-box-align：start（水平排列：顶部对齐；垂直排列：左对齐。），center，end（水平：底部对齐。垂直：右对齐）。采用盒布局，居中，必须明确高度和宽度。
24、@media screen and (max-width: 639px)使用an