随手笔记

1.

何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

 

2.

1.  内联样式表的权值最高 1000；

2.  ID 选择器的权值为 100

3.  Class 类选择器的权值为 10

4.  HTML 标签选择器的权值为 1

5.  继承的权值最低，算个0.1吧

 

3.

 !DOCTYPE 的作用是：让页面按照W3C的标准进行解析

 

4.

    普通流在第一层，浮动在第二层，相对定位+绝对定位在第三层。

    普通层里面的margin和padding值相互影响，对浮动和绝对定位一点影响都没有。

    浮动层的margin和padding值对普通层的文字和图片产生影响（浮动是为文字和图片而生），对第三层的margin和padding相互影响，因为他们是近亲。（只影响块中的实质内容，不影响块的边框和背景等）

    绝对定位对普通层的文字和盒子窗口一概不产生任何影响，对浮动层的margin和padding值产生影响，但是又独立于浮动层，在浮动层之上。
    另外，不论是普通层，浮动层，绝对定位层，里面又可以包含普通层（第一层），浮动层（第二层），绝对层（第三层）......理论上可以无限包裹下去。也就是，我们所以说的margin，padding值的相互影响，或者是第一层，第二层，抑或是第三层，都是相对于同一个父容器。并且这里所以的绝对定位没有加left(right),top(bottom)值，如果加了，这个绝对定位就跑到他最近的父辈（relative）的同一个层去了。

    都脱离了普通层，但浮动跟没有设置left(right),top(bottom)的绝对定位元素在同一个层，而且相互影响。其次，绝对定位对普通层的表现跟浮动一样，但不会将文字和图片挤出跟自己重合的区域。
      
     abosute最好别单独用，因为如果页面嵌套太深，有时不记得父标签设置了position:relative值（我今天犯了这个错误），这样这家伙会 一直往上找它父辈元素的relative(只有IE6会一直找，其它浏览器都是找父元素，不会找祖父辈元素，这是我刚才修改页面的时候惊奇发现的。)
     在和dl dt dd混合的时候，也最好别单独用abosute,不然在IE6/7里面会出现让你头疼的兼容问题。总之，遇到问题能不用则不用，如果用的话，最好跟position:relative一起用。

 

5.关于id和class：  根据经验，最好把id用于js，class用于css

 

6.

三角形图标：

border: 10px solid;
border-color: transparent transparent #333 transparent;
width: 0;