html+css的高级盒子模型

来源：互联网发布：keygen注册机下载 mac 编辑：程序博客网时间：2024/06/05 04:25

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

overflow:scroll;这个属性应该注意，加上这个属性后，元素出现滚动条，但是其真正的宽和高不会增加，但是会占用width和heigth的空间，也就是说如果出现滚动条，这个时候元素的width和heigth的值为滚动条的宽度加上现在的width或heigth。

scrollTop这个属性需要当前元素的内容要比当前元素的高度高，当滚动条向下滚动的时候，滚动上去的那部分，即看不见了的那部分为scrollTop。

scrollHeight这个属性需要当前元素的内容要比当前元素的高度高，也就是内部内容的实际高度。

offsetTop注意，这个属性不是到其父元素的举例，而是border上边界（不包括border）到浏览器上边界的距离。

offsetHeigth没有这个属性。

clientTopclient，故名思议，就是我们能看见的部分，当然不包括margin，因为我们是看不见的，能看见的也就是border，padding和width或heigth，排除clientHeigth部分，剩下的也就是clientTop了。

clientHeight根据上面的可见部分，这个属性包括padding和width的内容（注意，是不包括滚动条部分的）。

下面附上源码（和上面显示有点区别，上面是在编辑器中的效果）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"><head><title>高级盒子模型测试</title><script src="./jquery-2.1.4.min.js" type="text/javascript"></script><script src="./test.js" type="text/javascript"></script></head><body><div style="border:3px solid gray;"><div id="ele01" style="width:100px;height:200px;background-color:green;margin:20px;padding:10px;border:5px solid red;overflow:scroll;"><font>测试测试测试测试测试测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br><font>测试</font></br></div><div><b>overflow:scroll;</b>这个属性应该注意，加上这个属性后，元素出现滚动条，但是其真正的宽和高不会增加，但是会占用width和heigth的空间，也就是说如果出现滚动条，这个时候元素的width和heigth的值为滚动条的宽度加上现在的width或heigth。</br></br><b>scrollTop</b>这个属性需要当前元素的内容要比当前元素的高度高，当滚动条向下滚动的时候，滚动上去的那部分，即看不见了的那部分为scrollTop。</br><b>scrollHeight</b>这个属性需要当前元素的内容要比当前元素的高度高，也就是内部内容的实际高度。</br></br><b>offsetTop</b>注意，这个属性不是到其父元素的举例，而是border上边界（不包括border）到浏览器上边界的距离。</br><b>offsetHeigth</b>没有这个属性。</br></br><b>clientTop</b>client，故名思议，就是我们能看见的部分，当然不包括margin，因为我们是看不见的，能看见的也就是border，padding和width或heigth，排除clientHeigth部分，剩下的也就是clientTop了。</br><b>clientHeight</b>根据上面的可见部分，这个属性包括padding和width的内容（注意，是不包括滚动条部分的）。</br></div></div></body></html>

还有一张网上找的模型图片：

推荐文章地址：

http://www.cnblogs.com/yuteng/articles/1894578.html

0 0