今天小编跟大家讲解下有关浅谈CSS 浏览器样式重置终结版 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈CSS 浏览器样式重置终结版 的相关资料，希望小伙伴们看了有所帮助。
前言
浏览器的一些默认样式 有时候真的是特别丑； 虽然现在有现成的 UI 框架 但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题 最后将给出完整的重置样式表; 如果有遇到其它样式问题 评论区提建议 我将持续更新
样式问题解决
浏览器默认在 body 加上 8px 的 margin 一般我写的时候都会把这 8 px 的 margin 去掉
body{margin:0;}想做个整屏显示的页面 就一页 发现设置div {height:100%;} 无效 其实是整个 html,body 就这么高 你需要设置 html 和 body 的高度
html,body{height:100%;}做窗口满屏的另一种方法 使用定位来做
.element{ display:absolute; top:0;bottom:0; left:0;right:0;}文本处理的几个样式说明 (white-space word-break overflow text-overflow )
在写代码的时候 我们经常是想让一个容器中的文本在一行显示 除非有换行符,则可以这么玩
.element{white-space:nowrap;}常见的例子是溢出加省略号
.ellipsis{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}从后台来的文本是换行符rn 但是前端是 br 换行 这时可以设置 div 的white-space
.element{white-space:pre-wrap;}一些文本容器需要设置溢出滚动和文本截断
div,li{ overflow-x: auto; word-break: break-all;}浏览器元素大小计算问题 box-sizing 有content-box|border-box|inherit 三种方式 content-box 表示设置的是内容的大小 border-box 表示设置的是包含边框和内补的大小
content-box 加内补的时候会撑大元素 而 border-box 加内补的时候会缩小内容区大小,我一般喜欢用 border-box
*,*:before,*:after{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }浮动问题,当 内层元素浮动时 外层元素的高度会丢失 这时可以设置下外层元素找回高度
<ul style="overflow:hidden;"> <li>浮动元素</li> <li>浮动元素</li></ul>无序列表和有序列表的列表样式； 大部分情况下 我们会拿有序列表来做导航菜单 这时候会出现有小圆点或数字的情况,可以去掉 需要用的时候再设置回来即可
ul,ol{list-style-type:none;}无序列表和有序列表会有40px 的上下外边距和 16 像素的左内补,如果做导航用 需要去掉
ul,ol{margin:0;padding:0;}并排的两个 div 做的按扭 设置display:inline-block 时 会产生间隔；
产生的原因是因为你加了回车或空格导致的 解决办法是把这两个 div 包在另一个 div 里面 并设置父元素 div 的font-size:0 ,最后再把子元素的字体设置回原来的值
<div sytle="font-size:0"> <div class="inline-block-div">div1</div> <div class="inline-block-div">div2</div></div>iframe 5 像素问题 当在一个div 中设置一个iframe 并设置 iframe 宽高都是 100% 的时候（div 固定宽高） 会发现 div 有滚动条;查资料说是 iframe 编译出来里面的html代码中的两个头部声明 引起的5px的高度差 所以会高出包裹的div 导致产生滚动条。解决办法是设置 iframe 块状显示
iframe{display:block;}textarea 右下角的倒三角有时候会觉得很难看 其实它本意是让 textarea 可以更改大小； 去掉的办法为设置不可调节大小
textarea{resize: none;}input textarea select 在选中的时候 都有一层难看的外边框,这个看个人情况去除
textarea,input,select{outline:0;}a 链接的默认样式 鼠标停留的样式 和访问过的样式（记录的是 href 访问过）不太好看 可以设置得相对美观点; 默认黑色 停留蓝色
a{color:#333;text-decoration:none;}a:hover{color:#0080ff;}表格相关样式优化
table {border-spacing:0;border-collapse:collapse;}td,th{padding:0;}默认的字体如果不改变的话 也是很丑的
body{font-family: arial;}html5 元素块状显示
article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section {display:block;}修改默认 placeholder 的颜色
::-webkit-input-placeholder{color:#999;}::-moz-placeholder{color:#999;}::-moz-placeholder{color:#999;}:-ms-input-placeholder{color:#ccc;}修改滚动条样式,默认的滚动条有点丑
::-webkit-scrollbar { width: 7px; height:7px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb { background-color: #999;}::-webkit-scrollbar-track { background-color: #F5F5F5;}快速清除浮动 使用 after 和 before
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}* html .clearfix { zoom: 1;} *:first-child+html .clearfix { zoom: 1;}一些常用样式技巧
在一个方型的弹出框中 我想在右上角加个删除按扭,这里可以设置父元素的定位为相对定位 子元素为绝对定位 然后设置子元素的位置即可解决
.parent{position:reletive;}.child{position:absolute;top:2px;right:2px;}文本垂直居中,可以设置行高和容器高度一致即可文本垂直居中
.element{height:50px;line-height:50px;}使用 CSS3 的 transform 使任意元素垂直居中
.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}完整样式文件
body{margin:0;font-family: arial;}html,body{height:100%;}*,*:before,*:after{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }div,li{ overflow-x: auto; word-break: break-all;}ul,ol{ list-style-type:none; margin:0; padding:0;}iframe{display:block;}textarea{resize: none;}textarea,input,select{outline:0;}a{color:#333;text-decoration:none;}a:hover{color:#0080ff;}table {border-spacing:0;border-collapse:collapse;}td,th{padding:0;}article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section {display:block;}::-webkit-input-placeholder{color:#999;}::-moz-placeholder{color:#999;}::-moz-placeholder{color:#999;}:-ms-input-placeholder{color:#ccc;}::-webkit-scrollbar { width: 7px; height:7px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb { background-color: #999;}::-webkit-scrollbar-track { background-color: #F5F5F5;}.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}* html .clearfix { zoom: 1;} *:first-child+html .clearfix { zoom: 1;}以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
