搭建项目，清除浏览器的默认样式

Love The Way You Lie 2022-10-17 08:17 178阅读 0赞

**`理念：`**

`1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。`

`1.*通配符，网页中所有的元素外边距和内边距都是0，项目列表类型是无。 *{margin: 0;padding: 0;list-style: none;}`

`2.重置列表元素`

`ul,ol{list-style:none;}`

`3.重置表格元素`

table\{ border-collapse: collapse;border-spacing: 0;\}

body {
        height: 100%;
        -moz-osx-font-smoothing: grayscale; /** 兼容火狐浏览器中设置字体 */
        -webkit-font-smoothing: antialiased; /** 字体抗锯齿渲染 */
        text-rendering: optimizeLegibility; /** 告诉渲染引擎工作时如何优化显示文本 */
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    }

html {
        height: 100%;
        box-sizing: border-box;
    }

*,
    *:before,
    *:after {
        box-sizing: inherit; /** 从父元素继承 box-sizing 属性的值 */
    }

a:focus,
    a:active {
        outline: none; /** 使绘制于元素周围的一条线无效 */
    }

a,
    a:focus,
    a:hover {
        cursor: pointer; /** 光标呈现为指示链接的指针（一只手） */
        color: inherit; /** 从父元素继承它的值 */
        text-decoration: none;  /** 没有文本装饰 */
    }

div:focus {
        outline: none;/** 使绘制于元素周围的一条线无效 */
    }

10.

/** ::-webkit-scrollbar：伪类选择器影响了一个元素的滚动条的样式*/
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    /** 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）*/
    ::-webkit-scrollbar-thumb {
        background: #d2d2d2;
        border-radius: 20px;
    }