js寻找在视口内的元素-二分查找

通过线性查找检索出现在视口内的元素，效率较低 比如 js寻找在视口内的元素-线性查找 对100个元素进行查找，需要循环100次，或者找到之后跳出循环。

通过二分查找改进，先找到一个出现在视口内的元素，再从它的上下查找。

码

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

1 em的值并不是固定的；

2 em会继承父级元素的字体大小

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

html{font-size: 625%} / 10 ÷ 16 × 100% = 625% /

body{font-size: 14rem;} / 14 × 10px = 14px /

/ 在根元素中定义了一个基本字体大小为625%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ） /

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好

rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem

em与rem的区别：

rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小

两者使用规则：

如果这个属性根据它的font-size进行测量，则使用em

其他的一切事物属性均使用rem

vw、vh、vmax、vmin这四个单位都是基于视口

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

/

如果浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px；如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是108px

/

其他单位：

%（百分比）

一般来说就是相对于父元素

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

css3新单位，相对于视口的宽度或高度中较小的那个

其中最小的那个被均分为100单位的vm

比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px

缺点：兼容性差

1、假如使用em来设置文字大小要注意什么？

注意父元素的字体大小，因为em是根据父元素的大小来设置的。

比如同样是15em，要是父元素是20，那15em就是30px要是父元素是30px,15em就是45px（特别是在多重div嵌套里面更要注意）

2、pc pt ch一般用在什么场景？

这些我们网页设计基本上用不到，在排版上会有用处

3、如何使 1rem=10px

在设置HTML{font-size：625%；}即可

4、如果父元素没有指定高度，那么子元素的百分比的高度是多少？

会按照子元素的实际高度，设置百分比则没有效果

之前写过相对父元素及下一个兄弟元素的方法。

这次补充一下xpath相对节点位置查找元素的所有方法。例子就不举了，自己可以去练练。

xpath相对节点查找方法：

1、xpath('/ancestor::')

查找当前节点的所有先辈节点，即父节点或祖父节点

2、xpath('/ancestor-or-self::')

查找当前节点的所有先辈节点以及本身

3、xpath('/attribute::')

获取当前节点的所有属性

4、xpath('/child::')

查找当前节点的所有子节点

5、xpath('/descendant::')

获取当前节点的所有后代节点，即子节点、孙节点

6、xpath('/following::')

获取当前节点结束标签后的所有节点

7、xpath('/following-sibing::')

获取当前节点的下一个兄弟节点

8、xpath('/parent::')

获取当前节点的父节点

9、xpath('/preceding::')

获取当前节点开始标签前的所有节点

10、xpath('/preceding-sibing::')

获取当前节点的上一个兄弟节点

11、xpath('/self::')

选取当前节点

大概也就这么多，这些方法非常实用，特别是有些元素通过自己的属性无法查找到的时候就需要通过相对节点的位置来查找。

Position属性确认元素的定位

static 是默认定位值，它的定位元素不受top、left、right、bottom的影响，也就是说你给元素设置这四个属性的任何值都没有效果

relative 相对定位，设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。

比如说在做表单布局的时候，有时候label的值并没有和输入框上下居中对齐，它有一点点偏下，效果不是很好看，这个时候我们可以给label向上设置一下偏移让他们居中对齐

absolute 是绝对定位，绝对定位的元素相对于最近的定位祖先元素进行定位，如果没有定位祖先元素，那么就按body定位

absolute最典型的例子就是结合relative一块完成效果，比如我有一个p，它是在页面居中的，但是它的宽度和高度是动态的，我们还有一个span标签希望永远在这右下角10px的位置，这个时候我们就可以利用absolute完成

fixed 是相对视口定位的，简称浮云定位，这个意味着就像你滚动页面，它始终位于同一个位置，top、left、right、bottom用于设置当前元素的位置。

常用的例子就是页面右下角，滚动到顶部的的功能，我们可以对这个元素设置fixed浮动定位，当用户一直向下滚动浏览网页后，想一下子回到顶部，它只要点这个元素就行了，因为之个元素是浮云定位，所以永远是在用户可视范围的右下角

以上就是关于js寻找在视口内的元素-二分查找全部的内容，包括:js寻找在视口内的元素-二分查找、移动端布局适配（px,em,rem,vh,vw)、通过xpath相对节点位置查找元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！