css样式
关注
分享
扫一扫
你蠢哭我咯
个人博客：www.adebibi.com
展开
-
-webkit-box-orient: vertical；本地编译、打包失效
autoprefixer可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题。多行文本设置-webkit-box-orient: vertical;属性后，autoprefixer不生效问题。//在scss中/*! autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */// 在css中/* autoprefixer: off */-webkit-box-orient: vertical;/*转载 2021-07-21 12:57:21 · 992 阅读 · 0 评论 -
一些css实用小技巧
1.CSS变量实现鼠标移上效果 html<button class="btn"> <span&转载 2018-08-06 16:59:03 · 624 阅读 · 0 评论 -
div超出宽度自动换行
div{ width: 500px; word-break: break-all; word-wrap: break-word;}原创 2018-07-25 11:57:01 · 21908 阅读 · 0 评论 -
css文本在标签内平均分布
div{text-align: justify; } div:after{display: inline-block ; content: ''; padding-left: 100%; }转载 2018-06-14 09:29:20 · 31563 阅读 · 0 评论 -
vue在ios返回上一路由白屏
原文链接问题描述：进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决原因是，经过排查，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩解决的理论：用于最重要的html 容器是container，然而因...转载 2018-06-04 21:20:04 · 6299 阅读 · 0 评论 -
移动端人民币符号 '￥'显示
人民币符号少一横杠将代码中的'￥'更改为 ¥原创 2018-06-04 13:55:36 · 2305 阅读 · 0 评论 -
text-shadow文本长阴影
<template> <div class="container"> <h1>文本阴影</h1> </div></template><script&原创 2018-05-27 09:48:49 · 853 阅读 · 0 评论 -
vue监听滚动条-吸顶
mounted(){ window.addEventListener('scroll', this.handleScroll)}handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop co...转载 2018-05-17 16:42:47 · 1718 阅读 · 0 评论 -
css实现瀑布流布局
vue<div class="main"> <ul class="clear"> <li v-for="(item,$index) in items" :key="$index"> <img :src="item.imgSrc" alt=""> </li> </ul></div><script> export defa原创 2018-03-08 14:16:43 · 1278 阅读 · 1 评论 -
移动端文本垂直居中
文本垂直居中display: flex;align-items: center;//垂直居中justify-content: center;//文本居中justify-content: flex-start;//文本居左justify-content: flex-end;//文本居右元素垂直居中，demo<!DOCTYPE html><html><head><meta charset=原创 2018-02-27 09:19:03 · 1216 阅读 · 0 评论 -
css背景图片
background-image:url('../../img/up.png');background-repeat:no-repeat;background-position: right center;background-size: 0.7rem 100%;原创 2018-01-18 11:11:03 · 1032 阅读 · 0 评论 -
移动端公共样式
@charset "utf-8";/* 禁用iPhone中Safari的字号自动调整 */html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */ -webkit-overflow-scrolling : touch; height: 100%;转载 2018-01-23 13:10:26 · 2876 阅读 · 0 评论 -
css3实现动画对号选择按钮
html<i class="icon-span" :class="{'icon-span-select' : isShow}"></i>css//对号样式.icon-span{ display: inline-block; background-color: #fff; border-radius: 100%; border: 1px solid #ccc; position:原创 2017-12-26 10:26:23 · 5737 阅读 · 0 评论 -
常用样式伪元素:after,:before下三角
html<transition name="fade" mode="out-in"> <div class="child" v-if="isShowChildMenu" @click="getRouter4"> <span @click="getRouter5" :class="{active:shop.navActive == 1}">购买商品</span>原创 2017-12-26 10:19:06 · 1542 阅读 · 0 评论 -
select在ios中选项空白
出现这个问题是因为粗心吧。解决了好久。。。最后发现是个笑话。。。<select name="" id=""> <option value="1" label="1"></option> <option value="2" label="2"></option> <option value="3" label="3"></option></select>这样写在安卓上正常显示。但是在io原创 2017-12-14 10:27:23 · 3309 阅读 · 1 评论 -
利用css3实现计算元素高度。实现高度居中
CSS3使用Calccalc()使用通用的数学运算规则，但是也提供更智能的功能： >使用“+”、“-”、“*” 和 “/”四则运算； >可以使用百分比、px、em、rem等单位； >可以混合使用各种单位进行计算； >表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； >表达式中有“*”和原创 2017-06-29 11:12:00 · 9010 阅读 · 0 评论 -
浏览器标签页icon
<link rel="shortcut icon" href="/static/img/logo.ico" type="image/x-icon"><link rel="icon" href="/static/img/logo.ico" type="image/x-icon">原创 2017-10-11 10:41:37 · 1278 阅读 · 0 评论 -
vue引入css
第一种全局引入： 在main.js中import './assets/iconfont/iconfont.css' //注意'./'一定要加不然会报错第二种局部引入： 在组件中<style scoped> @import '../assets/iconfont/iconfont.css';</style>原创 2017-08-01 10:54:09 · 4698 阅读 · 0 评论