CSS要点总结

标签：class   blog   http   color   com   width   

CSS 选择器：

1. 类型选择器：p {color:black;} 

2.  后代选择器： #topNav ul {color:black;}

3. ID和类选择器： #topNav, .newslist {color:black;}

4. 伪类：a:link, a:visited, a:hover, a:active, input:focus {color:black;}

5. 子选择器和相邻同胞选择器：

#topNav>li 直接后代/子元素

h2 + p: h2下面的第一个p

6. 属性选择器：a[rel="nofollow"]  {color:black;} 页面上的link并且rel属性的值为nofollow 

.blog  a[rel~="co-worker"] {background: url(co-worker.gif) no-repeat left corner;}

 选择器优先级：行内的最高，具有ID的大于没有ID的，而类选择器优先级大于类型选择器，如果2个规则优先级一样，后定义的高。

继承：应用样式的元素的后代，会继承样式的某些属性。

盒模型： 

页面上每一个元素都被视为一个矩形框：由内容，内边距，边框 ，外边距组成

如果元素应用了背景，那么背景会应用于由内容和内边距的区域。 

width和height指的是内容区域的宽度和高度

外边距（margin） 可以是负值，这个应用很广 

只有普通文档流中块框的垂直外边距才会发生外边距叠加

margin: 0 auto是居中的意思；

定位模型：

p, h1, div是块框，strong，span是行内框，可以使用display（block，inline，none等）属性来改变框的属性 

普通流，浮动流和绝对定位，默认所有框都在普通流中定位，由元素在HTML中的位置决定。 

块框从上到下排列，行内框水平排列 

在行内框上设置显示的高度没有影响

由一行形成的水平框成为行框，行框的高度总是足以容纳他包含的所有行内框，设置行高可以增加这个框的高度

如果把元素的display设置为Inline-block，意味着这个元素继续向行内元素一样，水平依次排列，但是框内的内容仍然符合块级框的行为可以显式的设置高度和宽度，边距等。

相对定位：让这个元素相对于他的起点进行移动：#box {position:relative; top:20px;left:20px;} ，使用相对定位时，元素仍然占据原来的空间的，这样他可能会覆盖其他框。

绝对定位：绝对定位不占用控件，跟文档流无关：#box {position:absolute;top:20;left:20px}, 绝对定位的元素的位置是相对于距离他最近的那个已经定位的祖先元素

固定定位：是绝对定位的一种，固定定位的元素的包含块是窗口。

浮动：浮动的框可以左右移动，直到它的外边缘碰到包含框或者另一个浮动框的边缘，浮动框不在文档流中。

行框和清理：浮动会让文档脱离文档流，不再影响不浮动的元素，实际上，并不完全如此，如果浮动的元素后面还有一个文档流中的元素，那么这个元素的框会表现的浮动框不存在一样，但是框的文本会受到浮动框的影响，会移动以留出空间，因此行框围绕浮动框：创建浮动框可以是文字围绕图片。要阻止行框围绕着浮动框的外面，需要对包含这些行框的元素应用clear属性（left，right，both，none） ：表示框的那些边不应该挨着浮动框。 “clear属性会抵消前面的浮动 ” 。浮动元素脱离了文档流，不影响周围的元素，但是对元素进行清理，实际上为前面的浮动元素留出了垂直空间。