CSS 声明块与选择器配对，以生成 CSS 规则集 。 1.1 HTML中引入CSS的方式 外部样式，link标签将外部样式表链接到页面。...访问过后的样式设置 定位相关样式 1） position: absolute 绝对定位:相对父标签的左上角坐标进行定位 relative 相对定位：相对当前标签默认出现的位置进行偏移 2...： 块级盒子（block） 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width 和 height 属性可以发挥作用 内边距...固定定位 (Fixed positioning) 将一个元素相对浏览器视口(viewport,网页的可视区域)固定，而不是相对另外一个元素。...这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...，并不是由于对 offset 解释不同造成的） 我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是： 一、offsetTop 返回的是数字...，与页面内容无关。...LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离; clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离 offsetLeft 返回对象相对于父级对象的布局或坐标的...left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽，不包边线宽度
，如果父级元素没有定位，则以body为准 offsetLeft从父亲的padding开始算，父亲的border不算。...offsetParent:返回该对象的带有定位的父级，如果当前元素的父级元素没有 进行CSS定位，则offsetParent为body.如果当前元素的父级元素中有定位，则 取最近的父级元素 3、offsetLeft...和style.left的区别 1、最大区别在于offsetLeft可以返回没有定位的盒子距离左侧的位置 而style.left不可以。...在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。...比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date） 普通浏览器支持 event（传参） ie 678 支持 window.event（无参） ?
，会产生一个事件对象event，这个对象中包含着所有与事件相关的信息。...这个事件并不是DOM2级事件规范中规定的，其得到广泛应用，在DOM3中将其纳入了标准； mousedown 用户按下任意鼠标按钮时触发； mouseenter 鼠标光标从元素外部首次移动到元素范围内时触发...pageX和pageY：鼠标指针在页面中的位置。在没有滚动条的情况下，同clientX和clientY的值。 screenX和screenY：鼠标指针相对于整个屏幕的坐标信息。 ?...这个事件的目标（event.target）是被删除的节点；而event.relatedNode是目标节点的父节点。在这个事件触发时，节点尚未从其父节点删除。...事件目标为被插入的节点，而event.relatedNode属性的值是父节点引用。 接着会在新插入的节点上触发DOMNodeInsertIntoDocument事件。
，这个类称为 子类，也叫做 派生类 ### 继承的意义： > 提高代码的重用性，建立新的类与类的关系，方便其它逻辑的操作 ### 继承语法格式 ```python class 父类(): pass class...子类永远在父类的前面 2. 同一等级的类，按照子类中的继承顺序摆放 3....# super()方法在调用时，会自动把当前self传入到上一级的类的方法中 ``` #### 类关系检测 issubclass() > issubclass() 检测一个类是否时另一个类的子类 ```...python # 检测一个类是否是另一个类的子类 res = issubclass(D,B) # True 检测D类是不是B类的子类 res = issubclass(D,C) # True 检测D类是不是...C类的子类 res = issubclass(D,A) # True 检测D类是不是A类的子类 res = issubclass(A,D) # False 检测A类是不是D类的子类 ``` ## 多态
，或者可以认为是浮动在整个页面顶部的组件，这样的组件在DOM结构上是脱离了父组件的，我们当然可以自行实现相关的能力，例如主动创建一个div结构挂载到目标DOM结构下例如document.body下，然后利用...-- 父级元素的`z-index`的层次比同级元素低 即使`fixed`元素`z-index`比父级高 也会被父级同级元素遮挡 --> <div style="position: absolute;...此外，即使我们并不是设计组件库，而仅仅是在我们的业务中实现相关需求，我们也不希望我们的组件受到父组件的影响，因为即使最开始我们的结构和样式没出现问题，随着业务越来越复杂，特别是多人协作开发项目，就很容易留下隐患...事件也是同样会多次触发，可以将父元素与所有子元素都看作独立区域，而事件会冒泡到父元素来执行事件绑定函数，这可能导致重复的事件处理和不必要的逻辑触发，而MouseEnter和MouseLeave事件不会重复触发...事件触发情况，首先鼠标移动到a元素上，控制台打印a，符合预期，接下来鼠标移动到b元素上，控制台打印b，同样符合预期，那么接下来将鼠标移动到c，神奇的事情来了，我们会发现会先打印b再打印c，而不是仅仅打印了
左键对应的值为 0、1、1 中键对应的值为 1、4、2 右键对应的值为 2、2、3 timeStamp 从页面打开开始到触发事件的时间 以下内容为坐标值的说明： clientX和clientY与...x，y clientX和clientY与x，y一样的，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x,y是新浏览器支持 以下截图打印的结果都是div2元素的左上顶点（从边框开始）的位置坐标...layerX,layerY layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角 当元素及它的父级都没有定位属性时，以...body的左上角为原点： 当元素的父级都有定位属性时，以父级的左上角为原点： 当元素自身有定位属性时，以自身的左上角为原点： pageX， pageY pageX， pageY...相对页面左上角的距离 screenX screenY screenX screenY 相对屏幕左上角的位置 总结： clientX和clientY与x，y一样的，以浏览器显示区域的左上角开始
标准设备坐标系的坐标值不是绝对值，是相对值，其范围是[-1,1]区间，也就是说canvas画布上任何一个位置的坐标，如果用标准设备坐标系来表示，那么坐标的值都是在-1到1之间的。...2 page坐标系 坐标原点：整个页面的左上角(整个页面的意思就是你整个网页的全部，按照整个html文档的长度和宽度来计算)。...pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是 clientY + 垂直滚动条滚动的距离。 坐标系上某一个元素的pageX/pageY 不会 随着滚动条滚动而改变。...4 offset 坐标原点：父级中最近的一个带有CSS定位(position为absolute/relative)的父元素，如果当前元素的父级元素中没有进行CSS定位，那么就是body。...获取鼠标坐标事件 我们可以通过点击事件回调函数中的event来获取鼠标相关的位置信息addEventListener('click',function(event){ // event对象有很多鼠标事件相关信息
比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？...，虽然可以检测鼠标事件来监控，但是焦点可以通过键盘移动所以有专门的事件监控。...可以检测页面滚动是否来自鼠标。该事件冒泡。...input'); doc.addEventListener('textInput',function(event) { console.log(event.data); }) 设备事件 设备事件不是值页面内的事件...0 为纵向、90 为向左旋转、-90 为向右旋转 MozOrientation ，firefox 未检测设备而引入，依靠 event 的 x,y,z 来确定方向。
， 给父元素添加事件，子元素可以触发 优点：给父级元素加事件（可以提高性能） 实现：事件对象.target 可以获得真正触发事件的元素 ---- 滚动事件 作用：很多网页需要检测用户把页面滚动到某个区域后做一些处理...}) ---- 元素大小和位置 三大家族 scroll家族 offest家族 client家族 scroll家族 作用：检测页面滚动的距离 获取宽高 获取元素的内容总宽高（不包含滚动条）返回值不带单位...、包含元素自身设置的宽高、padding、border offsetWidth 和 offsetHeight 获取位置（只读，不可修改） 获取元素距离自己定位父级元素的左、上距离 client家族 获取宽高...这是因为 Javascript 这 门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。...对象 navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息 常用属性和方法： 通过 userAgent 检测浏览器的版本及平台 // 检测 userAgent（浏览器信息） !
2.元素偏移量（offset） offset系列相关属性可以动态获取元素的位置、大小等属性 注：获取元素是距离带有定位的父级元素的位置；获取元素大小返回值不带单位！...element.offsetParent //返回该元素带有定位的父级；若无定位父级返回body element.offsetTop/Left //返回该元素距离带定位父级的上/左距离；不带单位...改变距离我们用style样式表 3.元素可视区域（client） client系列来获取元素可视区的相关信息，可以动态得到改元素边框与元素大小； 注：返回值不带单位！...window.pageYOffset //获取页面被卷去的头部高度 window.pageXOffset //获取页面被卷去的左侧高度 5.立即执行函数...不需要调用，立马能够自己执行函数 里面所有变量为局部变量 6.click直接调用 对于一般的click我们是要鼠标点击才能触发，除此之外我们还能直接代码调用函数 window.click()就能直接触发鼠标事件
CSS里面的一个特性叫mix-blend-mode ，这个 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，再加上Javascript的辅助判断哪些页面上的元素需要黑化的，哪些是不需要黑化的...，如果该元素没有父节点，或者父节点不是一个 DOM [元素]，则返回 null。...github.com/PanJiaChen/… keep-alive 本质是把应该销毁的组件缓存起来，当再次需要的时候去读取缓存的组件信息而不是重新渲染，所以 keep-alive 必须包裹一个组件才能生效...pageX、pageY：事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标、垂直坐标。...串行“\”匹配“``”而“(”则匹配“(”。 ^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。 $ 匹配输入字符串的结束位置。
获取元素之 节点获取 页面中所有的内容都为节点，节点使用 node 来表示 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系 父级节点 node.parentNode //node表示节点...parentNode //可以返回某个节点的父节点，注意是最近一级的父节点如果指定的节点没有父节点则返回null × 子元素节点 parentNode.children (各个浏览器都支持) （不包含...包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。事件触发时系统会产生一个事件对象，并且系统会以实参的形式传给事件处理函数在事件处理程序中声明一个形参用来接收事件参数。 //1....方法一: 在处理程序内的最后 添加 return false ;方法二: 在 a标签中加 javascript:; 自定义属性操作 为什么需要自定义属性：用于在页面中存储数据而不用在数据库中存储 Element...将节点添加到node表示的父节点的子节点列表的末尾，类似数组的方法pushnode.insertBefore( child,指定节点的位置 ) 将节点添加到node表示的父节点的指定子节点的前面，类似于
伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...background-color: pink; } 三、结构伪类选择器： 作用：通过结构找到目标标签或者文本 匹配父元素中的第n个子元素（注意：是所有标签而不是需要改变的标签） E:nth-child...：4n 属性选择器： E[attr] E[attr="val"] 定位： 网页的三种布局方式：标准流、浮动、定位 目的： 解决盒子与盒子之间的层叠问题 让盒子始终固定在屏幕中的某个位置...先找已经定位的父级（一般是 相对定位），以这个父级为参照物 子绝父相 就近找定位的父级，如果逐层找不到这样的父级，就以浏览器窗口为参照物定位。...如果父级没有定位，那么以浏览器窗口为参照物。
pageX:FF特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的属性。...layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在...border的左上角，而不是内容区域的左上角。...offsetX:IE特有，鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！...offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近 的，设置了position的父对象”中的位置，虽然话是这么说的，
解决高度塌陷 父元素在文档流中会默认被子元素撑开 如果此时给子元素添加浮动效果 子元素就会脱离文档流 从而造成父元素的高度塌陷 此时页面便会混乱 如果给父元素设置高宽便会使父元素锁死 不能随子元素变化随意撑开...用于定义文档中的一个区域 aside 用于定义当前页面或是当前文章的内容几乎无关的附属信息 figure 用于定义一段独立的引用 figcaption 用于表示是与其相关联的引用的说明/标题 hgroup...em为相对单位，基准点为父节点字体的大小，em会根据父级元素的大小而变化，但是如果嵌套了多个元素，要去计算，很容易出错，就有了rem。...，利用事件冒泡原理，通过判断事件的“目标元素”来触发父级上绑定的事件。...层级选择器： 匹配所有后代元素 匹配直接子元素 匹配所有在该元素后的next元素 匹配该元素的所有同辈元素 位置选择器： :first匹配第一个元素 :last获取最后一个元素 :not去除所有与给定选择器匹配的元素
状 变化的相关事件：这些事件与用户行为无关，而是由网络或浏览器触发的。...特定API事件：这些事件多用于特定场景的实现，例如 HTML5中提供的拖放API中的事件等 与错误处理的相关事件 注册事件 注册事件指：就是将 Javascript函数与指定的事件相关联。...函数return语句 link.onclick = function () { return false } 获取鼠标坐标 pageX和pageY 表示鼠标在整个页面中的位置。...如果页面过大（存在滚动条），部分页面可能存在可视区域之外。 ? clientX和clientY 表示鼠标在整个可视区域中的位置。 ?...screenX和screenY 表示鼠标在整个屏幕中的位置。从屏幕（不是浏览器）的左上角开始计算。 ? offsetX和offsetY 表示鼠标相对于定位父元素的位置。 ?
，元素周围自动换行 span：行内元素，前后不会换行 class和id选择器区别 class样式可以使用多次，id样式只能使用一次，id选择器的优先级大于类别选择器 6，值和变量 typeof检测变量类型...否 运算符优先级：括号 7，结构，表现和行为（这是核心） 结构、表现和行为相分离 HTML（结构）：包含页面的内容和结构 CSS（表现）：控制页面的外观和表现 JavaScript（行为）：控制页面的行为...鼠标位置 document....，子节点 相同事件 oEvent.cancelBubble=true; 阻止事件冒泡 3、鼠标事件 鼠标点击位置： oEvent.clientX 鼠标距可视区的左边距 oEvent.clientY... 鼠标距可视区的上边距 带滚动条的滚动位置（注意兼容性）： var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
相邻同级选择器：E+F{sRules}，选择紧贴在E元素之后F元素，元素E与F必须同属一个父级，“+” 左右空格无影响。 5....兄弟选择器：E~F{sRules}，选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级，“~” 左右空格无影响。 6....margin-left负数偏移时，也会跟着浮动偏移，而不会和正常元素一样，保持原来的位置；通过这个特点可以让很多效果实现起来更加简单； 30....有的块容器盒子不是块级盒子，同样块级盒子有时也不是块容器盒子 同时是块级盒子（Block-level Box）和块容器盒子（Block Containning Box）的盒子被称作是块盒子（Block...对于 SVG 内容，该值与 visiblePainted 效果相同。 inherit：将使用 pointer-events 元素的父级的值。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
