css3
土垚金鑫
软件
展开
-
css3 使用flex时,头部出现抖动问题解决方法
问题描述:在开发中发现头部出现抖动现象,造成抖动的现象有多个,如下:①,页面中使用v-if和v-else时 同时使用img标签,img标签的宽度不同,会有抖动现象②,使用css3使用flex布局时,造成抖动现象。解决方法如下:使用 min-height 可解决问题(ps:这个问题是在我项目环境下解决的,不同的问题可能是不同的环境下造成的)...原创 2020-04-23 16:44:44 · 2039 阅读 · 0 评论 -
Css3- flex布局管理
Css3- flex布局管理CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行/列。对于许多应用程序,弹性盒子模型提供了对块模型的改进,因为它不使用浮动,flex容器的边缘也不会与其内容的边缘折叠。**弹性盒模型,分老版与新版老版本的我们通常称之为box新版本...原创 2020-02-06 12:07:26 · 189 阅读 · 0 评论 -
css3 transform(2D)的使用
transform的使用transform 属性允许你修改CSS视觉格式模型的坐标空间transform 属性 , 只对 block 级元素生效!transfrom的基本属性有:①translate:平移②rotate:旋转③skew:倾斜④transform-origin:基点的变换⑤scale:缩放⑥matrix:矩阵。旋转;平移;缩放;(1) translate的用法X...原创 2020-02-05 13:24:29 · 217 阅读 · 0 评论 -
css3 过渡transition的语法
css3 过渡transition的语法transition:众所周知,css效率极高,其变化的过程往往都是在一瞬间完成,速度极快。CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐...原创 2020-02-01 22:16:26 · 615 阅读 · 1 评论 -
css动画--使用图标进行顺时针与逆时针转圈
css动画–使用图标进行顺时针转圈代码如下:<template> <div style="width:1300px;height: 600px;border: 1px solid red;margin:0 auto"> <div class="circel"> </div> </div&g...原创 2020-01-21 16:08:13 · 5203 阅读 · 0 评论 -
css3实现动画
链接地址可参考动画http://wanlimm.com/77201809146901.html注意卡顿问题。后续再补充文档原创 2020-01-16 20:14:51 · 169 阅读 · 0 评论 -
vue项目中使用阿里iconfont图标
本文是在vue项目中集成阿里iconfont图标库,本文添加的图标结果案例如下图所示。具体步骤如下:1,进入阿里 https://www.iconfont.cn 图标库,登录自己的账号密码,如果没有账号,请先注册账号后登录。2,在iconfont首页 点击“图标管理”后选择“我的项目”,如下图所示。3,新建项目,在图标管理中,选择如下图所示的紫色按钮图标,点击后会出现新建项目的弹框,如...原创 2020-01-14 16:47:50 · 6502 阅读 · 1 评论 -
CSS3 box-shadow 属性使用案例
对css3 中的box-shadow的使用案例如下几个案例!截图如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>boxShadow应用</title> <style> ...原创 2020-01-08 20:27:03 · 361 阅读 · 0 评论 -
vue项目中 el-tree 的扩展下拉图标放置右侧
vue项目中原有的扩展下拉图标默认是放在左侧的,现在需求:是放置在右侧。如下两个图所示:图一 为默认,图二为已放置右侧的图标代码如下:<template> <div class="tree-scroll"> <el-input style="width: 180px;margin-top: 10px" p...原创 2020-01-08 11:17:29 · 4401 阅读 · 0 评论 -
css3中 flex:1的使用
案例1:设置div的flex:1 会得到剩余的宽度假设a是父组件,用flex布局设置子控件左右居中,width:400px;display:flex;b是子控件,居左。width:150px;c是子控件,居右。width不给,设置flex:1;那么c.width = a.width-(a的margin和padding[左右])-b.width–(b的margin和padding[左右])-...原创 2020-01-08 10:13:31 · 11314 阅读 · 0 评论 -
css 修改浏览器滚动条样式
本文是基于谷歌浏览器将原有的滚动条样式进行修改,修改结果如下所示。代码如下:<style> ::-webkit-scrollbar{ width: 5px; height: 5px; } ::-webkit-scrollbar-track-piece{ background-color: rgba(0,0,0...原创 2020-01-07 16:24:38 · 313 阅读 · 0 评论 -
vue项目中el-tree 支持横向和纵向滚动条设置
vue项目中el-tree 支持横向和纵向滚动条设置,如下所示。①纵向滚动条容易设置,只需要在el-tree组件中设置height即可②横向滚动条稍微复杂,如下代码<template> <div class="tree-scroll"> <el-input style="width: 180px;margin-top: 10px" ...原创 2020-01-07 10:27:25 · 21087 阅读 · 4 评论 -
div+css 元素水平居中 及垂直居中的几种写法
CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。 谈及HTML元素居中展示,涉及到水平居中和垂直居中,以及水平垂直居中。由于HTML文档流是水平方向的,所以水平方向上的布局控制比垂直方向要简单很多,居中也是如此。不过(水平)垂直居中还是有很多种写法,至少一只手是数不过来了,本文列出几种,并进行简单比较。一、水平居中 使用CSS控制水平居中很简单:...原创 2020-01-03 10:08:36 · 1260 阅读 · 0 评论