常见CSS注意问题

1. 初始化css 有哪些

因 为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览 器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
最简单的CSS Reset内容寥寥几行就能完成：
* { padding: 0; margin: 0; border: 0; }
* 匹配的是最低级的匹配所以比较慢
* {
margin: 0;
padding: 0;

border:0;

outline:0;
-webkit-text-size-adjust:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-user-select: -moz-none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

---

2. 排版里什么时候用absolute 和releative, fixed

 

---

3. 当几个元素应用的是同一个样式的时候，可以加一个类

 

---

4. backtoTop按钮 的排版 （横板和竖版的位置不一样） 为什么横板不放在底边

 

---

5. float之后带来的坍塌的问题原因及如何解决clearfix
“伟大的塌陷”
如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。
塌陷的直观对立面更不好：当上面的块级元素自动扩展以适应浮动元素时，段落间的文本流中会出现非自然的空白换行，而且没有有效的方法来修正这个问题

方法：通过是定义一个class"clear"来清除浮动；
claer的样式如下：

/*-----万能Float闭合-----*/
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {display: inline-block;} /* for IE/Mac */
.clear {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
}
/*-----万能Float闭合-----*/
.clear{
height:0px;
clear:both;
font-size:0px;
line-height:0px;
zoom: 1;
}
让浮动元素后面紧跟一个用于清除浮动的空标签；

<div class="fl"></div>
<div class="clear"></div>

方法：overflow 方法
overflow 方法在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动。
这个方法有着较好的语义性，因为他不需要额外元素。但是，如果需要增加一个新的 div 来使用这个方法，其实就和空 div 方法一样没有语义了。
而且要记住，overflow 属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。

<div style="overflow: hidden;">
<div class="fl"></div>
</div>

 

猛击DEMO

---

6. 头文件里的属性，哪几个viewport是需要写的，都是神马意思

标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

猛击这里参考链接

 

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

---

7. 有加了hover的，不要忘记加手形

cursor:pointer;

---

8. 写css的时候选择器应该怎样写 了解几种,有些选择过长了

* 通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。
#X
#+id 名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为 javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的 地步？
.X
.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，我想也是日常前端人员用到最多的选择器了。

X Y
li a {
text-decoration: none;
}

目 前非常常用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不 宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。 使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。 

X
a { color: red; }
ul { margin-left: 0; } 标签选择器，优先级仅仅比*高，常用于css reset。



X:link X:visited X:hover X:active
a:link { color: red; }
a:visted { color: purple; }

伪类选择器，visted已被访问过的样式，hover鼠标经过的样式，link未被访问的样式。三种伪类选择器常用于链接，但不是说只适用于链接，可惜的是IE6只支持将这三种伪类选择器作用于链接。
这里明河说明一点，由于CSS优先级的关系(后面比前面的优先级高)，这几个伪类的书写顺序，一般是link、visted、hover、active。

还有 X ＋ Y  ， X > Y  ， X ～ Y

 

---

9. 中英文参杂的（最后提交的时候应该避免有中文）

 

---

10 . @charset "UTF-8"; 为什么要用这个

表明CSS文件的页面编码为UTF-8。。如果这个CSS的文件编码也是UTF-8的话。。那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文，如果CSS的文件编码和页面不一致的话。那么这个CSS文件的中文则会显示为乱码。。特别是定义中文字体的时候。就不能正确识别。。其他则没有多大影响

---

11. 用来做参考的文件最后要注释掉或者删掉

 

---

12. 最好用chrome的developer看一下有没有报错