定位

CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。 position 属性有 4 个值： static、relative、absolute、fixed，默认值为 static。 静态定位 static，默认展示的文档流就是 相对定位 relative，相对的是它原来在文档流中的位置（或者默认位置）。接下来，可以使用 top、 right、bottom 和 left 属性来改变它的位置了。但多数情况下，只用 top 和 left 就可以实现我们想要的效果。 绝对定位 absolute，绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来。 可以看到元素之前占据的空间被“回收了”。这说明，绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素 body 在定位。而这自然而然就引出了一个关于定位的重要概念：定位上下文。 固定定位 fixed，从完全移出文档流的角度说，固定定位与绝对定位类似。 --但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。 --就是说固定定位是展示在窗口的固定位置，不随下拉而上移或下动。固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。 --定位上下文 --绝对定位元素默认的定位上下文是

　　css定位属性允许你对元素进行定位，也就是说它允许你定义元素框对于其正常位置应该出现的位置。css有以下三种定位机制：普通流，浮动，绝对定位。下面来分别进行说明： 一、普通流 　　普通流又称文档流，或者是标准流。指的是文档中可显示的元素在排列时候的开始位置以及它们所占的区域。又因页面中元素的种类不同，所以会按各自的特点去显示。一般是按从上到下，从左到右的顺序输出内容。 二、浮动（float） 　　1、使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是相邻的浮动元素就会停止。 　　2、基本语法:选择器{float:left/right/none} 　　3、特征: 　　　　　a、块元素可以在一行内显示 　　　　　b、按照一个指定的方向移动，遇到父级元素的边界或者是相邻的浮动元素就停止 　　　　　c、行内支持宽高 　　　　　d、脱离文档流 　　　　　　　　浮动后面跟的元素（这个元素没有浮动）的位置是从前面浮动元素的的位置开始的。 　　　　　　　　如是认为标准流标签元素是在网页平面沿x,y轴布局，那浮动就是增加一维，在z轴上实现布局。标准流标签元素坐标为（x,y,0）浮动元素坐标可看成是（x,y,z）。当x,y相同，浮动元素会覆盖标准流元素。 　　　　　　　　注：浮动不是完全脱离文档流，所以非浮动元素里的内容会留出前面浮动元素的位置（盒模型的位置） 　　　　　e

2019杭州云栖大会上，高德地图技术团队向与会者分享了包括视觉与机器智能、路线规划、场景化/精细化定位时空数据应用、亿级流量架构演进等多个出行技术领域的热门话题。现场火爆，听众反响强烈。我们把其中的优秀演讲内容整理成文并陆续发布出来，本文为其中一篇。 阿里巴巴高级地图技术专家方兴在高德技术专场做了题为 《向场景化、精细化演进的定位技术》 的演讲，主要分享了高德在提升定位精度方面的探索和实践，本文根据现场内容整理而成（在不影响原意的情况下对文字略作编辑），更多定位技术的实现细节请关注后续系列文章。 以下为方兴演讲内容的简版实录： 今天要分享的主题是关于定位的场景化、精细化。高德定位，并不只是服务于高德地图本身，而是面向所有的应用开发者和手机设备厂商提供定位服务。目前已有30万以上的APP在使用高德的定位服务。 用户每天会大量使用定位服务，比如看新闻、打车、订外卖，甚至是购物，首先都是要获得位置信息，有了更精准的位置信息，才可能获得更好的服务体验。 高德地图有超过1亿的日活用户，但是使用定位的有好几个亿，每天的定位请求数量有一千亿次。如此大的数据量，高德定位服务可以保持毫秒级的响应速度，我们在这里面做了很多工作。此外，我们还提供全场景的定位能力，不管为手机、车机还是任何厂家，都能提供位置服务。 我今天从四个方面介绍，分别是： 定位面临的挑战 高德地图全场景定位 分场景提升定位精度

随笔记录方便自己和同路人查阅。 #------------------------------------------------我是可耻的分割线------------------------------------------- 　　学习 selenium自动化之前，最好先学习HTML、CSS、JavaScript等知识，有助于理解定位及操作元素的原理。关于python和selenium安装请自行搜索别的资料， 这里就不多做介绍了，所有例子均使用 python3.6+selenium执行的。 #------------------------------------------------我是可耻的分割线------------------------------------------- XPath 定位 　　以前介绍的几种定位方法相对来说比较简单，理想状态下，在一个页面当中每一个元素都有一个唯一 id 和 name 属性值，我们可以通过它们的属性值来找到它们。但是实际项目中并非想象的这般美好，有时候一个元素并没有 id 、 name 属性，或者页面上多个元素的 id 和 name 属性值相同，又或者每一次刷新和页面， id 值都会随机变化，这些情况下，我们如何来定位元素呢？ 　　下面介绍 Xpath 与 CSS 定位，与前面介绍的几种定位方式相比，他们提供了灵活的定位策略

随笔记录方便自己和同路人查阅。 #------------------------------------------------我是可耻的分割线------------------------------------------- 　　学习 selenium自动化之前，最好先学习HTML、CSS、JavaScript等知识，有助于理解定位及操作元素的原理。关于python和selenium安装请自行搜索别的资料， 这里就不多做介绍了，所有例子均使用 python3.6+selenium执行的。 #------------------------------------------------我是可耻的分割线------------------------------------------- Partial link 定位是对 link 定位的一种补充，有些文本连接会比较长，这个时候我们可以取文本连接的一部分定位，只要这一部分信息可以唯一地标识这个连接。 <a class=’mnav’ name=’ti_lang’ href=’#’> 一个很长的文本连接 </a> 通过 partial link 定位如下： #导入webdriver模块它是用来控制浏览器的 from selenium import webdriver driver = webdriver.Chrome()#实例化

定位(position) 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！ 为什么要用定位？ 那么定位，最长运用的场景再那里呢？ 来看几幅图片，你一定会有感悟！ 第一幅图， 小黄色块可以再图片上移动： 第二幅图， 左右箭头压住图片： 第三幅图, hot 再盒子外面多出一块，更加突出： 以上三个小地方，如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，just soso！ 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 1、边偏移 也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等 2、定位模式(定位的分类) 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下： 选择器{position:属性值;} position属性的常用值 静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。 上面的话翻译成白话：

Android GPS定位 获取经纬度 Android 应用服务器 Eclipse 移动 是手机与手持设备的最大特点，可以通过Eclipse的DDMS视图，模拟设备的位置变化，改变经纬度后，点击send，然后运行程序，在应用程序中，动态的获取设备位置，然后显示当前的位置信息。 获取位置信息分为三步: 1. 添加系统权限，来支持对LBS硬件的访问 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"> </uses-permission> 2. 得到系统服务 的LocationManager 对象 LocationManager loctionManager; String contextService=Context.LOCATION_SERVICE; //通过系统服务，取得LocationManager对象 loctionManager=(LocationManager) getSystemService(contextService); 3. 得到位置提供器，通过位置提供器，得到位置信息 ，可以指定具体的位置提供器，也可以提供一个标准集合，让系统根据 标准匹配最适合的位置提供器，位置信息是由位置提供其提供的。 a. 通过GPS位置提供器获得位置(指定具体的位置提供器) String

XPath即为XML路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的语言。 原理：基于html的文档目录结构进行定位元素。 以html代码为例讲解各种定位方法： 1. 绝对路径：以/开头从根节点一直找到当前节点 定位第一个div里面的img标签：/html/body/div/img[@alt="div1-img1"]，其中[]里面是通过标签属性来确定要找到元素（img标签的alt属性） 绝对路径比较脆弱，变动结构后就容易变化，维护成本高，不推荐使用 2. 相对路径：以//开头的，根据要定位的元素的特征来定位的 定位第二个div里的input标签：//input[@name="div2input"] 一般都会用相对路径 3. 索引定位： 在找到一个集合结果后，通过索引定位第几个 定位第二个input标签：//input[2] 如果页面中存在特征相同多个类似元素，此方法好用 4. 属性值定位： 上面已经提到过了，就是在[]里面通过标签的属性来定位 例如定位“百度搜索”的超链接：//a[@href="http://www.baidu.com"] 也可以使用多个属性定位：//input[@type="text" and @name="address"]或//input[@type="text"][@name="address"]

定位position position属性的值： static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ---固定定位 sticky ---粘性定位（本文不讲这个） position:static 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top , right , bottom , left 和 z-index 属性无效。 position:relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。 注意：元素并未脱离文档流 示例 .box { width: 100px; height: 100px; background: lightgreen; color: #000; border: 1px solid #ccc; } #two { position: relative; top: 20px; left: 20px; background: lightcoral; } #outer { margin: 0 auto; width: 500px; height: 500px; border: 1px solid #000; } <div id="outer"> <div class="box" id

什么是定位体系？ 定位体系分三种：常规流（normal flow）、浮动（float）、绝对定位（absolute positioning）。 1. 常规流 ：从直观上理解正常流指的是元素按照其在HTML 中的位置顺序决定排布的过程，主要的形式是自上而下，一行接一行，每一行从左至右。 2. 浮动 ：相对于常规流来讲，它漂浮在常规流的上方。其可以使元素脱离文档流，按照指定方向发生移动。 3. 绝对定位 （absolute positioning）： a.static（常规流）：其为默认，一般的元素的定位都是静态定位。 b.relative（相对位置）：相对定位如其名相对于自身来定位，通过left、right、top、bottom进行定位后，元素会根据原来的位置进行移动，需要注意的是使用position：relative的元素不会脱离文档流，元素本身占据的位置也会保留。 c.absolute（绝对位置）：其定位是布局中比较常用的定位，在使用时其生成的位置是相对于最近的已定位父（祖先）级来定位；position：absolute属性是脱离文档流的，重新定位后元素不会占据原来的位置. <style> .relative{ width: 100px; height: 100px; position: relative; border: 2px solid red; } .absolute{