css
hyq_h
这个作者很懒,什么都没留下…
展开
-
sass样式
1.使用@引入时,前面加~body { background: url("~@/assets/images/bg.png");}2.变量 $$width: 5em;#main { width: $width;}原创 2021-02-23 13:49:40 · 180 阅读 · 0 评论 -
vue中v-html设置样式无效的问题解决方案
**场景:**例如使用v-html加载一些后台返回的一段富文本HTML代码,富文本里包含图片,在手机上图片宽度可能会溢出或者需要设置一些样式。解决方法:使用vue的深度作用选择器 >>> 即可。<div v-html="htmlContent" class="rich"></div> <style scope> .rich>>> img{ display:block; max-width: 100%}</styl转载 2021-02-02 10:50:06 · 1561 阅读 · 0 评论 -
css的animation动画和@keyframes动画轨迹
比较复杂的动画可以使用animation属性animation:剧本名 动画时间 延迟时间 运动曲线 动画次数 是否保持动画最终效果 是否还原也有动画 播放状态 参数1:剧本名 参数2:动画时间 参数3:延迟时间 参数4:运动曲线 linear匀速 steps() 分步骤 参数5:动画次数,写几就代表几次,写infinite 代表无限次 参数6:是否保持动画最终的状态 forwards 就代表保持,不加就代表不保持 参数7:是否要复原时也用动画效果,加一个alterna原创 2020-11-19 14:59:00 · 648 阅读 · 0 评论 -
css圆角的设置 border-radius
https://www.runoob.com/css3/css3-border-radius.htmlborder-radius:10px;1. 四个值 - border-radius: 15px 50px 30px 5px;2. 三个值 - border-radius: 15px 50px 30px;3. 两个值 - border-radius: 15px 50px//单独设置四个...原创 2020-01-02 15:35:18 · 131 阅读 · 0 评论 -
css滚动条样式
vertical-align属性 : 设置元素的垂直排列用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐它的值比较多:baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit比如说top就是垂直对齐文本的顶部常用vertical-align:middle来居中对齐...原创 2019-10-30 19:10:58 · 350 阅读 · 0 评论 -
弹性布局
c3中绝对最常用的布局 : 弹性布局display : flex;flex-direction: // 修改主轴方向 row(默认值) 主轴为水平方向,起点在左端。 row-reverse 主轴为水平方向,起点在右端。 column 主轴为垂直方向,起点在上沿。 column-reverse 主轴为垂直方向,起点在下沿justify-conte...原创 2019-11-01 10:31:38 · 85 阅读 · 0 评论 -
css多种居中方式
位移居中 :position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/* 垂直居中 */left: 50%;transform: translateX(-50%);块级元素居中 :display:block; /* 必须是块级元素 */margin: 0 auto;弹性布局 :di...原创 2019-12-31 16:44:43 · 152 阅读 · 0 评论 -
文字单行省略和多行省略
单行省略<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...原创 2019-12-31 16:17:40 · 175 阅读 · 1 评论 -
文本和图片水平居中对齐
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equi...原创 2019-12-22 18:14:41 · 520 阅读 · 0 评论 -
子元素的宽高设置成和屏幕大小一样
给个定位 , 再上下左右距离是零就可以实现了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...原创 2019-11-22 14:53:22 · 442 阅读 · 1 评论