RebootTang-CSDN博客

原创 css3实现卡牌翻转效果

代码如下，纯css3实现，当鼠标悬浮与卡面上，卡片进行翻转<style> .card-wrapper { background-color: transparent; width: 250px; height: 350px; margin: 0 auto; perspective: 1000px...

2019-09-22 23:17:39 1161

转载【转载】vue v-bind:class中属性使用引号

官网案例：<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>key：css样式名称， value：控制该样式的vue实例属性刚看了这个demo还以为class的key和value都需要为vue实例的属性，如果直接写key需要加引号。 &nb...

2019-09-03 13:55:58 408

原创利用绝对定位实现水平垂直居中

2019-08-22 14:39:37 658

场景：input输入框绑定onblur事件，input输入框的确认按钮绑定onclick事件。在点击确认按钮的的同时，input也失去了焦点，所以会触发onblur事件，并且onblur会优先于onclick执行。这就会导致按钮的onclick事件无法正确执行，解决办法有两种：1.给onblur加settimeout, 然后onclick中cleartimeout。也就是说让onblur延迟一段...

2019-08-12 15:23:28 4365 2

原创 onmouseover和onmouseout事件冒泡导致闪烁的问题

在一个元素上同时绑定onmouseover和onmouseout事件时，如果这个元素包含有子元素，那么当鼠标在元素内部移动时，会因为事件冒泡而发生一下情况：从区域1移动到子区域2，会导致在触发onmouseout的同时触发onmouseover。我是在做一个table表格时，利用onmouseout和onmouseover来动态绘不同的制折线图，所以这种情况会导致table和折线图一直闪烁，解...

2019-08-12 13:16:24 2368 2

原创 onblur事件不支持冒泡的解决办法

onblur事件在元素是去焦点的时候被触发，常用与文字输入框，判断鼠标是否已经离开输入框，但是onblur并不支持事件冒泡，所以无法判断是否有子元素发生onblur事件。解决方法有两种：1.用onfocusout事件代替，onfocusout事件的和onblur的作用是一样的，只不过onfocusout支持事件冒泡，但是需要注意的是，onfocusout在chrome，safari 和opera...

2019-08-05 14:30:39 2499

原创 NaN和isNaN()

NaN是一种number类型，是一种特殊的数值，用来表示本来要返回数值但是并没有正确返回数值的情况，例如任何数值除以0，都会返回NaN，这样就不会导致报错而使程序停止运行，NaN有两个特点：1.任何涉及NaN的操作都会返回NaN （NaN / 10返回NaN）2.NaN不等于任务数包括它自己本身。isNaN是一个函数，这个函数接受一个参数，并且会帮我们确定这个参数是否是NaN。isNaN（）在接...

2019-08-05 12:42:53 211

原创 css伪类和伪元素的不同

css3给出的伪类定义：伪类是用来允许选择器去选择一些存在于dom之外的信息或者一些不能够通过现在的选择器进行定位信息。也就是说伪类其实是为了弥补选择器的不足，例如：:hover，当鼠标悬停在一个元素上时，可以用这个伪类来为此状态下的元素添加样式。很明显，鼠标悬停在一个元素上的这些信息，并不存在与dom树中。:first-child , 要获取第一个子元素，无法通过常规选择器直接获取，...

2019-08-03 14:51:25 198

原创利用js合并table单元格

点击按钮，第一列中所有相同内容的单元格进行合并，也可用于动态数据，这里演示使用的固定数据<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>table</title> <style> button { ...

2019-07-24 15:10:06 562

原创利用js交换table中的两列

利用js交换table中的两列点按钮后table的第一列和第二列内容互换<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>table</title> <style> button { margin-...

2019-07-24 14:06:07 720

原创事件处理程序中this，currentTarget， target所表示不同的值

在事件处理程序中，当触发了dom中的某个事件，浏览器会将一个event对象传入到事件处理程序，这个对象包含所有与事件有关的信息，比如：导致事件的元素、事件的类型等。event对象包含一些属性和方法，其中currentTarget和target与事件目标有关。对currentTarget和target属性的官方说明：currentTarget：事件处理程序当前正在处理的那个元素target： ...

2019-07-03 23:01:18 349

原创 setInterval实现渐变效果

<body> <div id="fade-obj" style="width:300px;height:300px;background:#3399FF"></div> <button id="fade-btn">淡出</button></body><script>var transColor...

2019-07-01 23:04:27 433

原创使用childNodes时如何解决返回nodelist中空白文本节点的问题

在使用childNodes属性来返回节点的全部子节点的时候，childNodes会将子节点之间的空格看做一个空的文本节点一并返回。html代码如下：<div id="content"> <ul> <li><span>HTML</span></li> <li><...

2019-06-20 00:05:50 2214 2

原创 vscode里添加注释的快捷键

vscode里添加注释的快捷键vscode里面可以直接查看所有快捷键的方式，file-preferences-keyboard shortcuts，或者ctrl+k,ctrl+s可以直接打开快捷键设置界面可以看到如果想给已有的代码直接添加行注释 ctrl+k ctrl+c，取消是ctrl+k ctrl+/如果是想在新的一行中开始一段新的行注释（toggle line comment）是ct...

2019-06-16 12:23:27 27206

原创 font属性简写失效的原因font-weight和font-size

在设置字体样式本来是用各自单个属性设置的，嫌麻烦，不想在每个选择器里都用两行来设置字体的weight 和size，所以换成font的简写，一开始写成下面这样，但是发现不生效,* { font-family: "Microsoft YaHei UI Light", sans-serif; }.selector1 { font-size: 2.5rem; fon...

2019-06-12 13:59:43 5592

原创总结inline，inline-block和block元素的区别和特点

inline（行内）元素的特点：行内元素不会独占一行，多个行内元素会排成一行，直到充满整行之后再换行。行内元素不能设置width和height属性，它的宽和高是元素内容的宽和高。设置margin和padding属性时，margin-top，margin-bottom，padding-top，padding-bottom无效。行内元素的padding-top和padding-bottom在浏...

2019-06-10 18:20:06 3223 1

原创对css中盒子模型的理解

对css中盒子模型（box model）的理解盒子的基本属性margin的外边距合并（margin collapsing）box-sizing属性盒子的基本属性html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型，如下图所示：width和height属性用来设置内容区域的宽和高，height属性在默认情况下和内容框的高度相同，也就是随内容多少的变化而变化。padding为盒子模...

2019-05-29 14:47:57 3853

原创 <!DOCTYPE>在html中的使用

最近开始学习前端知识，对<!DOCTYPE>的理解很模糊，虽然在大部分情况下直接引用即可，但还是觉得应该花点时间搞清楚它的原理，以下文章若有理解错误的地方，烦请指正。什么是 <!DOCTYPE><!DOCTYPE>是一个用来告诉web浏览器当前页面使用了哪个版本的html的声明，它需要位于文档的最开始的位置，也就是位于<html>标签之前。新的...

2019-05-22 00:00:19 2563

RebootTang的博客