<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>width / height percentage</title>
<style>
*{margin:0;padding:0;}
.outer,.inner{
width:50%;
}
.outer{background:red;margin-bottom: 30px;}.inner{background:blue;}
ul{margin-left:30px;}
li{color:#999;font-weight:bold;font-size: 14px;}
</style>
</head>
<body>
<ul>
<li>父div是固定宽度</li>
<li>子div 百分比宽度 是相对于 父div的宽</li>
<li>解析过程：先计算 子div 的宽度值，确定后，再根据子div的 margin 或 父div 的 padding 调整 子div的布局</li>
<li>绝对定位的 子div 已脱离文档流，其后渲染的元素布局时不会考虑他的存在</li>
<li>绝对定位的 子div 已脱离文档流，宽度其百分比相对于离它最近的 absolute/relative定位 的父容器的宽度，如果没有，则相对于 整个文档宽度</li>
<li>绝对定位的 子div 已脱离文档流，IE6中（bug）宽度百分比相对于父div，不管其是否是 绝对定位</li>
<li>绝对定位的 子div 已脱离文档流，父div 不会被其高度支撑（即父div 的高度和 绝对定位的 子div 没关系）</li>
</ul>
<div class="outer" style="width:800px;">
div - outer - fixed width 800px
<div class="inner">
div - inner - 50%
</div>
<div class="inner" style="margin-left:500px;position:absolute;">
div - inner - margin-left:500px and width 50% and position:absolute
</div>
<div class="inner" style="margin-left:20px;">
div - inner - 50% and margin-left:20px
</div>
<div class="inner" style="position:absolute;">
div - inner - 50% and position:absolute
</div>
</div>
<ul>
<li>父div是百分比宽度(结论同上)</li>
</ul>
<div class="outer" style="width:50%;">
div - outer - fixed width 50%
<div class="inner">
div - inner - 50%
</div>
<div class="inner" style="margin-left:500px;position:absolute;">
div - inner - margin-left:500px and width 50% and position:absolute
</div>
<div class="inner" style="margin-left:20px;">
div - inner - 50% and margin-left:20px
</div>
<div class="inner" style="position:absolute;">
div - inner - 50% and position:absolute
</div>
</div>
<ul>
<li>父div是百分比宽度 + relative(absolute的效果同relative)</li>
<li>absolute 定位的 子div 的百分比宽度 是相对于 relative 定位的父div</li>
</ul>
<div class="outer" style="width:50%;position:relative;">
div - outer - fixed width 50% + relative
<div class="inner">
div - inner - 50%
</div>
<div class="inner" style="margin-left:500px;position:absolute;">
div - inner - margin-left:500px and width 50% and position:absolute
</div>
<div class="inner" style="margin-left:20px;">
div - inner - 50% and margin-left:20px
</div>
<div class="inner" style="position:absolute;">
div - inner - 50% and position:absolute
</div>
</div>
<ul>
<li>父div是百分比宽度</li>
<li>width:100% 并不包含margin-left margin-right的属性值，直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。</li>
<li>width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行！！！这其中margin的值已经包含其中了（也就是一整行）如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。</li>
<li>IE6 中会撑大 父div 的原有宽度 </li>
</ul>
<div class="outer" style="width:500px;">
div - outer - percent width 500px
<div class="inner" style="width:100%;margin-left:10px;">
div - inner - width:100% + marginLeft:10px
</div>
</div>
<div class="outer" style="width:500px;">
div - outer - percent width 500px
<div class="inner" style="width:auto;margin-left:10px;">
div - inner - width:100% + marginLeft:10px
</div>
</div>
<ul>
<li>父 div height:100% 时，其自身不会填充整个文档高度</li>
<li>父 div height:100% 时，若body有固定高度，则 此处的 height:100% 的 outer div 的高度与body固定高度尺寸相同，IE6也如此</li>
</ul>
<div class="outer" style="width:100%;height:100%;">
<div class="inner" style="height:100%;margin-left:30px;">
div - inner - height:100%
</div>
</div>
<ul>
<li>父 div height:200px 时，子div 高度会 填满 父div 的高度</li>
</ul>
<div class="outer" style="width:100%;height:200px;">
<div class="inner" style="height:100%;margin-left:30px;">
div - inner - height:100%
</div>
</div>
</body>
</html>
width & percentage
需积分: 9 15 浏览量
2019-04-21
01:05:20
上传
评论
收藏 33KB 7Z 举报
test.7z （2个子文件） 
wh - percentage.html 5KB
test-result.png 37KB资源评论
weixin_38669628
- 粉丝: 383
- 资源: 6万+
