随笔分类 - H5和CSS3
摘要：localStorage 与 sessionStorage localStorage 与 sessionStorage 很多小伙伴对它们俩都很熟悉了； 最熟悉的莫过下面这2条 1,localStorage 存储的数据没有时间限制,理论上永久有效;除非手动清除。 sessionStorage 存储的数
阅读全文
摘要：flex布局概念： 父级元素称为：容器（container） 容器的子元素称之为：项目（item） flex-grow的简单介绍 flex-grow：用于指定弹性元素在可用空间增加时的放大比例。 它决定了弹性元素在可用的父容器中【分配额外空间的比例】。 flex-grow 默认值为 0，表示弹性元素
阅读全文
摘要：element-ui表格某一列无数据显示-- 很多时候，表格的某一列可能是没有数据的。 空着了不好看，ui小姐姐会说显示 -- 这个时候，小伙伴是怎么做的呢？ 使用循环来判断是否为空，然后赋值为-- <template> <el-table :data="tableData" style="widt
阅读全文
摘要：Flex 意为 “弹性布局”，是一种在开发静态页面过程中常用的布局模式。 开发购物车使用flex布局的时候遇到的一种场景：子元素被挤压 具体如图所示， 当商品名称超出两行文字时显示省略号， 是使用flex布局的。 占位较多的子元素会去挤压别的子元素。 解决方法很简单， 就是使用flex-shrink
阅读全文
摘要：html 布局结构如下 <div class="outerBox"> <div class="innerBox"></div> </div> 第一种 使用flex .outerBox { height: 400px; background-color: rgb(12, 243, 232); disp
阅读全文
摘要：元素水平居中的第一种方式 子元素不需要宽度也可以 <div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: pink; } .son { width:
阅读全文
摘要：解决办法一 .main{ display: flex; justify-content: space-around; flex-wrap: wrap; } .son{ width：100px } //利用伪类after来处理，宽度与子元素宽度一致 //但是专业那个方式值有些时候可以，有些时候仍然不行
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } div { width: 100px; height: 1
阅读全文
摘要：<style> .box { width: 183px; height: 130px; overflow: hidden; border: 1px solid pink; } div img { width: 193px; height: 130px; transition: all 0.4s; }
阅读全文
摘要：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; m
阅读全文
摘要：大家都知道，web端的字体在正常情况下，最小只能够是12px; 但是有些时候，可能需要字体小于12px 那么如何解决这个办法了 可以使用css3的缩放属性scale 如果字体的大小是10px; 那么我们将字体大小设置成20px,使用-webkit-transform: scale(0.5); 这样字
阅读全文
摘要：html 默认：<input type="number" /></br> 处理：<input type="number" class="deal-with" /> css 去除控件 <style type="text/css"> .deal-with::-webkit-textfield-decor
阅读全文
摘要：有时，你需要修改第三方组件的CSS; 然而你直接修改是不可以的， 但是我们非要去修改第三方的组件； 此时可以使用==》深层选择器 >>> /deep/ ::v-deep 可以帮助你。 这样就可以修改第三方组件样式了， 然而有写时候，你是按照这样的方法去修改的吗，那为什么还不对了？ 因为你的结构层级不
阅读全文
摘要：将地址栏的参数变成json序列化。 GetQueryJson1 () { let url = this.$route.query.redirect; // 获取当前浏览器的URL (redirect=>根据自己的业务去写) let arr = []; // 存储参数的数组 let res = {};
阅读全文
摘要：我发现在vue脚手架中不同的版本，对视频标签的处理是不同的哈。 在vue脚手架2.0中。离开视频video标签。所在的页面。 视频标签会自动关闭。 但是在vue3.0的脚手架中却不会自动关闭
阅读全文
摘要：线性渐变 #app { width: 200px; height: 200px; background: linear-gradient(to bottom, red, green); /*从顶部到底部 to是到 效果顶部红 底部绿 你还可以多些几个颜色 如果还有其他的颜色，可以继续写在后面*/ }
阅读全文
摘要：``` animation: 动画名称 花费的时间 运动的曲线(动画的运动速度) 何时开始(是否有延迟) 播放次数 播放完后是否相反(默认是从正向); 注意第6个参数。默认是永远正向播放。 alternate 是第一次正向播放，第二次反向播放。 alternate-reverse 是第一次反向播放，第二次正向播放 -webkit-animation: move 1.6s linear 0s inf
阅读全文
摘要：今天大家在浏览B站，腾讯视频，等网站时，有没有发现一个现象，网站变成灰色的了。 是不是跟平常不一样了呢，这是因为今天（2020.4.4）是全国哀悼日， 所以网站这些就变成灰色的呢。 我去看了一下腾讯的做法，腾讯是将所有的图片换成了灰色的。 我觉得的缺点是：如果网站非要展示大量图片，不可能每一张图，
阅读全文
摘要：一进入这个页面就开始调用这个函数 在mouted中调用这个函数 离开这个页面 关闭摄像头 beforeDestroy(){ this.cancalCloseVideo(); } methods:{ cancalCloseVideo(){ this.MediaStreamTrack && this.M
阅读全文
摘要：一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; justify-content: space-between; } 动态计算元素的宽 除了支持 - 还有
阅读全文
