CSS公用式样与一些解决方案

CSS公用样式与一些解决方案
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; } //这些样式大家应该都明白这样是把原先的选择器自带的外填充和内填充去掉归0，也许有人还在用“*”通配符，但是这样是有缺点的会让代码变得冗余，尤其是子父级嵌套关系越深越麻烦，建议大家要尽量减少使用，建议多使用通用样式，可能选择器还比较少，但是我日常用到的选择器就这么些，如果大家有用到 pre fieldset blockquote 等选择器可以写到里面。


　　img { border: 0 none; vertical-align: top; } //img 图片标签的样式，目的都是一个让浏览器里默认图片是没有边框的，还有ie6里图片底部出现的空白间隔消失掉。有的爱用 display:block; border: none;但是这样写的话，都会有这样或那样的缺点，display: block; 这样写的话 你要让图片左右居中于一个盒子内的时候 你怎么办？ margin: auto; 这样吗？但是你要让外面的盒子有一个实际的宽度，如果是换成 vertival-align: top; 或是 vertival-align: middle; 的话那么这个实际的宽度就不必写了，只用加一个 text-align: center;  图片也不用加外填充了。至于 border: 0 none; 这里要写 0 再加一个 none，只是因为在写文本框 input 的时候，发现在不同的 windows 系统外观下，光写border:none或是border:0; 都不行，文本框的边框还是在的，所以就必须写 border: 0 none; 如果只用在img上还是可以写成 border: none; 但是写 input 的时候，要边框没有的时候还是要写 border: 0 none;

　　ul, li { list-style-type: none; } //这个容易理解，就是去掉ul,li的默认样式，就是前面自带的一些圆点、小方块之类的小修饰，当然可以自己自定义小图片修饰，也可以留着。

　　h1, h2, h3, h4, h5, h6 { font-size: 14px; } //根据要搭的页面标题字体大小来修改，或是把 h1 h2 h3 h4 这些选择器分开来写各自的字体大小。

　　body, input, select, button, textarea { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; } //搭页面的时候发现ie6里的文本框和下拉菜单... 等的字体大小不是正常的12号字体，所以在兼容性上不是很完美，所以就写了字体的大小为12号，然后在 firfox 里这些标签的字体默认又是宋体，所以又写上字体，然后 body 也要写字体大小和大小，所以就在 input 的前面加上了body，所以后面就不用再写了。

　　button { cursor: pointer; }/ //button 这个按钮的鼠标触发属性是默认的箭头，在用户体验上不是特别好，所以把鼠标触发的属性改成了小手。

　　i, em, cite { font-style: normal; } //可有可无，个人习惯，装饰的标签时有时会用到这些选择器 由于他们都有文字的默认属性，所以去掉了，在用到的时候不至于出问题。

　　body { background: #fff; color: #363636; line-height: 1.2; }/ /body 写背景色 是因为有的 windows 系统外观会把浏览器背景色也改成别的色，所以为了不会问题，就加上背景白色了，然后再加上文字颜色，字体大小和字体前面已经写了。

　　a, a:link { color: #222; text-decoration: none; }

　　a:visited {  }

　　a:active, a:hover { text-decoration: underline; } //这几个没必要说了吧。

　　a:focus { outline: none; } //点击链接时出现的虚线框消失，就是消除焦点。



　　.more { float: right; }

       .more a { font-weight: normal; font-size: 12px; } //搭页面的过程中，栏目或是标题栏肯定会有更多这个链接，所以加了这个样式，在后面就减少了 float: right 这个属性，意义不大

　　.fl { display: inline; float: left; }

　　.fr{ display: inline;  float: right; } //向左，向右浮动，只为了灵活运用




　　下面是 .fixed 和 .clear 这两个清除浮动的样式说明

　　.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

　　.fixed { display: block; min-height: 1%; }

　　*html .fixed { height: 1%; }

　　.clear { diplay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }



//着重说明一下.clear里的 !important 问题

因为我们在写子级盒子浮动的时候 肯定会写到 float: left; margin或是 padding，还有 width 等等，在 .clear的属性里把尽可能会发生冲突的属性加了!important，浏览器就会把这些属性的优先级排到最前，并且ie6也是支持读取!important的，ie6浏览器只要读到相同的属性，以最后的属性为优先级，但是他是对于在同一样式内的，而不是同一样式内的属性他就不会以最后的属性为优先了