网页制作 
首页 > 网页制作 > 浏览文章

浅谈CSS 浏览器样式重置终结版

(编辑：jimmy 日期: 2024/12/25 浏览：3 次 )

前言

浏览器的一些默认样式，有时候真的是特别丑； 虽然现在有现成的 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; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

浮动问题,当 内层元素浮动时，外层元素的高度会丢失，这时可以设置下外层元素找回高度

<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;
} /* IE6 */
*:first-child+html .clearfix {
    zoom: 1;
} /* IE7 */

一些常用样式技巧

在一个方型的弹出框中，我想在右上角加个删除按扭,这里可以设置父元素的定位为相对定位，子元素为绝对定位，然后设置子元素的位置即可解决

.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; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}
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;
} /* IE6 */
*:first-child+html .clearfix {
    zoom: 1;
} /* IE7 */

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：CSS3动画之利用requestAnimationFrame触发重新播放功能
下一篇：css3 响应式媒体查询的示例代码