美文网首页
CSS初始化及私有前缀

CSS初始化及私有前缀

作者: 社会主义顶梁鹿 | 来源:发表于2020-06-19 12:50 被阅读0次

一、初始化

不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,需要对CSS初始化。

CSS初始化是指重设浏览器的样式。(也称CSS reset)

每个网页都必须首先进行CSS初始化才能保证浏览器的兼容性。

以下例子为京东的网页初始化:

/* 把所有标签的内外边距清零 */

        * {

            margin: 0;

            padding: 0;

        }

        /* 斜体的文字不倾斜 */

        em,

        i {

            font-style: normal;

        }

        /* 去掉li的小圆点 */

        li{

            list-style: none;

        }

        img{

            /* border: 0; 照顾低版本浏览器,如果图片外面包含了链接会有边框的问题 */

            border: 0;

            /* vertical-align: middle;取消图片底侧有空白缝隙的问题 */

            vertical-align: middle;

        }

        button{

            /* 鼠标经过button按钮时候鼠标变成小手 */

            cursor: pointer;

        }

        a{

            /* 统一所有链接的颜色,取消下划线 */

            color: #666;

            text-decoration: none;

        }

        a:hover {

            /* 鼠标经过链接变成红色 */

            color: red;

        }

        button,

        input {

            /* 按优先级默认设置字体风格  \5B8B\4F53 宋体*/

            font-family: Microsoft YaHei, Heiti SC , tahoma, arial, Hiragino Snas GB, "\5B8B\4F53";

        }

        body{

            /* 文字放大抗锯齿性 */

            -webkit-font-smoothing: antialiased;

            background-color: #fff;

            font: 12px/1.5, Microsoft YaHei, Heiti SC , tahoma, arial, Hiragino Snas GB, "\5B8B\4F53";

            color: #666;

        }

        /* 隐藏元素 */

        .hide,

        .none {

            display: none;

        }

        /* 清除浮动 */

        .clearfix:after{

            visibility: hidden;

            clear: both;

            display: block;

            content: ".";

            height: 0;

        }

        .clearfix{

            *zoom: 1;

        }

二、浏览器的私有前缀

(1)-moz-:代表Firefox浏览器的私有属性

(2)-ms-:代表IE浏览器的私有属性

(3)-webkit-:代表Safari、Chrome私有属性

(4)-o-:代表opera私有属性

border-radius: 10px

-moz-border-radius: 10px

相关文章

网友评论

      本文标题:CSS初始化及私有前缀

      本文链接:https://www.haomeiwen.com/subject/cxamxktx.html