html中怎样获取子元素的索引位置

jQuery 的 index() 方法返回指定元素相对于其他指定元素的索引值，注意：索引值是从0开始计数的。获得当前元素的索引值可用click事件触发

$(selector)click(function() {

num = $(this)index();

}

示例代码如下：获取被点击的a标签的索引值

创建Html元素

<div class="box">

<span>点击a标签获取其索引值：</span>

<div class="content">

<a href="#">我是第一个a标签</a>

<a href="#">我是第二个a标签</a>

<a href="#">我是第三个a标签</a>

<a href="#">我是第四个a标签</a>

</div>

</div>

              什么是HTML文档流

HTML元素可分为两大类;内联元素和块级元素二者在显示方式上是不同的

  内联元素是在水平方向上一个拦一个排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对控制内联元素的高度是不起作用的,水平方向的一行将构成一个所谓的line box,这是一个逻辑上的概念,line box是一个虚拟的矩形区域,包含了组成这行的所有内联元素,其高度本行内所有内联元素内容完全显示出来,尽管浏览器自动计算内联元素高度,我们还是可以通过设置line-height属性的值来改变元素的高度

块级元素是在竖址方向上一个接一排列的,元素前后均产生换行,竖直方向上元素之间的距离可以用上下边距来控制,注意竖直方向的边距会产生重叠,其间距值取相邻元素中边距较大的那一个,常见p,div等都是块级元素,这些元素的内容都 是以块的形式显示在浏览器中,

  内联元素和块级元素各自遵循着不同的显示方式,这就构成了html的文档, 文流档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列

1下表列出了内联元素和块级元素的主要区别

块元素：不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）

缺点：1相邻元素垂直。相邻外边距会重叠。margin-bottom和margin-top重叠（重叠之后的值是两个值中的最大值）

第一种解决方案：原理bfc相关

2父子的相邻，父元素的margin-top和子元素的margin-top发生重叠 （重叠之后的值是两个值中的最大值）

关于父子相邻的解决方案：

第一种解决方案取消相邻，给父元素设置border或者padding-top 让相邻之间有间隔。

第二种解决方案，父元素加overflow:hidden属性 -- 原理bfc相关

块元素包括：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td

行内元素：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向用line-height属性。

多个行内元素排列在一起，他们之间会出席空格。

行内元素包括：font , span, b , i , u, sub, sup, a ,

标红为常见的块元素和行内元素。

行内块：共享一行，可设置宽高,多个行内元素排列在一起，他们之间会出席空格。可设置margin,padding属性。集合了块和行内的所有优点。

行内块元素包括：img,input

注意：设置两个并排的div一个width:20%,一个width:80%用display:inline-block 让两个div并排，会使右侧的div向下排列

效果图：

产生该问题的原因是：div1+div2的宽度：100%但是display:inline-block 的设置会使两个div之间有空格。width就为100%再加上空格 大于 父级的宽度，所以会折行。

处理方式：将div1和div2之间的空格去掉

text-align这个属性在水平方向上对行内（inline），行内块(inline-block)以及文字都起作用（行内元素或行内块元素设置水平居中用text-align属性）

行内元素：垂直居中用line-height属性

行内块：设置垂直居中，不能line-height会出问题，应该用vertical-align多个行内块元素并排，同时设置居中

同级中找设置一个最高的行内块元素(这个行内块元素内容为空，仅仅用来做对齐的标尺)，让其他元素向它对齐。

块元素：

块元素水平居中：用margin-left和margin-right设置为auto的方式 类似：margin:0 auto

块元素水平垂直居中：

情况1子级元素定宽定高(宽高各为100px)：

情况2：子级元素宽高不定：

第一种：

第二种：

块元素：display:block

行内：display:inline

行内块：display:inline-block

让块消失：display:none（元素结构还在，但是在页面不显示，也不占位置）

vertical-align属性：垂直方向的对齐方式，对齐依据找到同级别最高的元素，以该元素为参照进行vertical-align的设置。

值：top,middle,bottom

以上就是关于html中怎样获取子元素的索引位置全部的内容，包括:html中怎样获取子元素的索引位置、什么是HTML文档流、html中内联元素和块级元素的区别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！