phpstudy集成环境

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

关于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区的减小而减小
这是为何？希望各位大大不吝赐教！！

简单来说，题主所说的网上查阅资料得到的结论： 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的父元素（可能隔了多级），直至视口（根元素的包含块）。

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

你試一試

.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去看例子吧.

【热门文章】
【热门文章】