CSS reset和常用样式

什么是Css Reset

在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

很多前端上来就是一句全局Reset,这样会降低浏览器的渲染速度,而且还会导致一些不必要的元素也重置了外边距和内边距。其实Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改。

*{ margin:0; padding:0; }

这次我常常用到的reset.css,到具体的项目中还会有一些修改。

body, div, h1, h2, h3, h4, h5, h6, dl, dd, dt, p, a, form, select, input, span, ul, ol, li, figure {
    margin: 0px;
    padding: 0px;
    text-indent: 0;
    font-weight: normal;
}
body {
    margin: 0 auto;
    width: 100%;
    color: #000;
    font-family: "Microsoft YaHei", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}

ul, ol {
    list-style: none;
    text-indent: 0;
}

img {
    border: 0px;
}

/* link */
a {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: none;
}
.fl {
    float: left;
}

.fr {
    float: right;
}

.center {
    text-align: center;
}

//单行文本超出边界用省略号
.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

/*清除浮动*/
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

猜你喜欢

转载自blog.csdn.net/dreamingbaobei3/article/details/88805098
今日推荐