HTML中盒子问题！
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
要给盒子设置下边框15像素,双实线黄色的边框，可以使用HTML的style属性进行设置，具体方法如下：<style>.box { border-bottom: 15px solid yellow border-bottom-style: double
}</style>
或者也可以直接在HTML元素的style属性中进行设置，如：
<div style="border-bottom: 15px solid yellowborder-bottom-style: double">这是一个盒子</div>
在这种情况下，border-bottom属性用于设置下边框的宽度和颜色，border-bottom-style属性用于设置下边框的样式，double值表示双实线。
注意：这里的颜色值可以是颜色名称（如yellow），也可以是十六进制颜色值（如#FFFF00）或RGB颜色值（如rgb(255, 255, 0)）。
方法一：绑定数据在dom元素上。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
window.onload=function() {
var divs = wrap.querySelectorAll('div')
for (var i = 0 i < divs .length i++) {
divs[i]._index = divs.length - i
divs [i].onclick = function() {
alert(this._index )
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div>模块5</div>
<div>模块4</div>
<div>模块3</div>
<div>模块2</div>
<div>模块1</div>
</div>
</body>
</html>
方法二：闭包
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
window.onload = function ()
{
var divs = wrap.querySelectorAll ('div')
var anonymous = function (i)
{
divs[i].onclick = function ()
{
alert (divs.length - i)
}
}
for ( var i = 0 i < divs.length i++)
{
anonymous (i)
}
}
</script>
</head>
<body>
<div id="wrap">
<div>模块5</div>
<div>模块4</div>
<div>模块3</div>
<div>模块2</div>
<div>模块1</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）