随笔分类 - html css
html及css遇到的相关问题
摘要：“高亮”功能，个人觉得没必要再解释什么了。作为一名程序猿，天天都会接触高亮：写代码时的语法高亮；使用搜索引擎时的搜索结果高亮。作为一名前端，如果你做过与搜索相关的功能，那么你很有可能就实现过高亮，本文也主要从前端的角度复盘一下“高亮”功能实现的关键知识点。 高亮实现思路 对用户的输入进行分词得到关键
阅读全文
摘要：<el-form v-on:submit.native.prevent></el-form> 在 form 表单中，加上 v-on:submit.native.prevent
阅读全文
摘要：img[src=""],img:not([src]) { opacity: 0; }
阅读全文
摘要：问题描述 在上传图片过程中，同一个 input 选择同一张图片 不会触发 onchange事件，在选择不同图片时，会多次触发onchange事件；刚开始在选择完成后，删除重新初始化一个input ，这个方法有点山炮！！！ 解决方案 不要采用删除当前input[type=file]这个节点，然后再重新
阅读全文
摘要：BFC 是什么？ 首先，BFC（block formatting context），中文直译：块格式化上下文。BFC的概念，无论是在W3C CSS2.1官方文档，还是在MDN文档中，都是十分难读懂的。再翻阅了大量博客后，首先必须了解，视觉格式化模型这个概念： 视觉格式化模型 CSS 视觉格式化模型(
阅读全文
摘要：粘性定位 是 相对定位（relative）和 固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。著作权归作者所有。 它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；posi
阅读全文
摘要：指出错误观念 许多开发者认为一个元素的包含块就是他的父元素的内容区，其实这是错误的（至少不完全正确）！一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。下面我们看看盒模型：当浏览器展示一个文档的时候，对于每一个元素，它都产生了一个盒
阅读全文
摘要：今天看百度百科，看到其中一页所有图片背景全都设置为了灰白色，于是研究了番，发现是应用了filter滤镜这个属性。 其中还有毛玻璃属性：blur filter css详细属性：
阅读全文
摘要：1、盒子模型（box model） 在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin） 2、标准盒模型与怪异盒模型 对比两种模型的区别 1.标准盒模型 标准盒模型（W3C盒子模型），设置的width或heig
阅读全文
摘要：需求：用css设置渐变边框通过border-image来实现渐变色边框 但是border-image无法实现圆角，所以换一个思路：通过padding来实现，给父节点设置渐变背景，通过padding模拟边框（此处的padding值就是border需要的值），注意父元素和子元素的border-radiu
阅读全文
摘要：含义 margin:auto是具有强烈计算意味的关键字，用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值，一侧auto，则auto为剩余空间大小 (2) 如果两侧均是auto，则平分剩余空间 左边距是20px,右边距是80px。这里son宽度是200px，容器是300px，
阅读全文
摘要：对元素的margin设置百分数时，百分数是相对于自身包含块的width计算（包含块传送门），不管是margin-top/margin-bottom还是margin-left/margin-right。当然，padding的原理也是一样的。 如果没有为元素声明width，此时元素框的总宽度包括外边距取
阅读全文
摘要：针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 滚动条样式/颜色组成部分 如下为代码： *要实现单个div里面的内容滚动，需要满足三个条件： 1、div必须设定固定的高度，不能使用百分比或 auto 等弹性值。 2、其中的内容高度必须超过它本身的高度。 3、
阅读全文
摘要：CSS中有一个属性 padding对元素宽度存在依存关系。如果一个元素的 padding属性以百分比形式表示，padding 的大小是以该元素包含块宽度为参照的（包含块传送门）。 若想要元素尺寸变化时，宽高比例不变，可以将height 设为0，padding 撑开盒子高度，达到宽高比例不变的效果。
阅读全文
摘要：参考链接：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B9%E5%85%83%E7%B4%A0 使用 scoped 后，父组件的样式将不会渗透到子组件
阅读全文
摘要：长时间不用css，发现有些基础知识竟有些遗忘，由于项目中的一些css样式，进行了以下相关测试。 div的width及height均设置为0后，div的border会怎样显示。经过测试后，发现border的显示与div的width/height独立，显示不受它影响。 以下为例子： 代码如下： 宽高均设
阅读全文
摘要：今天编写页面，后台直接返回带有html格式的字符串，包含<br/>，前端以为要展示<br/>，将其解析为<br/>页面不换行 解决办法 后台将<br/> 替换为 \n 并在前端添加样式style="white-space:pre-line"; 原文链接：https://www.jians
阅读全文
摘要：window.check=function(){ var input = document.getElementById("file"); if(input.files){ //读取图片数据 var f = input.files[0]; var reader = new FileReader(); reader.onload = func...
阅读全文
摘要：我们首先来介绍如何实现禁止复制，知道了禁止的方式，再破解就容易了。 实现禁止复制粘贴 比较简单，直接上代码： 破解禁止复制粘贴 知道如何禁止了，那破解这个限制就容易多了。 首先，绝大部分限制都是采用js实现的，那我禁用js不久OK了么？突然发现我太聪明了！假如你使用的是Chrome或者其它国产web
阅读全文
摘要：1、重绘(Repaint) 重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制， 使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。 2、重排(Reflow) 渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计
阅读全文
浙公网安备 33010602011771号