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

网页制作 2024/12/28 佚名

3 2 1

前言

浏览器的一些默认样式，有时候真的是特别丑；虽然现在有现成的 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 */

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

CSS,浏览器,样式重置

标签：

CSS,浏览器,样式重置

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

评论“浅谈CSS 浏览器样式重置终结版”

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

暂无“浅谈CSS 浏览器样式重置终结版”评论...

www.whwtcm.com 无争山庄资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

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

CSS,浏览器,样式重置

CSS3动画之利用requestAnimationFrame触发重新播放功能

css3 响应式媒体查询的示例代码

评论“浅谈CSS 浏览器样式重置终结版”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

CSS,浏览器,样式重置

CSS3动画之利用requestAnimationFrame触发重新播放功能

css3 响应式媒体查询的示例代码

评论“浅谈CSS 浏览器样式重置终结版”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存