vue如何統(tǒng)一樣式(reset.css與border.css)
更新時間：2022年05月27日 10:54:39 作者：楊爽的博客
這篇文章主要介紹了vue如何統(tǒng)一樣式(reset.css與border.css)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
統(tǒng)一樣式(reset.css與border.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
* 因，邊框是由偽元素區(qū)域遮蓋在父級
* 故，子級若有交互，需要對子級設置
* 定位 及 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'
vue基礎樣式應用
用于記錄自己經常用到的一些樣式
1、文本溢出隱藏
<template slot-scope="scope">
?? ?<div class="text-hidden">{{ scope.row.address }}</div>
</template>.text-hidden{
?overflow: hidden;
? text-overflow: ellipsis;
? white-space: nowrap;
}overflow: hidden; text-weight: ellipsis; white-space: normal; word-break: break-all; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
2.大的外邊框，類似卡片的樣式
.shopcheck {
? border: 1px solid #999;
? margin: 20px;
? border-radius: 10px;
? padding: 20px;
? box-shadow: 2px 4px 6px #999;
? background-color: #fff;
}3、詳情普通表格
<el-dialog title="店鋪發(fā)布詳情" :visible.sync="dialogVisible" width="50%">
? ? ? <div class="table-d">
? ? ? ? <table border="0" cellspacing="1" cellpadding="0">
? ? ? ? ? <tr>
? ? ? ? ? ? <td style="width: 100px">店鋪名</td>
? ? ? ? ? ? <td>{{ pub_shop.shop_name }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td style="width: 100px">店鋪聯(lián)系方式</td>
? ? ? ? ? ? <td>{{ pub_shop.shop_mobile }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td style="width: 100px">文章標題</td>
? ? ? ? ? ? <td>{{ msg.title }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>類型</td>
? ? ? ? ? ? <td>{{ msg.type }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>店鋪地區(qū)</td>
? ? ? ? ? ? <td>{{ msg.area}}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>店鋪詳細地址</td>
? ? ? ? ? ? <td>{{ msg.address }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>聯(lián)系號碼</td>
? ? ? ? ? ? <td>{{ msg.mobile }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>發(fā)布時間</td>
? ? ? ? ? ? <td>{{ msg.create_time }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>瀏覽量</td>
? ? ? ? ? ? <td>{{ msg.views }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>文章內容</td>
? ? ? ? ? ? <td>{{ msg.content }}</td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>圖片</td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? <el-image v-viewer="{movable: false,title:false}" ?:src="msg.images" class="img" ></el-image>
? ? ? ? ? ? </td>
? ? ? ? ? </tr>
? ? ? ? </table>
? ? ? </div>
? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? <el-button @click="dialogVisible = false">關閉</el-button>
? ? ? </span>
? ? </el-dialog>.table-d table {
? background: #999;
? width: 100%;
}
.table-d table td {
? background: #fff;
? padding: 20px;
? text-align: center;
? line-height: 1.5;
}4、input框長度限制
<el-input v-model="inData.name" maxlength="30" ?show-word-limit ?placeholder="請輸入通告標題"></el-input>
5、看圖插件的引入( viewer )這個插件比element的image圖片操作更多
npm install v-viewer --save
在main中配置
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults(
? {options:{
? ? 'title':false,
? },
?
})使用
<el-image v-viewer="{movable: false,title:false}" ?:src="msg.images" class="img" ><div slot="error" class="image-slot"> </div></el-image>和element模態(tài)框混用時，出現(xiàn)的層級錯亂
.el-dialog__wrapper{
? ? z-index: 2014 !important;
? }
? .v-modal{
? ? z-index: 2000 !important;
? }5、對element表格某列進行修改
<el-table-column prop="address" label="方式">?
?? ?<template slot-scope="scope">
? ? ? ?<span>{{ scope.row.condition | condition }}</span>
? ? ?</template>?
</el-table-column>表格里的圖片樣式
<template slot-scope="scope">
? ? ? <el-image v-viewer="{movable: false,title:false}" ?:src="scope.row.images[0]" class="tableimg" ?v-if="scope.row.images[0]" ></el-image>
</template>6、搜索框
<el-container class="imgsearch" ? ? ? ><el-input ? ? ? ? placeholder="請輸入要搜索標題或內容" ? ? ? ? prefix-icon="el-icon-search" ? ? ? ? v-model="input2" ? ? ? ? style="width: 300px; margin-right: 20px" ? ? ? ? @input="change" ? ? ? ? @change="search" ? ? ? ? maxlength="255" ? ? ? > ? ? ? </el-input> ? ? ? <div></div> ? ? ? <el-select ? ? ? ? v-model="value" ? ? ? ? placeholder="篩選信息類型" ? ? ? ? style="margin-right: 20px" ? ? ? ? :clearable='true' ? ? ? ? @clear='getList' ? ? ? > ? ? ? ? <el-option ? ? ? ? ? v-for="item in options" ? ? ? ? ? :key="item.value" ? ? ? ? ? :label="item.label" ? ? ? ? ? :value="item.value" ? ? ? ? > ? ? ? ? </el-option> ? ? ? </el-select> ? ? ? <el-button type="primary" @click="search">搜索</el-button> ? ? </el-container>
7、element 表格中的按鈕
<template slot-scope="scope"> ?? ?<el-button @click="pay(scope.row)" :plain="true" type="success" size="small">支付</el-button> ?? ?<el-button @click="look(scope.row)" size="small" type="warning" plain>查看</el-button> ?? ?<el-button @click="auth(scope.row)" :plain="true" size="small" type="primary">修改</el-button> ?? ?<el-button type="danger" plain size="small" @click="del(scope.row)" style="margin-right: 10px">刪除</el-button> </template>
9、引用svg圖標
<svg-icon :iconClass="classname[index]" class="icon"/>
10、輸入框只能輸入數(shù)字，限制長度
maxlength="4" oninput = "value=value.replace(/[^\d]/g,'')"
10、設置滾動條樣式
::-webkit-scrollbar {
? -webkit-appearance: none;
? width: 7px;
}
::-webkit-scrollbar-thumb {
? border-radius: 4px;
? background-color: rgba(222, 222, 227,.8);
? -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
// 隱藏火狐滾動條
? overflow:auto;
? /* overflow: scroll; */
? overflow-x:hidden;
? overflow-y: scroll;
? scrollbar-width: none;
? scrollbar-color: transparent transparent;
? scrollbar-track-color: transparent;
? -ms-scrollbar-track-color: transparent;11、element上傳走自己的請求
<el-upload ?? ?action="#" ? ? list-type="picture-card" ? ? :on-success="uploadImg" ? ? :on-remove="handleRemove" ? ? :limit="1" ? ? :file-list="fileList" ? ??? ?:http-request="upImg" > ?? ?<img src="../assets/img/upload.png" class="centerimg" /> </el-upload>
upImg(param) {
? ? ? const formData = new FormData();
? ? ? formData.append("file", param.file);
? ? ? this.$http
? ? ? ? .upLoadImg(formData)
? ? ? ? .then((res) => {
? ? ? ? ??
? ? ? ? })
? ? ? ? .catch((err) => {
? ? ? ? ?
? ? ? ? });
? ? },12、讓文本框textarea不可拖動
textarea{
?? ?resize: none;
}13.隱藏滾動條
?overflow: scroll; ? overflow-x:hidden; ? overflow-y: scroll; ? scrollbar-width: none; ? scrollbar-color: transparent transparent; ? scrollbar-track-color: transparent; ? -ms-scrollbar-track-color: transparent;
14.抓到element選擇器下面的那個彈窗
// ?:popper-append-to-body="false" ?加上這個字段 <el-select v-model="value" placeholder="選擇名稱" class="selectList-item" :popper-append-to-body="false" > ? ? ? ? ? ? ? <el-option ? ? ? ? ? ? ? ? v-for="item in options" ? ? ? ? ? ? ? ? :key="item.value" ? ? ? ? ? ? ? ? :label="item.label" ? ? ? ? ? ? ? ? :value="item.value"> ? ? ? ? ? ? ? </el-option> ? ? ? ? ? ? </el-select>
.index >>> .el-select-dropdown {
? color: #fff !important;
? background-color:#277fba !important;
? border: none;
? box-shadow: 0 0 10px rgba(255, 255, 255,.3);
}
.index >>> .el-select-dropdown .el-select-dropdown__empty{
? color: #fff !important;
}
.index >>> .el-select-dropdown .el-select-dropdown__item{
?color: #fff !important;
}
.index >>> .el-select-dropdown .hover{
? background: #186192 !important;
}以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)
vue中對數(shù)組的元素進行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關于Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)方法,需要的朋友可以參考下2023-05-05
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關于vue2.x中$attrs和$listeners的相關資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2和vue3的v-if與v-for優(yōu)先級對比學習
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級對比學習，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了從源碼角度來回答keep-alive組件的緩存原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了VUE實現(xiàn)彈出框點擊空白頁彈框消失,實現(xiàn)方法可以在Vue中實現(xiàn)彈出框然后通過點擊空白頁面來讓彈窗隱藏,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12
vue提供了mixins、extends配置項，最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue后臺管理如何配置動態(tài)路由菜單，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天遇到一個在vue文件中引入本地圖片的問題,于是有了這篇文章,本文主要給大家介紹了關于前端Vue頁面中展示本地圖片的相關資料,需要的朋友可以參考下2023-12-12
vue省市區(qū)三聯(lián)動下拉選擇組件的實現(xiàn)
本篇文章主要介紹了vue省市區(qū)三聯(lián)動下拉選擇組件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04