首先说明auto和100%是不一样的,100%是根据元素的像素有关的,auto是自动的。
举个例子:给箱子下添加一个div高度是100%,这时候div高度为box高度300px,
这时候如果给这个格设置填充,那么这个格的高度等于框的高度+填充的像素之和。
再说一个知识点:
正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容撑开的高度宽度;
设置绝对定位/固定定位/浮动会脱离文档流;
脱离文档流下,块级元素的宽度是内容撑开的元素,高度还是内容撑开的高度;
给内联元素设置绝对定位/固定定位/浮动,内联元素就会有块元素的特点。
<div class =“box”>
<div class =“header”> </ div>
<div class =“content”>
<div class =“left”> </ div>
<div class =“main”> </ div>
</ div>
</ div>
第一种使用:width:auto; overflow:hidden
<style>
* {margin:0; padding:0;}
.box {width:300px; height:300px; position:relative; margin:20px auto;}
.header {height:100px; width:100%; background:# FF0000;}
.content {position:absolute; top:100px; bottom:0; background:yellow; height:auto; width:100%;}
.left {float:left; height:100%; width:100px; background: aqua;}
.main {background:green; overflow:hidden; width:auto ;; height:100%;}
</样式>
第二种使用:宽度:100%;填料;箱上浆:边界框;
<风格>
* {margin:0; padding:0;}
.box {width:300px; height:300px; position:relative; margin:20px auto;}
.header {height:100px; width:100%; background:#FF0000;}
.content {position:absolute; top:100px; bottom:0; background:yellow; height:auto; width:100%;}
.left {float:left; height:100%; width:100px; background:aqua;}
/ * .main {background:green; width: auto; height:100%; padding-left:100px;} * /
/ *这种情况,宽度是auto就会自己适应* /
.main {background:green; width:100%; height:100%; padding- left:100px; box-sizing:border-box;}
/ *这个时候width是100%,是相对于父元素的宽度,padding-left属性就会是宽度多出100px,这时候就需要设置box-sizing :border-box;的作用是把padding往里加,不会改变宽度。* /
</样式>