CSS公用式样与一些解决方案
日期：2014-05-17 浏览次数：20681 次
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
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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
