页面布局
关注
分享
扫一扫
文章平均质量分 61
_wayliu
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
webAPI-元素位置
1.元素偏移量 offset2.元素可视区 client3.元素滚动 scroll1.元素偏移量 offsetoffset翻译过来就是偏移量，使用offset系列相关属性可以动态地获得元素地位置、大小等。获得元素距离带有定位父元素地位置获得元素自身地大小（宽高度）注意：返回的数值都不带单位offset 与style 区别重点就是用style更改元素大小位置，用offset获取元素大小位置。2.元素可视区 client与offset一样，唯一的区别就是宽高度不包含边框。3.元原创 2021-03-05 23:33:39 · 114 阅读 · 0 评论 -
webAPI-BOM浏览器对象模型
1.BOM概述2.window对象常用事件3.定时器4.JS 执行队列5.location对象6.navigator对象7.history对象1.BOM概述BOM比BOM更大，包含DOM。顶级对象为window,window下包含document、location、navigation、screen、history对象。2.window对象常用事件<body> <button>点击</button> <script> cons原创 2021-03-05 23:02:06 · 133 阅读 · 0 评论 -
webAPI-事件高级
1.绑定事件2.解绑事件3.DOM 事件流4.事件对象5.事件委托6.常用的鼠标事件7.常用键盘事件1.绑定使事件传统方式 element.onclick = function () {}addEventListener(‘type’, listener[, userCapture])type: 事件类型，如click、mouseoverlistener：事件处理函数useCapture：默认false（可选），如果为true则处于捕获阶段2.解绑事件传统解绑 elemen原创 2021-03-05 21:07:50 · 365 阅读 · 1 评论 -
webAPI-节点操作
1.节点层级2.创建与添加节点3.删除节点4.三种创建元素方式1.节点层级节点：元素节点(1)、属性节点(2)、文本节点(3)节点值：node.nodeValue节点名：node.nodeName节点类型：node.nodeType父级节点node.parentNodeconst box = document.querySelector('.box')console.log(box.parentNode)返回某节点的最近一个父节点，若没有则返回null。子节点第一种：no原创 2021-03-04 21:31:02 · 344 阅读 · 1 评论 -
webAPI-操作元素
1.获取元素2.事件基础3.操作元素内容4.操作元素普通属性5.操作元素表单属性6.操作元素样式属性7.操作元素自定义属性1.获取元素getElementById(‘id’)getElementByTagName(‘Tag’)getElementByClassName(‘Class’)querySelector(’’),类：.类名，id: #id名，标签：标签名,根据指定选择器返回第一个元素对象querySelectorAll(’’),根据选择器返回所有元素集合document.原创 2021-03-04 20:05:49 · 342 阅读 · 1 评论 -
css动画
1. 创建动画步骤2. 动画属性3. 关键帧1. 创建动画步骤animation实现动画效果主要由两个部分组成：通过关键帧来声明一个动画在animation属性中调用关键帧声明的动画2.动画属性animation: [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-ite原创 2021-02-25 12:48:59 · 133 阅读 · 1 评论 -
css3过渡
1.创建css过渡2.过渡的四个属性值3.css3触发过渡1.创建css过渡触发过渡的两种方式可以使用JavaScript触发（切换类名）或者css伪类触发（hover、focus、active、checked）W3C标准描述css3的transition允许css的属性值在一定的时间区间内平滑地过渡。使用css创建简单过渡步骤在默认样式中声明元素地初始状态样式声明过渡元素最终状态样式，比如悬浮状态在默认样式中添加过渡函数，添加一些不同地样式简单例子.button {原创 2021-02-25 11:34:34 · 160 阅读 · 0 评论 -
css3背景
1. 5个基本属性2. 新增属性3. 多背景属性1. 5个基本属性background-color(背景颜色，默认transparent透明)background-image(背景图片 scroll || fixed)background-repeat(背景图片展示方式)background-repeat: repeat || repeat-x || repeat-y || no-repeatbackground-attachment(背景图片固定还是滚动)background-po原创 2021-02-24 21:43:34 · 93 阅读 · 0 评论 -
css3边框
1.边框的基本属性2.不同边单独设置边框3.圆角边框4.盒子阴影属性1.边框的基本属性border-widthborder-colorborder-style缩写： border: 1px solid red2.不同边单独设置边框即加上方位词即可：top、left、right、bottom如：border-bottom-widthborder-bottom-colorborder-bottom-style3.圆角边框基本使用：border-radius: 10px单原创 2021-02-24 20:16:08 · 109 阅读 · 0 评论 -
css3选择器
1.层次选择器2.动态伪类选择器3.结构伪类选择器1.层次选择器E F: 后代选择器 F元素被包含在E元素内E>F: 子选择器 F元素是E元素子元素E+F:相邻兄弟选择器 F元素是E元素后的第一个兄弟E~F:通用选择器 F元素是E元素后的所有F元素2.动态伪类选择器link:超链接未被访问visited：超链接已被访问active：元素被激活hover：鼠标停留focus：元素获得焦点3.结构伪类选择器E:first-child 相当于E:nth-child(1)原创 2021-02-24 11:22:14 · 199 阅读 · 0 评论 -
flex布局
父项常见属性flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap子项常见属性flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺原创 2020-07-04 16:22:46 · 149 阅读 · 0 评论