一、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bb{
background: burlywood;
height: 50px; margin-left: 100px;
width: 100%;
} .cc{
background: burlywood;
height: 50px; margin-left: 100px;
/*此为默认的，等同于不写*/
width: auto;
} .dd{
background: burlywood;
height: 50px; position: relative;
left: 100px;
width: 100%;
} .ee{
background: burlywood;
height: 50px; position: relative;
left: 100px;
/*此为默认的，等同于不写*/
width: auto;
}
</style>
</head>
<body style="position: relative">
<div class="bb"></div>
<br>
<div class="cc"></div>
<br>
<div class="dd"></div>
<br>
<div class="ee"></div>
</body>
</html>
二、效果图
最左边的时候：
最后边的时候：
三、结论
- div不明确设置width,那么默认的为width:auto.
- 只有使用 margin-left+auto 定位的时候，才能使div刚好占满整个屏幕。
- 可以理解的在使用 margin-left+100% 的时候，div会向右边多出margin-left的距离。（因为100%是相对于其父元素而言，即当前的body）
四、问题
无法理解的是使用position:relative的时候，不管width如何设置都不能刚好占满屏幕，why？