网络视频直播系统 HashMap centos properties js快速排序 微信直播 Jenkins magento matrix parameters Notify.js vue路由 后台页面模板 jquery解析json数据 删除数组第一个元素 cad怎么重复上一次命令 nikto扫描web漏洞 less的比较级 flutter 缺点 python多线程 python3教程 python安装教程 java泛型 javasocket通信 java有哪些数据类型 java语言介绍 如何查看java版本 java定义变量 java获取时间 java获取 java项目下载 acmecadconverter popen bash命令 python封装 如何给黑白照片上色 苹果手机添加邮箱 工程html加密 go程序设计语言 mysql时间比较
当前位置: 首页 > 学习教程  > 编程语言

Vue统一样式(reset.css与border.css)

2020/11/24 9:21:01 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

reset.css 不同浏览器对相同标签的显示效果,有时候往往不同,那么在做项目的时候就需要对基本的样式进行设置,以达到在不同浏览器下显示效果是相同的,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;
}

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'

本文链接: http://www.dtmao.cc/news_show_400024.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?