浏览器默认样式及reset

写在前面

首先纠正一个易错概念。div并不是生来就是块元素，而是每一个浏览器都有一套默认的css样式（优先级最低），默认样式里会把div设置成display: block;还有margin，padding等。这就是不一样浏览器初始化样式不一样的缘由。也是为何要作css reset的缘由。

注：chrome等能够在调试工具里看到默认样式，是不可修改的，置灰的，以下图。各浏览器默认样式详情请参考《浏览器默认样式对比表》。

一、浏览器默认样式

这里无需过多赘述，最直观的就是上表，给你们几个地址：

一、浏览器默认样式对比表 很是详细的表格，不过貌似仍是暴力reset比较省力。。。

二、css知多少（4）——解读浏览器默认样式 里面有一部分折叠起来的代码（仔细找，要点开才看获得），解读的很是详细。另外，强烈推荐阅读整个系列，后面会附上目录连接

三、浏览器默认样式表.xlsx 我的将1当中的图表作成了excel，更方便筛选与查看，有兴趣的同窗能够下载备用。

四、brower_default.css 我的将2中的样式保存成了css，方便保存和查看，有兴趣的同窗可下载备用

二、reset推荐

浏览器样式初始化两种流派，一种所有清零——reset，一种按照绝大多数浏览器的样式进行统一——normalize。

两者都有道理，可是也许是笔者比较懒，仍是更倾向于reset，所以在这里推荐一款极简的reset代码，尽可能作到能少则少，能够根据我的习惯在此基础上添加，但愿你们也能够出一份力来优化。

至于normalize流派，可自行参考《normalize.css源码》，里面注释很是详细，阅读以后对浏览器样式初始化的理解有很是大的帮助。

PC：

/*基础部分IE8+*/

body, div, span, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, pre, form, label, button, input, textarea, select, table, thead, tbody, tfoot, tr, th, td, img, a, fieldset, option, em, iframe, :before, :after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;} /* box-sizing : border-box 可让设计稿与代码的数字一致，详情可自行百度*/

body, button, input, select, textarea{font: 12px/1 "Microsoft YaHei", "微软雅黑", sans-serif;resize: none;outline: none;border: none;} /* 表单元素不会继承字体样式*/

ul, ol{list-style: none;}

table{border-collapse: collapse;border-spacing: 0;}

a, a:link, a:visited, a:hover, a:active{text-decoration: none;} /* 通常顺序 LoVe & HAte 这样不会把其余状态覆盖*/

img{border: none;} /* IE10如下 a标签中的img会有border*/

textarea{overflow: auto;} /* IE中textarea会有灰色的滚动条区域*/

/*可选部分*/

H5新增标签的reset（待添加）

但愿你们多多贡献，持续更新……

 

M:

注：移动端有不少坑，各个机型都有可能出不一样问题，若是你们遇到了，请多反馈，咱们实时更新，谢谢

/*基础部分*/

body, div, span, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, pre, form, label, button, input, textarea, select, table, thead, tbody, tfoot, tr, th, td, img, a, fieldset, option, em, iframe, :before, :after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;} /* box-sizing : border-box 可让设计稿与代码的数字一致，详情可自行百度*/

body, button, input, select, textarea{font: 12px/1 "Microsoft YaHei", "微软雅黑", sans-serif;resize: none;outline: none;border: none;border-radius: 0;-webkit-appearance: none;} /* 表单元素不会继承字体样式*/

ul, ol{list-style: none;}

table{border-collapse: collapse;border-spacing: 0;}

a, a:link, a:visited, a:hover, a:active{text-decoration: none;} /* 通常顺序 LoVe & HAte 这样不会把其余状态覆盖*/

/*可选部分*/

body{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} /* 去除表单元素点击以后的高亮 */

body{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} /*禁止用户选择，也可设为其余值容许用户选择*/

body{-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none;} /*字体大小不随着设备变化*/

 

经常使用功能：

 /*清除浮动*/

.clearfix:after{content:"";display:table;clear:both;}

 

/*伸缩盒*/

.box{display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: box;}
.item{width: 0;-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;flex: 1;-webkit-flex: 1;-ms-flex: 1;} /*width:0 是防止元素没有内容时塌缩*/

 

/*设置placeholder样式*/

::-webkit-input-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* WebKit browsers */
:-moz-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Mozilla Firefox 19+ */
:-ms-input-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Internet Explorer 10+ */

 

/*input[type=date]个元素样式，三角，叉，字体颜色等*/

::-webkit-datetime-edit{}
::-webkit-datetime-edit-fields-wrapper{}
::-webkit-datetime-edit-text{}
::-webkit-datetime-edit-year-field{}
::-webkit-datetime-edit-month-field{}
::-webkit-datetime-edit-day-field{}
::-webkit-inner-spin-button{}
::-webkit-calendar-picker-indicator{}
::-webkit-calendar-picker-indicator{}

 

但愿你们集思广益，多多添加……

写在最后

没有几句本身说的话，总显得是偷懒，乱写一些感悟和小技巧吧。

一、ie8+的话，不少属性能够用：

好比display:table，能够根据内容自适应大小，且有块元素的表现

再好比能够利用box-sizing:border-box;来使width=content+padding+border。不再用担忧padding，border对width的影响了（bootstrap设置了*{box-sizing:border-box;}，好暴力。。。）

再好比清除浮动能够写成{content:"";display:table;clear:both;}，等等……

二、a标签的样式顺序应为a, :link, :visited, :hover, :active。可记为LoVe & HAte，具体百度下吧，大概就是不按这个顺序写的话，某些状态样式会被覆盖掉，你永远看不到。

三、float的设计初衷是为了实现文字环绕，并非为了布局。塌陷，清除浮动的知识点，请参考《CSS知多少系列》

四、display:inline-block;很好用，可是元素间会有空隙。这是由于浏览器会把“换行”解析成空白符，会占位。因此要么不换行，要么父元素font-size:0;

五、一行排列多个元素，且之间有间距，最后一个不要间距，可设置父元素的margin为负值。好比，子元素间距都是15px，父元素就能够偷偷地设置margin为-15px，固然爷爷元素须要overflow:hidden；

六、列表里只有第一个不要上边框。试试ul li+li{border-top:1px solid #ccc;}

七、css很好玩，试试只用一个div画出各类图形，可参考：http://one-div.com/

#div{width: 96px; height: 48px; margin: 20px 20px; float: left; border-color: #000000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative;}
#div:before{width: 12px; height: 12px; top: 50%; left: 0; content: ""; position: absolute; background-color: #ffffff; border: 18px solid #000000; border-radius: 100%;}
#div:after{width: 12px; height: 12px; top: 50%; left: 50%; background-color: #000000; border: 18px solid #ffffff; border-radius: 100%; content: ""; position: absolute;}

参考资料：

《浏览器默认样式对比表》 很强大的一个表

《CSS知多少系列》 强烈推荐！！每段信息量都很大！

《normalize.css源码》 源码里注释很是详细

《CSS Reset ，你选对了吗？》 列举了4种主流reset的方案

《Reset CSS:只选对的，不选"贵"的》 能够看看