前端开发小知识

1. vertical-align:midden;去掉图片默认间距。
2. 谷歌不支持12号以下的字体。
3. 浮动的盒子不设置宽高，容易掉盒子。
4. 行高可以继承。
5. 文字居中
   1. text-align:center;不能精确定位
   2. 尽量使用padding-left/padding-right
6. 行内元素只能设置左右margin，转换为块状元素才可以设置上下margin
7. 子盒子不能根据static定位，只能根据absolute、relative、fixed定位。
8. padding不能设置负值。
9. 选择器尽量不要超过三个，多了会造成层叠属性困难。
10. 浮动、定位都可以使行内元素转换为行内块元素。
11. 能浮动不定位。
12. 做logo图片
    1. 文字移出：text-indent：-5000px;
    2. 给a标签七位数的em/八位数的px会出现bug，链接点不到。
    3. logo图片做a标签的背景。
13. 同一个父级元素的盒子要么都设置浮动，要么都不设置。
14. 行高：line-height;也可以撑开盒子。
15. 文字不设置行高，默认是包含文字的盒子的高度。
16. 设置了定位不给left/top值会出现bug。
17. a标签之间有3个像素的距离。
18. 给html文档相邻的同级盒子设置浮动，会顶部对齐。
19. 浮动的盒子遮挡不住标准流的文字。
20. 定位的盒子比浮动的盒子层级高。
21. 块元素的宽可以继承。
22. Div:hover a{}鼠标悬浮到div方后对a标签进行操作。
23. 所有浮动的盒子尽量都给宽高。
24. 子盒子不占位置，父盒子没有高度，下面的元素会顶上来。
25. 子盒子在父盒子中水平居中：先定位left:50%;然后margin-left:-子盒子宽度的一半。
26. opactiy:0;隐藏盒子，透明。
27. 关闭a的链接：javascript:;(javascript:void(0))。
28. a标签href属性值为“”，效果是刷新页面；属性值为”#”,效果是调到页面顶部。
29. left的权限比right高，同时设置right属性不起作用，top比bottom权限高。
30. position:relative/static不能给行内元素设置宽高。只能是absolute、fixed、浮动。
31. 层级
    1. 浮动/标准的盒子代码位置越往下，层级越高。
    2. 层级一样，代码在后面的盒子会压住前面的盒子。
    3. 浮动的盒子会压住标准的
    4. 定位的盒子会压住浮动的
    5. 层级的高低和占不占位置无关，relative占位置，也比不占位置的浮动层级高。
    6. 定位中：abselute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。
    7. 层级为0的盒子，也比标准流和浮动的高。
    8. 层级为负数的盒子，比标准流和浮动的低。
    9. 层级不取小数。
    10. 给定z-index的值为层级的值。（不给默认为0）
32. 浮动的盒子千万不要让他超出父盒子。超出父盒子的部分会影响下面盒子中的浮动的子盒子。
33. 隐藏盒子
34. overflow：hidden; 隐藏盒子超出的部分。
35. display: none; 隐藏盒子，而且不占位置。(用的最多)
36. visibility: hidden; 隐藏盒子，而且占位置。
37. opacity: 0; 隐藏盒子，而且占位置。
38. Position/top/left/...-999px 隐藏盒子，而且占位置。（相对定位relative）

34、浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。

35、使用rgba比使用opacity方便，rgba背景透明，但是内容不透明。