width:100%
width:100%代表自身Width=父contentWidth*100%
其中当自身box-sizing:content-box(也是默认值)时,自身Width的含义为自身contentWidth,当box-sizing:border-box(IE盒模型,IE8及以下只支持IE盒模型)时,自身Width的含义为自身contentWidth+paddingWidth+borderWidth。(在IE8及以下的浏览器中只支持IE盒模型,在IE8+及其他主流浏览器中,通过CSS新增的box-sizing属性可以设置浏览器的盒模型。box-sizing属性的默认值是content-box,即W3C标准盒模型;而将box-sizing值设置为border-box时,则会更改为IE盒模型)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#f {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: yellow;
border: 2px solid red;
box-sizing: border-box;
}
#c {
width: 100%;
height: 100%;
padding: 20px;
margin: 20px;
background: skyblue;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="f">
father
<div id="c">
child
</div>
</div>
<script type="text/javascript">
if(window.getComputedStyle) {//W3C,IE9+
var fStyle = window.getComputedStyle(document.getElementById("f"));
var cStyle = window.getComputedStyle(document.getElementById("c"));
} else {//IE
fStyle = document.getElementById("f").currentStyle;
cStyle = document.getElementById("c").currentStyle;
}
alert(fStyle.width);//200px,若在IE(IE11中试过)中为156px
alert(cStyle.width);//156px
</script>
</body>
</html>
width:auto
width:auto代表自身contentWidth+paddingWidth+borderWidth+marginWidth=父contentWidth
其中当自身box-sizing:content-box(也是默认值)时,width值为contentWidth,当box-sizing:border-box(IE盒模型,IE8及以下只支持IE盒模型)时,width值为contentWidth+paddingWidth+borderWidth。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#f {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: yellow;
border: 2px solid red;
box-sizing: border-box;
}
#c {
width: auto;
height: auto;
padding: 20px;
margin: 20px;
background: skyblue;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="f">
father
<div id="c">
child
</div>
</div>
<script type="text/javascript">
if(window.getComputedStyle) {//W3C,IE9+
var fStyle = window.getComputedStyle(document.getElementById("f"));
var cStyle = window.getComputedStyle(document.getElementById("c"));
} else {//IE
fStyle = document.getElementById("f").currentStyle;
cStyle = document.getElementById("c").currentStyle;
}
alert(fStyle.width);//200px
alert(cStyle.width);//72px
</script>
</body>
</html>