常用基础样式reset.css和border.css 说明及分享

傷城~ 2023-07-05 14:56 17阅读 0赞

## 1. reset.css ##

不同浏览器对部分相同标签往往有不同的显示效果，区别不大吧却又多少会影响开发，那么就需要写代码时对基本样式进行设置，使不同浏览器下显示效果相同。这时候，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;
    }

## 2.border.css ##

前端开发的朋友应该都听过“1像素边框”问题。这个问题涉及“CSS像素”和“物理像素”。因为有些手机的屏幕分辨率较高，可能是2-3倍屏幕，当css样式为`border:1px solid;`，在2倍屏下，显示的并不是1个物理像素，而是变成2个物理像素。这时，为了解决这个问题，就得引入border.css了。

**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);
        }
    }