![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
css
吃瓜群众欢乐多
菜鸟烦恼多
展开
-
退款详情列表显示--纵向退款进度条显示
dom代码import { View } from "@tarojs/components"import { formatDate } from '@/utils/timeFormat'import './index.less'export default (props) => { return <View className='steps-box'> {props.list?.length && props.list.map((item, index).原创 2022-05-30 10:13:24 · 209 阅读 · 1 评论 -
图标动画-大小动画-css
.vote-prize-btn { width: 45px; height: 90px; position: absolute; top: 23px; right: 0; animation: mymove 1s infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }@keyframes my原创 2021-12-30 14:22:13 · 256 阅读 · 0 评论 -
打印功能-打印预览,打印部分页面
window.print()默认打印整个页面,可是我只想打印页面的部分样式,最简单的一种方法是使用 css 的媒体查询有针对打印的样式,用@media print设置打印时除了要打印的内容,其它全部隐藏即可<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-原创 2020-11-17 16:48:04 · 313 阅读 · 0 评论 -
IntersectionObserver-监听元素是否进入了设备的可视区域之内
demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>监听元素是否进入了设备的可视区域之内</title> <style> ul,li{ list-styl...原创 2020-04-27 11:40:39 · 1266 阅读 · 0 评论 -
flex布局,左边右边高度固定,左边溢出的内容鼠标滚轮显示,左边滚动右边视图不动
flex布局,左边右边高度固定,左边溢出的内容鼠标滚轮显示,左边滚动右边视图不动代码如下<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2019-12-26 17:29:51 · 2002 阅读 · 0 评论 -
vue组件-移动端上下布局-顶部和底部固定,中间内容自定义
如图布局<template> <div class="container flexbox-column"> <div class="header-container"> <slot name="header"></slot> </div> <div class="sectio...原创 2019-11-05 14:31:47 · 7259 阅读 · 0 评论 -
鼠标聚焦时,title和图标往上移动,动画效果
实现一个效果,鼠标聚焦时,title和图标往上移动,动画效果。效果图如下1、鼠标不聚焦时显示2、鼠标聚焦时显示如图写一个demo来阐述我的实现原理<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...原创 2019-09-12 15:05:17 · 463 阅读 · 0 评论 -
记录我排除CSS的bug的小经验
如图样式有问题,弹出层应该随着鼠标上下滚动而保持相对于agent定位,我们该如何解决这个不知原因的bug呢?1、我们先看下拉框的css的样式代码如图所示2、先跟正常的对比对比后发现正常情况下,top的值会随着鼠标上下滚动而改变大小,有bug的没能上下滚动。3、猜想,js导致,或者这个组件的父元素的某css属性影响了子元素的4、js的话需要查看组件源代码,我查看组件源代码,但是发...原创 2019-07-30 16:43:40 · 133 阅读 · 0 评论 -
rem原理 - 1
rem响应式 html{ font-size: calc(100vw/750);//1rem=1px }举例<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...原创 2019-04-15 16:32:15 · 127 阅读 · 0 评论 -
rem原理 - 2
github地址<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...原创 2019-05-28 15:00:10 · 240 阅读 · 0 评论 -
CSS居中小谈-上下左右居中
http://web.jobbole.com/88804/内联元素居中方案水平居中设置:行内元素 设置 text-align:center; Flex布局 设置display:flex;justify-content:center;(灵活运用,注意兼容性和前缀)垂直居中设置:父元素高度确定的单行文本(内联元素) 设置 line-height = height; 父...转载 2016-11-26 12:05:59 · 275 阅读 · 0 评论 -
BFC模式
1、BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。BFC有一下特性:内部的Box会在垂直方向,从顶部开始一个接一个地放置。Box垂直方向的距离由margin决定。属于同原创 2016-10-20 16:53:28 · 1540 阅读 · 0 评论 -
div垂直居中显示
如图所示,怎么处理不定宽度和高度的盒子在大盒子中自动居中显示解决方法:父亲盒子相对定位position:relative;子盒子绝对定位position:absolute;再加上top:50%;left:50%;transform:translate(-50%,-50%);原创 2016-12-24 18:57:05 · 337 阅读 · 0 评论 -
[css]:黏性页脚,页面上中下布局;当页面内容不足时,使得页脚footer紧贴屏幕底部,内容过长是,页脚紧贴内容后面
效果图【截取自网上】使得内容不足时,content撑开页面使得footer置底,内容充足时footer还是置底flex布局https://codepen.io/zxjzx/pen/KYbooMtable布局https://codepen.io/zxjzx/pen/NmeYJN网格布局:https://codepen.io/zxjzx/pen/VNqxvJcalc计算https:...原创 2019-05-22 11:04:14 · 525 阅读 · 0 评论 -
[css]:一个左中右布局,最小宽度为600px,左侧为200px,右侧是300px,中间自适应。中间优先显示
我是标题我是html<div class="content"> <div class="left">左边</div> <div class="center">中</div> <div class="right">右</div></div>我是css.content{ disp...原创 2019-04-11 11:51:57 · 894 阅读 · 0 评论 -
弹性布局:display:flex相关知识点与常见应用场景
小游戏:http://flexboxfroggy.com/ 通过这个游戏可对弹性布局的属性进行了解透彻。 flex容器的基本概念flex-direction:设置主轴方向,row,row-reverse,cloumn,column-reverseflex-wrap:是否换行,nowrap,wrap,wrap-reverseflex-flow:flex-direction flex-w...原创 2019-03-01 18:04:42 · 724 阅读 · 0 评论 -
页面响应式网络布局原理
window.onresize=function(){}:改变窗口事件,即窗口或框架被调整大小时发生;新建一个空白css链接<link rel="stylesheet" type="text/css" href="" id="styleCss">当页面宽度>960时,调用css/1.css当页面宽度>480时,调用css/2.css……<...原创 2016-10-29 19:12:58 · 542 阅读 · 0 评论 -
全兼容的多列均匀布局问题--来自微信公众号-“前端大全”
css实现两端对齐的3种方法:http://www.cnblogs.com/PeunZhang/p/3289493.html法一:display:flexCSS3 弹性盒子(Flexible Box 或 Flexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为。当然 flex 布局应用于移动端不错,PC 端...转载 2016-10-21 08:55:20 · 627 阅读 · 0 评论 -
vue通过style或者class改变样式
通过style改变样式<div :style="{ 'min-height': size + 'px' }"></div><div :style="[{ 'min-height': size + 'px' },{color:'red'}]"></div><div :style="{ 'opacity': value ? 0.5 :...原创 2018-10-30 11:40:30 · 2360 阅读 · 0 评论 -
由display:in-block设置带来的元素间间距怎么消除
网上参考资料链接:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/2个元素之间有间隙,那么问题来了,为什么会出现间隙? 原因是inline-block允许空格,出现空隙的罪魁祸首就是包括换行在内的空白符。如何消除间隙? 1、对父级元素设置font-size:0; 2、元素转载 2016-10-04 11:14:39 · 1996 阅读 · 0 评论