css wiki

//CSS 2.1 选择器

http://weizhifeng.net/css-21-selectors-part-1.html

http://weizhifeng.net/css-21-selectors-part-2.html

http://weizhifeng.net/css-21-selectors-part-3.html

//margin

垂直方向上的外边距会叠加

//reset.css - http://meyerweb.com/eric/tools/css/reset/

"中和"不同浏览器的默认css,然后再根据需要添加css规则，则会在各浏览器上获得一致的效果。

//css盒模型

盒模型结论一：没有（就是没有设置 width 的,即默认值是 auto）宽度的元素始终会扩展到填满其父
元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量
等于水平边框、内边距和外边距的和。

盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展
得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占
据的水平宽度。

CSS3 新增了一个 box-sizing 属性，通过它可以将有宽度的盒子也设定成具有默认的
auto 状态下的行为(推荐)。

//float

通俗讲就是:“当你浮动一个元素的时候……这些（浮动）规则就好像在说:'尽量把这个元素往上放，能放多高放多高，直到碰到某个元素的边界为止.'”

CSS 设计 float 属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性也成了创建多栏布局最简单的方式。

但CSS3 Multi-column Layout Module 规定了如何用 CSS 定义多栏布局(推荐)。

浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它.围住浮动元素的三种方法:

1.为父元素添加 overflow:hidden(以强制它包围浮动元素,很简单，缺点是不太直观)

2.同时浮动父元素,并为后续的文档流元素应用"clear:left"

3.添加非浮动的清除元素,即给父元素的最后添加一个非浮动的子元素，然后清除该子元素.

div元素
使用clearfix规则(推荐)

clearfix 规则:父元素添加class="clearfix"(.clearfix:after {
 content:".";
 display:block;
 height:0;
 visibility:hidden;
 clear:both;
}
)

ps;

浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。

//clear

清除后续浮动元素的float效果(此时clear的值应与其float属性一致)

//css position

static:元素没有被定位，而且在文档中出现在它应该在的位置

relative: 相对它原来在文档流中的位置（即默认位置static）进行挪动,同时这个元素原来占据的空间没有动，其他
元素也就没动了。

absolute:绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来,相对于定位上下文(默认是body)进行定位.

fixed:完全移出文档流,固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动.

绝对定位的定位上下文:绝对定位元素的任何祖先元素都可以成为它的定位上下文(第一个父元素进行定位)，只要你把相应祖先元素的 position 设定为 relative 即可,没有时默认是body.

ps:只有将元素的 position 属性设定为 relative、 absolute 或 fixed，这个元素的 top、 right、 bottom 和 left 属性才会起作用。

//display

display:none时,该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样。与此相对的是 visibility属性，这个属性最常用的两个相对的值是visible（默认值）和 hidden。把元素的visibility 设定为 hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”。

//背景

http://segmentfault.com/blog/dopppler/1190000002431644

元素的前景层包含内容（如文本或图片）和边框，元素的背景层可以用实色填充（使用 background-color 属性），也可以包含任意多个背景图片（使用background-image 属性），背景图片叠加在背景颜色之上。

前景色既影响文本，也影响边框(前提是没设定边框颜色)

默认情况下背景图片会以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个背景区域。

 background-repeat 属性有 4 个值。默认值就是 repeat，效果就是水平和垂直方向都重复，直至填满元素的背景区域为止。另外 3个值分别是只在水平方向重复的 repeat-x、只在垂直方向上重复的 repeat-y 和在任何方向上都不重复（或者说只让背景图片显示一次）的 no-repeat 。

background-position 属性同时设定元素和图片的原点,原点决定了元素和图片中某一点的水平和垂直坐标:

1.在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。
2.像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。

background-position:center center 设定图片中心点与元素中心点重合，然后再向各个方向重复

CSS从大图中抠取小图完整教程(background-position应用):http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html

实现图片在背景区域内居中的效果:background-position:50% 50%;background-repeat: no-repeat。

background-attachment 属性控制滚动元素内的背景图片是否随元素滚动而移动.fixed 最常用于给 body 元素中心位置添加淡色水印，让水印不随页面滚动而移动。

多背景图片时,为了防止图片加载失败时元素背景处于默认的透明状态，这里也在最后一条声明中加上了背景颜色（加粗的值）。要注意的是，代码中先列出的图片显示在上方，或者说，更接近前景.

//VSP（Vendor Specific Prefixes，厂商前缀）

由于这个属性还没有完全定案，为保证在大多数浏览器以及它们的实验性实现中能够使用这个属性，应该针对想要支持的浏览器为该属性添加 VSP。每个浏览器只使用各自能理解的属性声明：

-moz-transform:skewX(-45deg); /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome 及 Safari */
-ms-transform:skewX(-45deg); /* 微软 Internet Explorer */
transform:skewX(-45deg); /* 最后是 W3C 标准属性 */

//行高

修改默认行高最简单的方式就是使用 font 快捷属性，以复合值的形式把 font-size 和 line-height 值写在一块

div#intro {font: 1.2em/1.4 helvetica, arial, sans-serif;} #就这个例子来说，行高就是字体大小 1.2em 的 1.4 倍。注意这里不用给 line-height值指定单位，只要一个数值就可以。

//z-index

z-index 只对那些 position 值为 static 之外的元素有效.