css margin可以改变容器的尺寸

元素尺寸:

1.可视尺寸-clientwidth标准

2.占据尺寸--outerwidth(yy)

margin和可视尺寸

1.适用于没有设定width/height的普通block水平元素

float元素,absolute,fixed,inline,水平,table-cell元素

2.只适用于水平方向尺寸

一侧定宽的自适应布局

margin和占据尺寸

1.block/inline-block水平元素均适用

2.与有没有设定width/height值无关

3.适用于水平方向和垂直方向

JS HTML标签尺寸距离位置定位计算

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的宽)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

http://blog.sina.com.cn/s/blog_966e43000101bhi9.html

1.document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条。

2.document.body.clientHeight 获取body元素对象的内容可视区域的高度,即clientHeight=height+padding,不包括滚动条。

浏览器兼容性 在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的。所以当给body设置width和height时,在IE7中clientWidth和clientHeight的值是要比其它浏览器中的值小一些的。

3. document.body.offsetWidth 获取body元素对象的宽度,即offsetWidth=width+padding+border,也可以写成offsetWidth=clientWidth+border。 4.document.body.offsetHeight 获取body元素对象的高度,即offsetHeight=height+padding+border,也可以写成offsetHeight=clientHeight+border。

浏览器兼容性 在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的。所以offsetWidth和offsetHeight的值还需要加上滚动条的宽度。当然最终的值和其它浏览器是一样的。 5.document.body.scrollWidth获取body元素对象内容的实际宽度,即对象的滚动宽度。6.document.body.scrollHeight 获取body元素对象内容的实际高度,即对象的滚动高度。 浏览器兼容性 在FireFox和IE中,其获取的就是body元素对象内部内容的实际宽高。

在Chrome、Safari、Opera中,scrollWidth和scrollHeight获取的是整个页面文档的滚动宽高。 document.body.clientLeft获取body元素对象的左边框的宽度。

7.document.body.clientTop 获取body元素对象的上边框的宽度。 浏览器兼容性 各浏览器表现一致。document.body.offsetLeft获取body元素对象相对于自身的位置。

8.document.body.offsetTop获取body元素对象相对于自身的位置。 浏览器兼容性 在Chrome、Opera、Safari、IE8、IE9和IE10中,工作正常,offsetLeft和offsetTop的值都为0。

9.在FireFox中,offsetLeft和offsetTop的值为负的body元素的border-width。 在IE7中,offsetLeft和offsetTop指的是body元素对象的边框(不包括边框)到页面文档边缘的距离。 document.body.scrollLeft获取页面文档向右滚动过的像素数。

10.document.body.scrollTop获取页面文档向下滚动过的像素数。 浏览器兼容性 在FireFox、IE8、IE9和IE10中,scrollLeft和scrollTop的值始终为0。 在IE7中,scrollLeft和scrollTop的值为body元素对象最顶端和对象内容的最顶端之间的距离,即滚动条滚过的距离。

你可能感兴趣的:(css margin可以改变容器的尺寸)