vue 小记

占满单个页面的方法:

index.html 里设置样式,在主app.vue设置宽高为百分百即可

        html,body{
            height: 100%;
            width: 100%;
            border:hidden;
            overflow:hidden;
        }
引入样式重置样式
  • 方法一(reset.css)
    直接引入外部reset文件


    vue 小记_第1张图片
    reset

reset.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td ,textarea,input { margin:0; padding:0;  }
address,cite,dfn,em,var, i {font-style:normal;}
body {font-size: 16px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma';  color: #222; background: #eee; }
table { border-collapse:collapse; border-spacing:0; }
h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: normal; }
button,input,select,textarea{font-size:100%;}
fieldset,img{border:0;}
a { text-decoration: none; color: #666; background: none }
ul, ol { list-style: none; }
:focus{ outline:none;}
.clearfix{ clear: both; content: ""; display: block; overflow: hidden }
.clear{clear: both;}
.fl{ float: left; }
.fr{float: right;}

  • 方法二 (normalize.css)
    npm 安装


    image.png

引入


vue 小记_第2张图片
image.png

Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案,注!更推荐使用normalize.css
官网

http://nicolasgallagher.com/about-normalize-css/

你可能感兴趣的:(vue 小记)