首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

移动端touch事件影响click事件以及touchmove添加preventDefault导致页面无法滚动解决方法

之后我大胆推测了一下: 会不会是因为移动端click事件触发条件就是必须touchstart和touchend同时触发才能触发click呢?...原来touchmove中添加event.preventDefault方法之后会阻止浏览器默认滚动。。。...所以页面无法滚动了,之后又去找找找,找了很久一直没找到怎么解决这个问题,突然想起之后用一个移动图片轮播插件, 为什么他们可以左右滑动,不影响click事件和a标签,也不影响页面的滚动。...x轴和y轴移动值,判断当前是往哪个方向滑动,如果是x轴滑动(左右),就调用event.preventDefault()方法,如果是y轴滑动(上下),就不调用event.preventDefault...总结一下: QQ和微信(当然还包括其他浏览器,不过我没测试过)中如果有需要用到touch事件做特效一定要在touchstart或者touchmove中添加event.preventDefault()

3.1K20

TensorFlow移动设备与嵌入式设备轻量级跨平台解决方案 | Google 开发者大会 2018

2018 年 9 月 21 日 ,凌钰城(Google Brain 软件工程师)带来一场《TensorFlow Lite:TensorFlow移动设备与嵌入式设备轻量级跨平台解决方案》演讲,本文将对演讲做一个回顾...终端 / 设备运行机器学习日益重要 今天,机器学习发展日新月异,机器学习不仅部署服务器端,运行在个人电脑,也存在于我们生活中许许多多设备,比如移动设备和智能手机。...再比如Google照片app,可以通过机器学习来制作背景虚化、人像清晰照片,这些移动设备、智能手机上机器学习应用很有用、很有趣。 移动设备实现机器学习,可以有两种实现方法。...一种是设备收集数据,传递给云端,服务器执行机器学习任务,最后把结果回传给设备。另一种方法是终端设备运行所有功能,包含机器学习模型。...什么是TensorFlow Lite TensorFlow Lite是TensorFlow移动设备运行机器学习跨平台解决方案,具有低延迟、运行时库 (runtime library) 极小等特性,

2.2K30

定位(position)

绝对定位absolute [注意] 如果文档可滚动绝对定位元素会随着它滚动,因为元素最终会相对于正常流某一部分定位。...当position属性取值为absolute时,可以将元素定位模式设置为绝对定位。 注意: 绝对定位最重要一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。...当对元素设置固定定位后,它将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化,该元素都会始终显示浏览器窗口定位置。..., 元素添加绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式, ** 因此  行内元素 如果添加绝对定位或者 固定定位后 浮动后,可以不用转换模式,直接给高度和宽度就可以了...块级元素添加绝对定位后固定定位后,如果不给宽高,默认是内容大小**

1.3K30

面试题整理|45个CSS面试题

= 1/72in) *像素或许被认为是最好设备像素”,而这种像素长度和你显示器看到文字屏幕像素无关。...使网站具有响应能力意味着某些元素将通过CSS媒体查询根据设备屏幕尺寸(通常是视口宽度)来调整其大小或其他功能,从而做出响应。 例如,较小设备减小字体大小。...,但是,它同意我们应该默认并定义移动设备所有样式,并且仅在以后向其他设备添加特定响应规则。...: 1、由于不必针对任何媒体查询验证适用于它们所有规则,因此移动设备性能更高 2、它会强制针对响应式CSS规则编写更简洁代码。...这些元素不会影响其他元素位置。 固定 fixed 将元素从页面流中移除,并将其放置相对于视口定位置,并且滚动时不会移动。 粘性sticky 粘性定位是相对定位和固定定位混合。

4.1K30

从头学前端-CSS基础04

定位为什么需要定位> 定位可以让盒子指定盒子内自由移动位置,并压住其他盒子,而浮动只能让盒子排在一行;定位组成>定位定位模式+边偏移> 定位模式用于指定一个元素文档中定位方式,使用CSS属性...使用- 静态定位static> 是元素默认定位方式,按照标准流特性摆放位置,没有偏移- 相对定位relative>元素移动时会以自己原来位置移动; 原来标准流中位置还保留,后面的盒子以标准流对待它...(不脱标)- 绝对定位absolute> 绝对定位元素移动位置时候,是相对于它祖先元素移动; > 如果没有祖先元素或祖先元素没有定位,则以浏览器为准对齐 > 如果祖先元素定位,则以最近一级有定位祖先元素为准移动位置...> 与父元素没有任何关系> 不随着滚动滚动滚动> 不占用标准流位置,是一种特殊绝对定位- 粘性定位 sticky > 粘性定位可以被认为是相对定位和固定定位混合> 已可视窗口为参考点> 占有标准流位置...设置自身元素宽度一半- 定位特殊特性> 行内元素添加定位,可以直接设置宽度和高度> 块内元素添加定位,默认是内容高度和宽度> 脱标的盒子不会触发外边距塌陷问题- 浮动和定位区别: > 浮动会压住后面的盒子

61140

CSS笔记(14)

定位 将盒子定在某一个位置,所以定位也是摆盒子,按照定位方式移动盒子. 定位=定位模式+边偏移. 定位模式用于指定一个元素文档中定位方式,边偏移则决定了该元素最终位置....原来标准流位置继续占有,后面的盒子仍然以标准流方式对待它.(不脱标,继续保留原来位置) 3.绝对定位 绝对定位元素移动位置时候,是相对于它祖先元素来说....跟父元素没有任何关系 不随滚动滚动 固定定位不再占有原先位置 固定定位也是脱标的,其实固定定位也可以看做是一种特殊绝对定位. 固定定位小技巧:固定在版心右侧位置....定位拓展: 绝对定位和固定定位也和浮动类似. 行内元素添加绝对或固定定位,可以直接设置高度和宽度....块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容大小(不加定位的话宽度是父级元素宽度). 浮动元素,绝对定位(固定定位)元素都不会触发外边距合并问题.

57010

CSS中定位详解

三、绝对定位(absolute) 语法: 选择器 { position: absolute; } 含义:采用绝对定位元素移动位置时候是以父元素为参照物,但是这个父元素必须满足一定条件才能成为绝对定位元素眼里元素...如果父元素定位(相对定位绝对定位、固定定位,但不能是静态定位)则它会以最近一级定位元素作为参照元素移动位置。...特点: 固定定位跟父元素没有任何关系。 固定定位元素不会随着滚动滚动滚动。 固定定位后,该元素不会占用原先位置,脱离标准流。...特点: 粘性定位以浏览器可视窗口为参照点移动元素。 粘性定位元素会占有原先位置。 使用粘性定位时必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。...块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容大小。 脱离标准流盒子不会触发外边距塌陷: 浮动元素绝对定位(固定定位)元素都不会触发外边距合并问题。

1.4K30

web前端技术讲解之CSS中position定位技术

(3) 绝对定位元素将处于赋予其他元素之上,自身不占位置,他原来正常文档流中所占空间同时被关闭,就是说绝对定位元素不占据页面空间,原空间被后续元素使用。...绝对定位必须用left、right、top、bottom属性之一激活,用于指定元素左、右、、下外边距距离已定位祖先元素(或浏览器)左、右、、下内边框距离。...绝对定位元素定位后相对祖先元素位置不在变化,若页面内容较多拖动页面滚动时,定位元素会随页面一起滚动绝对定位元素重叠覆盖其他元素时可用z-index属性设置他们叠放次序。 ? 2....固定定位:position:fixed 固定定位绝对定位absolute相似,定位元素也生成为新块级盒框、覆盖新位置原有元素正常文档流中所占原空间关闭被后续元素使用。 ?...固定定位绝对定位absolute区别是定位元素无论父元素是否定位都会直接在浏览器窗口中定位,不会随滚动条拖动页面而滚动,固定定位用left、right、top、bottom指定浏览器左、右、、下各边向中心偏移量作为定位元素外边距位置

83010

【说站】CSS中有哪些定位方式

CSS中有哪些定位方式 1、静态定位情况下,每个元素都处于常规文档流中。他们都是块元素,所以会从上到下堆叠在页面上。...position: static; 2、相对定位相对于文档流中原始位置(或默认位置) 元素原始位置空间仍然保持不被占用,元素移动到页面的其他位置,元素新位置响应事件。...position: relative; 3、绝对定位下,元素从文档流中被“连根拔起”,然后再相对于其他元素(在这里,是默认定位上下文 body)定位。...position: absolute; 4、固定定位元素定位上下文是视口(浏览器窗口或手持设备屏幕),所以不会随着页面的滚动移动。固定定位适合悬浮标签效果,页面滚动时总是悬浮在特定位置。...position: fixed; 以上就是CSS中4种定位方式,希望对大家有所帮助。

29340

CSS定位概述

1.相对定位:relative 如果对一个元素进行相对定位,它将出现在它所在位置,然后可以通过设置垂直或者水平位置,让这个元素“相对于”它原来位置进行移动,这时元素依然占据原来位置,但移动后会覆盖其他元素...2.绝对定位:absolute 相对定位实际依然是存在文档流中,但绝对定位则会使元素脱离文档流,绝对定位元素是相对于距离他最近得已定位祖先元素确定,如果元素没有已定位祖先元素,那么它位置是相对于初始包含块...浮动同样会使元素脱离文档流。 ? ? 上面说浮动会使元素脱离文档流,文档流中元素会将其当做不存在,实际并非如此。当下一个元素存在文本内容时,文本内容会受到浮动元素影响,会移动留出空间,实际。...解决办法通常有三种: 1.添加一个新div空元素news里面,并对其设置clear属性,浏览器会自动赋予外边距。如图: 缺点:添加无意义元素。  ...2.也可以对父元素添加overflow:hidden属性,该属性会自动清理包含任何浮动元素。 缺点:可能会对原来布局有所影响,例如增加滚动条或截断内容。 3.使用js代码动态控制。

90020

第134天:移动web开发一些总结(二)

当然,这只是建议,也有一些页面采用固定布局情况下能够很好一些没有考虑过媒体查询情况下设备很好展示。...力求页面简单,做如下处理: ① 同比例缩减元素尺寸 ② 调整页面结构布局 ③ 隐藏冗余元素 经常需要切换位置元素使用【绝对定位】,减少重绘提高渲染性能。...关于响应式设计思考: 根据响应式设计理念,一个页面包含所有设备不同屏幕样式和图片,当一个移动设备访问一个响应式页面,就会下载pc,笔记本,ipad等不同设备对应样式。...效率更高,因为css3直接使用浏览器GPU(图形处理器)渲染 2) 当你给一个元素设置它百分比宽度时候,他需要一个比照,也就是父元素,但是当它没有父时候,需要给他一个绝对定位absolute值,...在手机上和平板设备版本,是创建移动web app框架。

1.7K10

不写一行代码实现mobile自动化

工作原理: python-uiautomator2 主要分为两个部分,python 客户端,移动设备 python 端: 运行脚本,并向移动设备发送 HTTP 请求; 移动设备移动设备运行了封装了...uiautomator2 HTTP 服务,解析收到请求,并转化成 uiautomator2 代码; 整个过程: 移动设备安装 atx-agent(守护进程),随后 atx-agent 启动...uiautomator2 服务(默认 7912 端口)进行监听; PC 编写测试脚本并执行(相当于发送 HTTP 请求到移动设备 server 端); 移动设备通过 WIFI 或 USB 接收到...text='Settings').long_click() 拖动 # 0.25S 内将 Setting 拖动至 Clock ,拖动元素中心位置 # duration 默认为 0.5, 实际拖动时间会比设置要高...从元素中心向元素边缘滑动 # Setings 向上滑动。

1.1K50

一文带你响应式网页设计入门

今天,我们大多数人都或多或少使用过这个技术。据统计,截至2019年,谷歌所有搜索访问中有61%是通过移动设备完成。...媒体查询使您可以根据当前设备尺寸来设置元素样式。现在流行CSS策略是首先编写移动样式,然后在其构建更复杂桌面版网页样式。...适用于桌面设备样式,我们利用与一节中示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap,这样可以确保子元素不会换行,通过媒体查询中设置div为flex-basis: 33%...position: relative 容器元素元素允许子元素利用相对于其绝对位置。...position: absolute,top: 0并left: 0iframe上进行设置,从而创建一种行为,其中元素相对于其父元素绝对定位自己……将其粘贴到左上方。

4.7K20

前端成神之路-定位

为什么使用定位 我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果? 1. 小黄色块图片移动,吸引用户眼球。 ? 2....3.2.3 绝对定位(absolute) - 重要 绝对定位元素以带有定位父级元素移动位置 (拼爹型) 完全脱标 —— 完全不占位置; 父元素没有定位,则以浏览器为准定位(Document...绝对定位特点:(务必记住) 绝对是以带有定位父级元素移动位置 (拼爹型) 如果父级都没有定位,则以浏览器文档为准移动位置 不保留原来位置,完全是脱标的。...子绝父相 —— 子级是绝对定位,父级要用相对定位。 子绝父相是使用绝对定位口诀,要牢牢记住! 疑问:为什么布局时,子级元素使用绝对定位时,父级元素就要用相对定位呢?...—— 浏览器可视窗口 + 边偏移属性 来设置元素位置; 跟父元素没有任何关系;单独使用 不随滚动滚动

1.9K20

前端面试01-HTML+CSS

、盲人阅读器、移动设备)以意义方式来渲染网页 便于项目的开发及维护,使HTML代码更具有可读性 4.href与src区别 href:Hypertext Reference缩写,超文本引用,它指向一些网络资源...9.position属性和值含义 position 属性规定元素定位类型。 值 描述 absolute 生成绝对定位元素,相对于 static 定位以外第一个父元素进行定位。...元素位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位元素,相对于浏览器窗口进行定位。...因此,"left:20" 会向元素 LEFT 位置添加 20 像素。 sticky 粘性定位(而sticky相当于加了一个滚动事件处理,当页面滚动到相对应元素,就会变成固定定位效果。...将子元素放置同一行 为父元素中设置font-size: 0,元素重置正确font-size 为inline-block元素添加样式float:left 设置子元素margin值为负数 11.你对

65620

CSS基础-定位:static, relative, absolute, fixed

2. relative定位 概述:relative定位元素保持文档流中位置,但可以通过偏移量(top, bottom, left, right)调整位置,不影响其他元素布局。...常见问题: 定位基准:忘记或误解绝对定位参照物,导致元素出现在意料之外位置。 覆盖问题:绝对定位元素容易覆盖其他内容,未适当调整z-index。...4. fixed定位 概述:fixed定位使元素相对于浏览器窗口固定,即使滚动页面也不会移动。 常见问题: 兼容性:虽然现代浏览器普遍支持,但在一些老版本浏览器中表现可能不佳。...布局干扰:固定元素可能会遮挡或干扰页面其他部分,尤其是滚动时。 避免策略: 测试不同浏览器和设备,确保固定元素各平台上表现一致。...:static元素正常排列,relative元素原位置基础偏移,absolute元素相对于.container定位,而fixed元素则固定在浏览器窗口底部左侧。

7010

《CSS世界》第六章 流破坏与保护总结

高度塌陷是为了让跟随内容可以和浮动元素一个水平线上。(行框盒子正常定位状态下只会跟随浮动元素,不会发生重叠) clear属性 clear属性让自身不能和前面的浮动元素相邻。...锚点定位行为触发条件 URL地址中锚链与锚点元素对应(a标签以及name属性)并有交互行为 可focus锚点元素处于focus状态 锚点定位本质通过改变容器滚动高度或者宽度实现。...锚点定位发生在普通容器元素定位行为是由内而外。 设置了overflow: hidden;元素也是可以滚动,只是滚动条不见了而已。...注意,只有原本是内联水平元素才有这种情况 absolute与overflow 绝对定位元素不总是被父级overflow属性剪裁,尤其当overflow绝对定位元素及其包含块之间时候。...// 这种方式既满足视觉隐藏,屏幕阅读器等辅助设备又支持很好(display: none;不识别或者不可focus)。

74230

CSS布局(三) 布局模型

相对于以前位置移动,偏移前位置保留不动。使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前空间。...被设置了绝对定位元素文档流中是不占据空间,如果某元素设置了绝对定位,那么它在文档流中位置会被删除; 我们可以通过z-index来设置它们堆叠顺序 。...绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素布局就当绝对定位元素不存在时一样,仍然文档流中其他元素将忽略该元素并填补他原先空间。...因为绝对定位框与文档流无关,所以它们可以覆盖页面上其他元素。   浮动元素定位还是基于正常文档流,然后从文档流中抽出并尽可能远移动至左侧或者右侧,文字内容会围绕在浮动元素周围。...由于视图本身是固定,它不会随浏览器窗口滚动滚动而变化,除非你屏幕中移动浏览器窗口屏幕位置,或改变浏览器窗口显示大小,因此固定定位元素会始终位于浏览器窗口内视图某个位置,不会受文档流动影响

2.2K71
领券