【转】css中width：100%是相对于谁
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 30px;
padding: 30px;
border: 20px solid red;
position: relative;
}
.child {
width: 100%;
height: 20px;
background-color: green;
float: left;
position: absolute;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
---------------------------------
从刚开始接触CSS到现在，⼀般⽤的单位都是像素这种绝对的单位。简单⽅便，⽽且还不容易出现⼀些莫名其妙的问题。优点听起来不错，缺点也还是很多的，⽐如说：页⾯缺乏灵活性，⾃适应性不强······ 那么有什么好的解决⽅法吗？有，不过咱还是把范围缩⼩，就放在width:100%个这相对单位上来看看。
理论篇
width:100%的相对于谁
想必学过CSS，了解了相对单位的童鞋们都应该知道：相对单位于都有⼀个基准。那么width:100%是基于谁呢？
我把可能出现的⼏种情况列在下⾯，并以DEMO说明，在最后进⾏总结。
⼀般层级元素
1. <styletype="text/css">
2. .demo-parent {width:400px;height:60px;line-height:30px;background:blue;}
3. .demo-child {width:100%;height:30px;background:pink;}
4. </style>
5. <divclass="demo-parent">
6. <divclass='demo-child'></div>
7. </div>
下⾯我们把上⾯的demo-aprent中加⼊padding,margin,border值
1. <styletype="text/css">
2. .demo-parent {width:400px;height:60px;line-height:30px;background:blue;}
3. .demo-parent-margin {margin:10px;}
4. .demo-parent-padding {padding:10px;}
5. .demo-parent-border {border:5px solid #FF486B;}
6. .demo-child {width:100%;height:30px;background:pink;}
7. </style>
8. <divclass="demo-parent demo-parent-padding">
9. <divclass='demo-child'></div>
10. </div>
对于以上的加⼊过程之后的图如下，你可以从中得到什么结论呢？
width:100% DEMO效果
通过以上，我们就可以得知：对于不存在其它关系的嵌套，width:100%是直接基于⽗级DIV的宽度（宽度要指定）。
存在浮动元素的层级关系
1. <styletype="text/css">
2. .demo-child-float{float:left;}
3. </style>
4. <divclass="demo-parent demo-parent-border">
5. <divclass='demo-child demo-child-float'></div>
6. </div>
得出的结论同上。
存在定位元素
1. <styletype="text/css">
2. .pos-relative { position:relative;}
3. .pos-absolute { position:absolute;}
4. </style>
5. <divclass="demo-parent demo-parent-border">
6. <divclass='demo-child pos-relative'></div>
7. </div>
对于以上结构中，外层div是使⽤的默认的，⽽内层div使⽤相对定位，⽽width:100%也只基于基⽗级。请继续看如下代码：
1. <divclass="demo-parent demo-parent-border">
2. <divclass='demo-child pos-absolute'></div>
3. </div>
外层div使⽤默认的定位⽅式，⽽⾥层div使⽤的是绝对定位，⽽些时你会发现绝对定位的div宽度为body元素同宽，也就是说其基于body，或html元素（其实这个也很容易理解：因为position:absolute是基于body元素来进⾏定位的）。
1. <divclass="demo-parent demo-parent-border pos-relative">
2. <divclass='demo-child pos-absolute'></div>
3. </div>
由上⼀个例⼦，我们知道了position:absolute是基于body元素，⽽当给上层div⼀个position:relative时，它就成了width:100%的基准点了。⼩结论：
1. 对于使⽤position:relative的⼦类元素⽽⾔，width:100%也始终是基于基⽗级元素⽽并不会基于其上层元素中的relative。
2. 对于绝对定位的⼦⽆素，要是其外层的所有元素中都没有⽤position:relative，则width:100%是基于body，否则就是离基最近的⼀个
position:relative的元素。
3. ⽽对于position:fixed的元素，其⼀直是基于body，所以其宽度100%就是基于body。
width:100%好像是多余
如果你对CSS继承关系⽐较了解的话，你可能就知道上⾯的“width:100%”可能就是不句多余的话，并且不使⽤时，效果可能更好。⽐如最上⾯的那张图⽚上“只设置padding”时，要不使⽤width:100%就不会出现难看的溢出。那么width:100%合适在什么时候使⽤呢？
width:100%在什么情况下使⽤不多余
我们要弄清楚什么时候合适使⽤，那我们就要弄清楚它在什么时候多余。说⽩了就是width什么时候会⾃动继承。以下是我的总结：
1. 内层⼦元素必须为块级元素，才有可能出现宽度继承
2. 当⽗元素宽度确定，⼦元素不存在浮动，绝对定位，固定定位时，其宽度也能够很好的继承；相反，宽度会零（只有通过⾥⾯的内容
把其撑开）。
3. 当⽗元素宽度不确定时（宽度是继承⽽来，或是⽤的相对单位），不会对继承造成什么影响。其仍然满⾜上⾯的1、2两条。
实践篇
既然上⾯说了，到底知道了这些⼜有什么⽤呢！不知道你有没有注意到有些⽹站在⽔平⽅向上，永远都是满屏幕，不会出现⽔平滚动条。那么这些灵活的布局是怎么实现的呢？
灵活的两列式布局
很多时候，你可能有种需求：整个⽹页为整个⽹页宽度，在主体部分分为两列，其中左边部分宽度⾃动扩展，⽽右边部分宽度固定。那么，这⼀类的布局⽅式如何实现呢？你完全可以这样。。。
1. <styletype="text/css">
2. #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;}
3. #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;}
4. #main-right {min-height:400px;background:#7CC0FF;}
5. .float{float:left;}
6. .clear{clear:both: height :0; line-height:0; font-size:0;}
7. </style>
8. <divid="main">
9. <divid="main-left"class="float">
10. 这个是左边部分，宽度确定
11. </div>
12. <divid="main-right">
13. 这个是右边部分，宽度⾃动扩展
14. </div>
15. <divclass="clear"></div>
16. </div>
那么，要是我们想在右边宽度固定，⽽左边宽度⾃适应，⼜如何呢？
1. <styletype="text/css">
2. #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-right:300px;}
3. #main-left {margin-right:-300px;width:300px;min-height:400px;background:#98FF1A;}
4. #main-right {min-height:400px;background:#7CC0FF;}
5. .float{float:right;}
6. .clear{clear:both: height :0; line-height:0; font-size:0;}
7. </style>
8. <divid="main">
9. <divid="main-left"class="float">
10. 这个是右边部分，宽度确定
11. </div>
12. <divid="main-right">
13. 这个是左边部分，宽度⾃动扩展
14. </div>
15. <divclass="clear"></div>
16. </div>
请注意看上⾯CSS有变动的地⽅。
或许你还可以这样来。。。
1. <styletype="text/css">
2. #main {width:100%;min-height:600px;background:#FEFF0A;}
3. #main-con {width:100%;min-height:500px; background:#8E8DCC;}
4. #main-con-left {margin-right:300px;min-height:400px;background:#98FF1A;}
5. #main-con-right {width:300px;margin-left:-300px;min-height:400px;background:#7CC0FF;}
6. .float{float:left;}
7. .clear {clear:both; font-size:0; height:0; line-height:0;}
8. </style>
9. <divid="main">
10. <divid="main-con"class="float">
11. <divid="main-con-left"></div>
12. </div>
13. <divid="main-con-right"class="float"></div>
14. <divclass="clear"></div>
15. </div>
对于以上的⼏种⽅式，都有优缺点。可能在实际使⽤时还要是对其进⾏相应的处理，以保证布局不乱。
⾃适应的三列式布局
现在，我们在以上基础上进⾏扩展。要求是：⽹页铺满屏幕，主体部分分为3列，左右两列宽度固定，中间⼀列宽度⾃适应。实现代码如下：
1. <styletype="text/css">
css布局左边固定右边自适应2. #main {min-height:600px;background:#FEFF0A;padding:0 300px;}
3. #main-left { width:300px;min-height:400px; margin-left:-300px;float:left;background:#98FF1A;}
4. #main-center {min-height:400px;background:#8E8DCC;}
5. #main-right {min-height:400px; width:300px; margin-right:-300px; float:right;background:#7CC0FF;
}
6. .clear {clear:both; height:0; line-height:0; font-size:0;}
7. </style>
8. <divid="main">
9. <divid="main-left"></div>
10. <divid="main-right"></div>
11. <divid="main-center"></div>
12. <divclass="clear"></div>
13. </div>
当然对于以上三列式布局，我们也可以通过内嵌div的⽅式来进⾏扩展，在这⾥我就不给出源码了。
⼩结
光看不练是没有多⼤意义的。你可以按照以上的思路来写⼀下，试⼀下，或许还有意外惊喜。
对于以上代码，在标准浏览器上⾯肯定是不存⼤的问题。但是你有没有想过，⾃适应部分⾥⾯的内容可能会把div撑⼤，导致布局变乱。其实，你在css加添加: #main-center img {max-width:80%;}
如果你的⽤户中使⽤IE6的⽐例很⾼的话，你可能就要注意IE6浮动引起的双边距问题。
对于以上结构，还可以进⾏扩展。⽐如说到了⼿机等⼩分辨率屏幕上也能够有良好的⽤户体验。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。