vue项目笔记（4）-常用的基础样式（reset.css与border.css）

逃离我推掉我的手 2021-09-16 01:58 287阅读 0赞

**reset.css**

不同浏览器对相同标签的显示效果，有时候往往不同，那么在做项目的时候就需要对基本的样式进行设置，以达到在不同浏览器下显示效果是相同的，reset.css的作用就在于此。所有，大家很有必要收藏一下，在做项目的时候直接使用即可。

**具体代码：**

@charset "utf-8";
    html {
        background-color: #fff;
        color: #000;
        font-size: 12px
    }
    
    body,
    ul,
    ol,
    dl,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    figure,
    form,
    fieldset,
    legend,
    input,
    textarea,
    button,
    p,
    blockquote,
    th,
    td,
    pre,
    xmp {
        margin: 0;
        padding: 0
    }
    
    body,
    input,
    textarea,
    button,
    select,
    pre,
    xmp,
    tt,
    code,
    kbd,
    samp {
        line-height: 1.5;
        font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    small,
    big,
    input,
    textarea,
    button,
    select {
        font-size: 100%
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    b,
    strong {
        font-weight: normal
    }
    
    address,
    cite,
    dfn,
    em,
    i,
    optgroup,
    var {
        font-style: normal
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
        text-align: left
    }
    
    caption,
    th {
        text-align: inherit
    }
    
    ul,
    ol,
    menu {
        list-style: none
    }
    
    fieldset,
    img {
        border: 0
    }
    
    img,
    object,
    input,
    textarea,
    button,
    select {
        vertical-align: middle
    }
    
    article,
    aside,
    footer,
    header,
    section,
    nav,
    figure,
    figcaption,
    hgroup,
    details,
    menu {
        display: block
    }
    
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "\0020"
    }
    
    textarea {
        overflow: auto;
        resize: vertical
    }
    
    input,
    textarea,
    button,
    select,
    a {
        outline: 0 none;
        border: none;
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        padding: 0;
        border: 0
    }
    
    mark {
        background-color: transparent
    }
    
    a,
    ins,
    s,
    u,
    del {
        text-decoration: none
    }
    
    sup,
    sub {
        vertical-align: baseline
    }
    
    html {
        overflow-x: hidden;
        height: 100%;
        font-size: 50px;
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
        color: #333;
        font-size: .28em;
        line-height: 1;
        -webkit-text-size-adjust: none;
    }
    
    hr {
        height: .02rem;
        margin: .1rem 0;
        border: medium none;
        border-top: .02rem solid #cacaca;
    }
    
    a {
        color: #25a4bb;
        text-decoration: none;
    }

**border.css**

该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。

**具体代码：**

@charset "utf-8";
    .border,
    .border-top,
    .border-right,
    .border-bottom,
    .border-left,
    .border-topbottom,
    .border-rightleft,
    .border-topleft,
    .border-rightbottom,
    .border-topright,
    .border-bottomleft {
        position: relative;
    }
    .border::before,
    .border-top::before,
    .border-right::before,
    .border-bottom::before,
    .border-left::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::before,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-topright::after,
    .border-bottomleft::before,
    .border-bottomleft::after {
        content: "\0020";
        overflow: hidden;
        position: absolute;
    }
    /* border
     * 因，边框是由伪元素区域遮盖在父级
     * 故，子级若有交互，需要对子级设置
     * 定位 及 z轴
     */
    .border::before {
        box-sizing: border-box;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        left: 0;
        width: 100%;
        height: 1px;
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        top: 0;
        width: 1px;
        height: 100%;
    }
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
        border-top: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-right::before,
    .border-rightbottom::before,
    .border-rightleft::before,
    .border-topright::after {
        border-right: 1px solid #eaeaea;
        transform-origin: 100% 0;
    }
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::before {
        border-bottom: 1px solid #eaeaea;
        transform-origin: 0 100%;
    }
    .border-left::before,
    .border-topleft::after,
    .border-rightleft::after,
    .border-bottomleft::after {
        border-left: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
        top: 0;
    }
    .border-right::before,
    .border-rightleft::after,
    .border-rightbottom::before,
    .border-topright::after {
        right: 0;
    }
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::after {
        bottom: 0;
    }
    .border-left::before,
    .border-rightleft::before,
    .border-topleft::after,
    .border-bottomleft::before {
        left: 0;
    }
    @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
        /* 默认值，无需重置 */
    }
    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
        .border::before {
            width: 200%;
            height: 200%;
            transform: scale(.5);
        }
        .border-top::before,
        .border-bottom::before,
        .border-topbottom::before,
        .border-topbottom::after,
        .border-topleft::before,
        .border-rightbottom::after,
        .border-topright::before,
        .border-bottomleft::before {
            transform: scaleY(.5);
        }
        .border-right::before,
        .border-left::before,
        .border-rightleft::before,
        .border-rightleft::after,
        .border-topleft::after,
        .border-rightbottom::before,
        .border-topright::after,
        .border-bottomleft::after {
            transform: scaleX(.5);
        }
    }
    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
        .border::before {
            width: 300%;
            height: 300%;
            transform: scale(.33333);
        }
        .border-top::before,
        .border-bottom::before,
        .border-topbottom::before,
        .border-topbottom::after,
        .border-topleft::before,
        .border-rightbottom::after,
        .border-topright::before,
        .border-bottomleft::before {
            transform: scaleY(.33333);
        }
        .border-right::before,
        .border-left::before,
        .border-rightleft::before,
        .border-rightleft::after,
        .border-topleft::after,
        .border-rightbottom::before,
        .border-topright::after,
        .border-bottomleft::after {
            transform: scaleX(.33333);
        }
    }

使用方法：在vue项目中的入口文件main.js中引入即可。

// 在入口文件中引入基本样式
    import './assets/styles/reset.css'
    import './assets/styles/border.css'