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)使用and指定符合的设备类型。可以有多个and。也可以加上not，only或all关键字。
25、颜色值的设定：rgb，rbga，hsl，hsla。
background-color:rgba(255,0,0,0.5);
background-color: hsla(120,100%,50%,0.5); 色调H，饱和度S，亮度L。
26、透明度：alpha和opacity。opacity取值范围0~1。opacity:0.5; background-color:rgba(0,255,100,0.5);并不会对文字产生透明度效果，只作用于背景。而opacity会同

时作用于背景和文字。
transparent。完全透明。background-color: transparent;背景透明。border-color: transparent;边框透明。color: transparent;文字和背景都完全透明。
27、轮廓样式：outline。outline:thin solid red;。轮廓线颜色，轮廓线样式，宽度。outline是在元素周围的轮廓线，位于border之外。
outline-offset:2px;outline-offset.正数表示向外偏移。负数表示轮廓线向内，绘制在边框内部。
28、resize:both;表示允许用户修改元素的尺寸。参数有none,both,horizontal,vertical,inherit继承父元素的resize属性.使用resize属性就必须设置overflow属性。否则

即使设置了resize也没用。
29、 color:-moz-initial;取消对样式的指定。它的作用是让各种属性使用默认值。注意的是，追加了initial属性的样式设定后，h1的元素的字号和字体粗细均使用css对字

号和字体粗细属性设定的默认值，而不是浏览器对h1追加的样式。css中，字号默认是medium，粗细是normal。这和浏览器的h1的默认样式不同。
30、在css中推荐使用#元素id或者元素#元素id将样式和元素绑定，或使用#元素id子元素。而不推荐没有任何语义的class属性。
31、让文本自动换行。word-break:keep-all;只能在半角空格或字符处换行。normal：浏览器默认换行。break-all;允许在单词内换行。
32、word-wrap：长单词和url地址地动换行。word-wrap:break-word;和normal。
33、font-size-adjust:保持文字大小不发生变化的情况下改变字体的种类。font-size-adjust:0.46;
34、提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。
35、p:first-child {font-weight: bold;}first-child 将作为某元素第一个子元素的所有 p 元素设置为粗体。提示：最常见的错误是认为 p:first-child 之类的选择器会

选择 p 元素的第一个子元素。注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
36、"first-line" 伪元素用于向文本的首行设置特殊样式。注释："first-line" 伪元素只能用于块级元素。
"first-letter" 伪元素用于向文本的首字母设置特殊样式：注释："first-letter" 伪元素只能用于块级元素。
":before" 伪元素可以在元素的内容前面插入新内容。h1:before {content:"ddd";}
":after" 伪元素可以在元素的内容之后插入新内容。
37、相对定位：位注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
38、绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的

空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
39、z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
40、外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

41、使用content属性插入项目编号。
form#payment > fieldset > legend:before {
content: "Step " counter(fieldsets) ": ";/**项目编号**/
counter-increment: fieldsets;
}
42、label的for属性。for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
<input id=amex name=cardtype type=radio>
<label for=amex>AmEx</label>
form#payment label[for=visa] {
background-image: url(visa.gif);
}
43、nth-child():伪类选择器的用法。
描述：

伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共

5部分来说明。
第一种：简单数字序号写法

:nth-child(number)

直接匹配父元素的第number个元素。参数number必须为大于0的整数。注意，css的元素计算是从1开始的。

例子：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种：倍数写法

:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三种：倍数分组匹配

:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以

变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

例子：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

li:nth-child(3n±0){background:orange;}/*相当于(3n)*/

li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
第四种：反向倍数分组匹配

:nth-child(-an+b)

此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b

个。

例子：

li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/

li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/
第五种：奇偶匹配

:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

与nth-of-type的区别是，nth-child不区分元素类别，只匹配个数位置。而nth-of-typ会根据元素类型匹配对应的位置。