<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[RebootTang的博客]]></title><description><![CDATA[我就随便记点有的没得]]></description><link>https://blog.youkuaiyun.com/applyTang</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; applyTang]]></copyright><item><title><![CDATA[css3实现卡牌翻转效果]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/101177165</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/101177165</guid><author>applyTang</author><pubDate>Sun, 22 Sep 2019 23:17:39 +0800</pubDate><description><![CDATA[代码如下，纯css3实现，当鼠标悬浮与卡面上，卡片进行翻转
&lt;style&gt;
    .card-wrapper {
        background-color: transparent; 
        width: 250px;
        height: 350px;
        margin: 0 auto;
        perspective: 1000px...]]></description><category></category></item><item><title><![CDATA[【转载】vue v-bind:class中属性使用引号]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/100516712</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/100516712</guid><author>applyTang</author><pubDate>Tue, 03 Sep 2019 13:55:58 +0800</pubDate><description><![CDATA[官网案例：
&lt;div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"&gt; &lt;/div&gt;
key：css样式名称， value：控制该样式的vue实例属性
刚看了这个demo还以为class的key和value都需要为vue实例的属性， 如果直接写key需要加引号。 &nb...]]></description><category></category></item><item><title><![CDATA[利用绝对定位实现水平垂直居中]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/100013950</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/100013950</guid><author>applyTang</author><pubDate>Thu, 22 Aug 2019 14:39:37 +0800</pubDate><description><![CDATA[&lt;style&gt;
    .a {
        height: 200px;
        width: 500px;
        background-color: antiquewhite;
        margin: 0 auto;
        position: relative;
    }
    .b {
        width: 100px;
   ...]]></description><category></category></item><item><title><![CDATA[js中this的指向]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/99962001</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/99962001</guid><author>applyTang</author><pubDate>Wed, 21 Aug 2019 14:51:42 +0800</pubDate><description><![CDATA[版权声明：本文转载自阿Z爱码原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 
               
         ...]]></description><category></category></item><item><title><![CDATA[onblur和onclick冲突的解决方法]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/99302147</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/99302147</guid><author>applyTang</author><pubDate>Mon, 12 Aug 2019 15:23:28 +0800</pubDate><description><![CDATA[场景：input输入框绑定onblur事件，input输入框的确认按钮绑定onclick事件。在点击确认按钮的的同时，input也失去了焦点，所以会触发onblur事件，并且onblur会优先于onclick执行。这就会导致按钮的onclick事件无法正确执行，解决办法有两种：
1.给onblur加settimeout, 然后onclick中cleartimeout。也就是说让onblur延迟一段...]]></description><category></category></item><item><title><![CDATA[onmouseover和onmouseout事件冒泡导致闪烁的问题]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/98640788</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/98640788</guid><author>applyTang</author><pubDate>Mon, 12 Aug 2019 13:16:24 +0800</pubDate><description><![CDATA[在一个元素上同时绑定onmouseover和onmouseout事件时， 如果这个元素包含有子元素，那么当鼠标在元素内部移动时，会因为事件冒泡而发生一下情况：从区域1移动到子区域2， 会导致在触发onmouseout的同时触发onmouseover。我是在做一个table表格时，利用onmouseout和onmouseover来动态绘不同的制折线图，所以这种情况会导致table和折线图一直闪烁，解...]]></description><category></category></item><item><title><![CDATA[onblur事件不支持冒泡的解决办法]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/98483934</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/98483934</guid><author>applyTang</author><pubDate>Mon, 05 Aug 2019 14:30:39 +0800</pubDate><description><![CDATA[onblur事件在元素是去焦点的时候被触发，常用与文字输入框，判断鼠标是否已经离开输入框，但是onblur并不支持事件冒泡，所以无法判断是否有子元素发生onblur事件。解决方法有两种：
1.用onfocusout事件代替，onfocusout事件的和onblur的作用是一样的，只不过onfocusout支持事件冒泡，但是需要注意的是，onfocusout在chrome，safari 和opera...]]></description><category></category></item><item><title><![CDATA[NaN和isNaN()]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/98482235</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/98482235</guid><author>applyTang</author><pubDate>Mon, 05 Aug 2019 12:42:53 +0800</pubDate><description><![CDATA[NaN是一种number类型，是一种特殊的数值，用来表示本来要返回数值但是并没有正确返回数值的情况，例如任何数值除以0，都会返回NaN，这样就不会导致报错而使程序停止运行，NaN有两个特点：1.任何涉及NaN的操作都会返回NaN （NaN / 10返回NaN）2.NaN不等于任务数包括它自己本身。
isNaN是一个函数，这个函数接受一个参数，并且会帮我们确定这个参数是否是NaN。isNaN（）在接...]]></description><category></category></item><item><title><![CDATA[css伪类和伪元素的不同]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/98325180</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/98325180</guid><author>applyTang</author><pubDate>Sat, 03 Aug 2019 14:51:25 +0800</pubDate><description><![CDATA[css3给出的伪类定义：

伪类是用来允许选择器去选择一些存在于dom之外的信息或者一些不能够通过现在的选择器进行定位信息。也就是说伪类其实是为了弥补选择器的不足，例如：

:hover， 当鼠标悬停在一个元素上时，可以用这个伪类来为此状态下的元素添加样式。很明显，鼠标悬停在一个元素上的这些信息，并不存在与dom树中。
:first-child , 要获取第一个子元素，无法通过常规选择器直接获取，...]]></description><category></category></item><item><title><![CDATA[利用js合并table单元格]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/97134397</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/97134397</guid><author>applyTang</author><pubDate>Wed, 24 Jul 2019 15:10:06 +0800</pubDate><description><![CDATA[点击按钮，第一列中所有相同内容的单元格进行合并，也可用于动态数据，这里演示使用的固定数据
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;table&lt;/title&gt;
    &lt;style&gt;
    button {
      ...]]></description><category></category></item><item><title><![CDATA[利用js交换table中的两列]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/97128513</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/97128513</guid><author>applyTang</author><pubDate>Wed, 24 Jul 2019 14:06:07 +0800</pubDate><description><![CDATA[利用js交换table中的两列
点按钮后table的第一列和第二列内容互换
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;table&lt;/title&gt;
    &lt;style&gt;
    button {
      margin-...]]></description><category></category></item><item><title><![CDATA[事件处理程序中this，currentTarget， target所表示不同的值]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/94591704</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/94591704</guid><author>applyTang</author><pubDate>Wed, 03 Jul 2019 23:01:18 +0800</pubDate><description><![CDATA[在事件处理程序中，当触发了dom中的某个事件，浏览器会将一个event对象传入到事件处理程序，这个对象包含所有与事件有关的信息，比如：导致事件的元素、事件的类型等。event对象包含一些属性和方法，其中currentTarget和target与事件目标有关。
对currentTarget和target属性的官方说明：
currentTarget：事件处理程序当前正在处理的那个元素
target： ...]]></description><category></category></item><item><title><![CDATA[setInterval实现渐变效果]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/94412730</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/94412730</guid><author>applyTang</author><pubDate>Mon, 01 Jul 2019 23:04:27 +0800</pubDate><description><![CDATA[&lt;body&gt;
    &lt;div id="fade-obj" style="width:300px;height:300px;background:#3399FF"&gt;&lt;/div&gt;
    &lt;button id="fade-btn"&gt;淡出&lt;/button&gt;
&lt;/body&gt;
&lt;script&gt;
var transColor...]]></description><category></category></item><item><title><![CDATA[使用childNodes时如何解决返回nodelist中空白文本节点的问题]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/92853594</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/92853594</guid><author>applyTang</author><pubDate>Thu, 20 Jun 2019 00:05:50 +0800</pubDate><description><![CDATA[在使用childNodes属性来返回节点的全部子节点的时候，childNodes会将子节点之间的空格看做一个空的文本节点一并返回。
html代码如下：
&lt;div id="content"&gt;
     &lt;ul&gt;
         &lt;li&gt;&lt;span&gt;HTML&lt;/span&gt;&lt;/li&gt;
         &lt;li&gt;&lt;...]]></description><category></category></item><item><title><![CDATA[vscode里添加注释的快捷键]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/92386560</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/92386560</guid><author>applyTang</author><pubDate>Sun, 16 Jun 2019 12:23:27 +0800</pubDate><description><![CDATA[vscode里添加注释的快捷键
vscode里面可以直接查看所有快捷键的方式，file-preferences-keyboard shortcuts，或者ctrl+k,ctrl+s可以直接打开快捷键设置界面

可以看到如果想给已有的代码直接添加行注释 ctrl+k ctrl+c，取消是ctrl+k ctrl+/
如果是想在新的一行中开始一段新的行注释（toggle line comment）是ct...]]></description><category></category></item><item><title><![CDATA[font属性简写失效的原因font-weight和font-size]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/91513804</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/91513804</guid><author>applyTang</author><pubDate>Wed, 12 Jun 2019 13:59:43 +0800</pubDate><description><![CDATA[在设置字体样式本来是用各自单个属性设置的，嫌麻烦，不想在每个选择器里都用两行来设置字体的weight 和size，所以换成font的简写，一开始写成下面这样，但是发现不生效,
*  {
     font-family: "Microsoft YaHei UI Light", sans-serif;
    }
.selector1 {
    font-size: 2.5rem;
    fon...]]></description><category></category></item><item><title><![CDATA[总结inline，inline-block和block元素的区别和特点]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/91388412</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/91388412</guid><author>applyTang</author><pubDate>Mon, 10 Jun 2019 18:20:06 +0800</pubDate><description><![CDATA[inline（行内）元素的特点：

行内元素不会独占一行，多个行内元素会排成一行，直到充满整行之后再换行。
行内元素不能设置width和height属性，它的宽和高是元素内容的宽和高。
设置margin和padding属性时，margin-top，margin-bottom，padding-top，padding-bottom无效。行内元素的padding-top和padding-bottom在浏...]]></description><category></category></item><item><title><![CDATA[对css中盒子模型的理解]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/90642720</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/90642720</guid><author>applyTang</author><pubDate>Wed, 29 May 2019 14:47:57 +0800</pubDate><description><![CDATA[对css中盒子模型（box model）的理解盒子的基本属性margin的外边距合并（margin collapsing）box-sizing属性
盒子的基本属性
html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型，如下图所示：

width和height属性用来设置内容区域的宽和高，height属性在默认情况下和内容框的高度相同，也就是随内容多少的变化而变化。
padding为盒子模...]]></description><category></category></item><item><title><![CDATA[&lt;!DOCTYPE&gt;在html中的使用]]></title><link>https://blog.youkuaiyun.com/applyTang/article/details/90413676</link><guid>https://blog.youkuaiyun.com/applyTang/article/details/90413676</guid><author>applyTang</author><pubDate>Wed, 22 May 2019 00:00:19 +0800</pubDate><description><![CDATA[最近开始学习前端知识，对&lt;!DOCTYPE&gt;的理解很模糊，虽然在大部分情况下直接引用即可，但还是觉得应该花点时间搞清楚它的原理，以下文章若有理解错误的地方，烦请指正。
什么是 &lt;!DOCTYPE&gt;
&lt;!DOCTYPE&gt;是一个用来告诉web浏览器当前页面使用了哪个版本的html的声明，它需要位于文档的最开始的位置，也就是位于&lt;html&gt;标签之前。
新的...]]></description><category></category></item></channel></rss>