![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
RebootTang
这个作者很懒,什么都没留下…
展开
-
<!DOCTYPE>在html中的使用
最近开始学习前端知识,对<!DOCTYPE>的理解很模糊,虽然在大部分情况下直接引用即可,但还是觉得应该花点时间搞清楚它的原理,以下文章若有理解错误的地方,烦请指正。什么是 <!DOCTYPE><!DOCTYPE>是一个用来告诉web浏览器当前页面使用了哪个版本的html的声明,它需要位于文档的最开始的位置,也就是位于<html>标签之前。新的...原创 2019-05-22 00:00:19 · 2557 阅读 · 0 评论 -
【转载】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 · 402 阅读 · 0 评论 -
利用绝对定位实现水平垂直居中
<style> .a { height: 200px; width: 500px; background-color: antiquewhite; margin: 0 auto; position: relative; } .b { width: 100px; ...原创 2019-08-22 14:39:37 · 656 阅读 · 0 评论 -
js中this的指向
版权声明:本文转载自阿Z爱码原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 ...转载 2019-08-21 14:51:42 · 144 阅读 · 0 评论 -
onblur和onclick冲突的解决方法
场景:input输入框绑定onblur事件,input输入框的确认按钮绑定onclick事件。在点击确认按钮的的同时,input也失去了焦点,所以会触发onblur事件,并且onblur会优先于onclick执行。这就会导致按钮的onclick事件无法正确执行,解决办法有两种:1.给onblur加settimeout, 然后onclick中cleartimeout。也就是说让onblur延迟一段...原创 2019-08-12 15:23:28 · 4346 阅读 · 2 评论 -
onmouseover和onmouseout事件冒泡导致闪烁的问题
在一个元素上同时绑定onmouseover和onmouseout事件时, 如果这个元素包含有子元素,那么当鼠标在元素内部移动时,会因为事件冒泡而发生一下情况:从区域1移动到子区域2, 会导致在触发onmouseout的同时触发onmouseover。我是在做一个table表格时,利用onmouseout和onmouseover来动态绘不同的制折线图,所以这种情况会导致table和折线图一直闪烁,解...原创 2019-08-12 13:16:24 · 2363 阅读 · 2 评论 -
onblur事件不支持冒泡的解决办法
onblur事件在元素是去焦点的时候被触发,常用与文字输入框,判断鼠标是否已经离开输入框,但是onblur并不支持事件冒泡,所以无法判断是否有子元素发生onblur事件。解决方法有两种:1.用onfocusout事件代替,onfocusout事件的和onblur的作用是一样的,只不过onfocusout支持事件冒泡,但是需要注意的是,onfocusout在chrome,safari 和opera...原创 2019-08-05 14:30:39 · 2488 阅读 · 0 评论 -
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 阅读 · 0 评论 -
css伪类和伪元素的不同
css3给出的伪类定义:伪类是用来允许选择器去选择一些存在于dom之外的信息或者一些不能够通过现在的选择器进行定位信息。也就是说伪类其实是为了弥补选择器的不足,例如::hover, 当鼠标悬停在一个元素上时,可以用这个伪类来为此状态下的元素添加样式。很明显,鼠标悬停在一个元素上的这些信息,并不存在与dom树中。:first-child , 要获取第一个子元素,无法通过常规选择器直接获取,...原创 2019-08-03 14:51:25 · 197 阅读 · 0 评论 -
利用js合并table单元格
点击按钮,第一列中所有相同内容的单元格进行合并,也可用于动态数据,这里演示使用的固定数据<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>table</title> <style> button { ...原创 2019-07-24 15:10:06 · 561 阅读 · 0 评论 -
利用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 · 716 阅读 · 0 评论 -
总结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 · 3182 阅读 · 1 评论 -
对css中盒子模型的理解
对css中盒子模型(box model)的理解盒子的基本属性margin的外边距合并(margin collapsing)box-sizing属性盒子的基本属性html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型,如下图所示:width和height属性用来设置内容区域的宽和高,height属性在默认情况下和内容框的高度相同,也就是随内容多少的变化而变化。padding为盒子模...原创 2019-05-29 14:47:57 · 3851 阅读 · 0 评论 -
css3实现卡牌翻转效果
代码如下,纯css3实现,当鼠标悬浮与卡面上,卡片进行翻转<style> .card-wrapper { background-color: transparent; width: 250px; height: 350px; margin: 0 auto; perspective: 1000px...原创 2019-09-22 23:17:39 · 1157 阅读 · 0 评论