【html5/css3】
关注
分享
扫一扫
@Umbrella
纸上得来终觉浅，绝知此事要躬行
展开
-
audio / video 媒体标签在IOS端触发不了的两种解决方法，亲测有效~
什么？？音视频标签在IOS手机上播放不了，你一定踩了这个坑，来看看怎么解决吧~原创 2022-04-02 10:03:48 · 5758 阅读 · 0 评论 -
vue解决element-ui popover点击取消时 popover的显示与隐藏问题
最近在项目中使用 elementui 中的table组件popover进行开发，官网的案例如果使用数据遍历，操作列使用 <template></template> 做 插槽的话就不行了。记录下解决办法：1. popover演示效果2. 解决办法如下在 el-popover 中加属性 :ref="popover-${scope.$index}"取消 el-button 按钮加 @click="scope._self.$refs[popover-${scope.$index.转载 2021-03-31 10:50:25 · 1878 阅读 · 3 评论 -
vue组件样式穿透 /deep/ 、 ＞＞＞ 和 ::v-deep
在 style 经常用 scoped 属性实现组件的私有化时，要改变 element-ui 某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用 /deep/，如：.conBox /deep/ .el-input__inner{ padding:0 10px;}注意，/deep/ 在 vue 3.0或者新版scss-loader不支持 会报错如果 /deep/ 报错，可采用 ::v-deep ，效果基本一样，有人说 ::v-deep 能加快编译速度，但是我在网上原创 2021-03-31 09:48:19 · 1698 阅读 · 0 评论 -
使用CSS隐藏元素滚动条【兼容主流浏览器】
如何隐藏滚动条，同时仍然可以在任何元素上滚动？首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置 overflow：auto 样式即可。想要完全隐藏滚动条只需设置 overflow：hidden 即可，但是这样一来将导致元素内容不可滚动。时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。Firefox浏览器对于 Firefox ，我们可以将滚动条宽度设置为none：scrollbar-width: none; /*原创 2021-02-26 18:05:53 · 34770 阅读 · 0 评论 -
firefox火狐浏览器outline:none去除虚框失效的坑【兼容坑】
问题描述：H5界面在点击按钮时，因为登录按钮获得焦点，按钮上出现了难看的虚框，强迫症患者表示谁也忍受不了…… 解决方案找了很多方法，比如直接在css样式中加这行代码button:focus,button:actived{outline:none;}又比如在js代码中解决$("a,input,button").focus(function(){this.blur()});然而，尝试了无数次，都失败了，为什么呢？因为笔者用的是火狐浏览器……需要用一条火狐浏览器私有的命令，这样b.原创 2020-12-15 09:48:01 · 519 阅读 · 0 评论 -
css transform导致字体像素模糊的问题解决办法（多种方法，亲测有效）
https://blog.youkuaiyun.com/weixin_38414352/article/details/77100377?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.contr原创 2020-11-26 18:29:01 · 10143 阅读 · 1 评论 -
去除input[type=number]的默认样式且解决一下maxlength失效问题
去除input[type=number]的默认样式input[type=number] { -moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}解决maxlength失效maxlength 是对于 type=原创 2020-11-24 20:27:19 · 509 阅读 · 0 评论 -
移动端rem，机型适配布局界面配置，摆脱花里胡哨样式出现（一套操作适配所有机型）
移动端rem，机型适配（再配合lass，sass，按照设计图来设置比例，本文使用的是640；还有750的）(function () { document.addEventListener('DOMContentLoaded', function () { var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) deviceWidth = 640; document.document原创 2020-11-05 18:00:49 · 1062 阅读 · 0 评论 -
ElementUI中el-table表格的滚动条在合计上边【Element-UI】
默认滚动条是在下边的,不好看,这里改一下Element-UI中的样式需要样式穿透修改，使用/deep/即可/deep/{ .el-table { overflow-x: auto; } .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper { overflow: visible; } .el-table::after { position: relative; }原创 2020-07-13 11:31:42 · 2906 阅读 · 5 评论 -
【html5/css3】网站变灰是如何实现
网站灰了是怎么回事？一探究竟：图片本身依然是彩色，但呈现是灰色，可判断为渲染导致的。通过审查元素，在当前元素上并没有发现特别的设置；于是一层层向上查找，最终在 html 上发现了 filterhtml { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); /* filte转载 2020-06-29 13:44:32 · 514 阅读 · 0 评论 -
【html5/css3】css圆环的六种实现方式
效果图：html<div class="circle1">第一种方法</div><div class="circle2">第二种方法</div><div class="circle3"> <div class="circle_3">第三种方法</div></div><div class="circle4">第四种方法</div><div class="circ转载 2020-06-15 10:24:52 · 3032 阅读 · 0 评论 -
【html5/css3】用伪类来生成箭头
1、箭头类型1原理如图所示：我们可以利用::before和::after生成一个正方形框（用边框即可），接着将框旋转45度就是箭头的形状了！具体代码如下所示：.icon-share { ..... /*这里的点点点代表具体情况，具体属性*/ position: relative;}.icon-back::before{ content: ""; width: 12px; height: 12px; border: sol转载 2020-06-11 21:05:16 · 1241 阅读 · 0 评论 -
【html5/css3】CSS实现各种图形(常用图形)
1.正方形{ width: 200px; height: 100px; background: red;}2.长方形{ width: 200px; height: 100px; background: red;}3.圆{ width:100px; height:100px; background:red; border-radius:50%; /* 水平、垂直半径为宽高的50% */}4.椭圆{ .转载 2020-05-19 17:39:37 · 967 阅读 · 0 评论 -
【html/css】纯css3实现三角形以及带边框的三角形
图示代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...转载 2020-04-30 22:53:16 · 901 阅读 · 0 评论 -
【html5/css3】rem 和其他单位的区别 ？
先说一下几个的特性px: 是显示屏上显示的每一个小点，为显示的最小单位，这个长度与你看到的显示屏中的文字屏幕像素没有任何关系。1.1 px 像素值是固定的，不会随着屏幕宽度变而改变em: 是相对单位。相对于当前对象内文本的字体尺寸， 如果当前行内文本的字体尺寸没有被设置过，那则相对于浏览器的默认尺寸，默认是 16px。2.1 em 的值并不是固定的。2.2 em 会继承父级元素的...转载 2020-03-18 14:39:26 · 196 阅读 · 0 评论 -
【html5/css3】Html中的空格符
1、Html中空格  不断行的空白（1个字符宽度）  半个空白（1个字符宽度）  一个空白（2个字符宽度）  窄空白（小于1个字符宽度）2、css 的方式空格① CSS中当 white-sp...原创 2020-03-11 22:51:50 · 966 阅读 · 0 评论 -
【小程序与公众号】微信小程序去除button标签默认样式
微信小程序去除button样式小程序中原始的button按钮样式是这样的但是我们需要一个隐藏式的按钮，就是首页能点击的地方都需要触碰到这个按钮，所以需要去除button的默认样式一般我们去除样式都是这样的button{ border:0; background:transparent; }执行的效果是这样的还是有边框的，所以这样是不够。因为button的边框样式是通过...原创 2019-11-26 03:04:41 · 637 阅读 · 0 评论 -
【html5/css3】妙用Unicode字符集（三种方法）
前言这些字符属于 unicode 字符集，所以，你的文档需要声明为 UTF-8；需要注意的是：有的字符在不同的浏览器下表现不太一样比如小雪人☃ 在 firefox 和 Chrome 下不太一样，钻石 ◆ 在 IE 下要比Chrome下要大一点有的字符在某个浏览器下不会显示；当然原因并不是字符代码的问题，而是浏览器的bug但是，98%的字符都能在所有浏览器下正常显示的，不过如果你真的...原创 2019-11-01 11:32:34 · 2172 阅读 · 0 评论 -
【html5/css3】css字体溢出省略号处理（三种方法实现）
单行内容隐藏.text{ overflow: hiddden; text-overflow: ellipsis; white-space: nowrap;}效果如图：适用范围：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。多行内容隐藏.text{ display: -webkit-box; -web...原创 2019-10-20 11:45:43 · 945 阅读 · 0 评论 -
【html5/css3】css中的flex弹性布局学习总结
一、简要介绍css3最喜欢的新属性之一便是flex布局属性，用六个字概括便是简单、方便、快速。flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 下图为flex的相关概念的示意图 使用flex布局的容器（flex container），它内部...原创 2019-08-13 23:40:10 · 496 阅读 · 0 评论 -
【html5/css3】css盒子模型的概念以及对css盒子模型的理解
首先，我们来看一看css盒子模型是什么？我们可以知道，网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。如下图：CSS盒子模型就是在网页设计中经常用...原创 2019-08-10 22:55:30 · 1019 阅读 · 0 评论 -
【html5/css3】四种方法解决 li与li之间有看不见的空白间隔
场景需求：有时，在写页面的时候，会需要将这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个元素之间会出现大约8px左右的空白间隙，下面举例说明看看这种现象：对应html：<div class="box"> <ul> <li class="part1">red</li> <l...原创 2019-08-11 15:18:15 · 4214 阅读 · 0 评论 -
【html5/css3】css中清除浮动的五种方式及其原理剖析
清除浮动的四种方式及其原理理解本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。一、为什么要清除浮动在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题...原创 2019-08-12 15:52:14 · 682 阅读 · 1 评论 -
【html/css】从清除浮动 讲解 BFC 原理及应用
CSS中清楚浮动在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...原创 2019-09-22 02:06:23 · 308 阅读 · 1 评论 -
【html5/css3】iframe是什么，怎么使用，它的作用是什么，优缺点又有哪些（为什么成为"弃子"？）
一、iframe是什么iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。首先它的标签写法是：<frameset > <frame src= "要连接的页面"></frame></frameset>iframe用于设置文本或图形的浮动图文框或容器。frameborder设定围绕图文...转载 2019-10-08 00:30:24 · 1729 阅读 · 0 评论 -
【html5/css3】水平居中，垂直居中以及水平垂直居中方法
水平居中默认html:<div class="parent"> <div class="child">child</div></div>默认css: .parent{ width: 400px; height: 80px; line-height: 80px; background: #ccc; ...原创 2019-08-13 21:07:49 · 2445 阅读 · 0 评论