关于width:100%对普通文档流中块级元素,浮动元素,绝对定位元素的影响问题!....希望各位能人壮士各显神通!

问题背景:
图片描述

<div class=”parent”>
    <div class=”side”>侧栏</div>
    <div class=”main”>主栏</div>
</div>

两栏间距为10px。

   关于width:100%的探究与问题:
经过网上查阅资料返现,width:100%指的是:其父元素content区的width*100%,测试了一下:
⑴普通文档流中的元素:
在普通文档流中的元素div[class=side]和div[class=main],在设置了width:100%后,宽度为父元素宽度(即行高):
图片描述
在它们父元素div[class=parent]中设置了padding-left:210px之后(即父元素content区宽度减少210px之后),它们的width都减少了210px。
图片描述
结论成立(√)
⑵将div[class=main]设置float:left,使其浮动出来:
在普通文档流中的元素div[class=side]和浮动元素div[class=main]中都设置了width:100%后,它们的宽度为父元素宽度(即行高):
图片描述
在它们父元素div[class=parent]中设置了padding-left:210px之后(即父元素content区宽度减少210px之后),它们的width都减少了210px。
图片描述
结论成立(√)
⑶将div[class=main]设置position:absolute,使其脱离文档流:
在普通文档流中的元素div[class=side]和浮动元素div[class=main]中都设置了width:100%后,它们的宽度为父元素宽度(即行高):
图片描述
在它们父元素div[class=parent]中设置了padding-left:210px之后(即父元素content区宽度减少210px之后)那么问题来了!!!看图:
图片描述
可以看到,设置了position:absolute的div[class=main]元素右边超出去了!!它的宽度并没有随着父元素content区的减小而减小
这是为何?希望各位大大不吝赐教!!

阅读 6.1k
3 个回答

简单来说,题主所说的网上查阅资料得到的结论: width:100%指的是:其父元素content区的width*100%,是不完善的。

严谨的说法是: css属性width取百分比值的时候,其参照是元素的包含块(Containing Block)

包含块是一个用于css定位和尺寸计算的逻辑矩形框,详细概念请查看:http://www.w3help.org/zh-cn/kb/008/,里面可以看到判断一个元素的包含块是哪一个元素的流程。

就题主的例子而言,浮动及普通文档流,div.main的包含块是div.parent(直接父元素)。但绝对定位的时候,div.main的包含块是需要一直向上查找,到第一个position不为static的父元素(可能隔了多级),直至视口(根元素的包含块)。

你試一試

.parent {
    position: relative;
}

因為position的default是static

var element = document.documentElement; 
getComputedStyle(element);

看例子:

  1. 沒有position: relative;
    http://jsfiddle.net/8hufs3vf/1/

  2. position: relative;
    http://jsfiddle.net/8hufs3vf/2/

之所以position: relative; 會有影響, 是因為如果是position: absolute, 之後, 它會向上找第一個非default position: fixed, absolute, relative, 作為其parent.

這個例子中的width: 100%的parent是default static, 所以它會一直找到document, 然後就溢出了.

PS: 好像直接在這裡展示有問題(iframe?), 麻煩你自己去JSFiddle去看例子吧.

绝对定位相对于离得最近的一个非static的定位元素,而且根据content-box的盒子模型父元素的content范围并未减小,也就是说main的宽度的文档的宽度。父元素的宽度同样

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题