1. 程式人生 > 實用技巧 >CSS0013: CSS 通用樣式

CSS0013: CSS 通用樣式

1,

/* 通用樣式 */

*,::after,::before {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: #f5f5f5
}

html {
    width
: 100%; min-height: 100% } body { height: 100%; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color: #666; background-color: #fff } a { color: #333; text-decoration: none } a:hover { text-decoration: none } ol,ul { list-style: none } input { border: none
; outline: 0; -webkit-appearance: none } button { border: none; outline: 0 } .fl { float: left } .fr { float: right } .pr { position: relative } .pa { position: absolute } .pf { position: fixed } .db { display: block } .dlb { display: inline-block } .dl
{ display: inline } .dn { display: none } .t-center { text-align: center } .clearfix::after,.clearfix::before { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both } .v-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%) } .p-middle { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%) } .v-body { display: inline-block; vertical-align: middle } .hide { display: none } @media screen and (max-width:299px) { html { font-size: 70px } } @media screen and (min-width:300px) { html { font-size: 80px } } @media screen and (min-width:350px) { html { font-size: 90px } } @media screen and (min-width:370px) { html { font-size: 100px } } @media screen and (min-width:375px) { html { font-size: 26.66666667vw } }

2,