谈一谈css中的100%和auto

在web前端的编程过程中，利用%数值和auto来进行设置元素的宽度和高度等是很常见的，但是他们的值是怎样计算的呢？

一、100%

百分比设置像素是很常见的，也比较简单。一般在两个地方用的比较多——设置子元素宽高和设置（内|外）边距。

1.首先看设置宽高，先看例子

html

<div class="wrapper">
<div class="content"></div>
</div>

css

.wrapper {
width: 200px;
height: 200px;
margin: 10px;
padding: 5px;
border: 1px solid #7C7C7C;
}
.content{
width: 100%;
height: 100%;
background: yellow;
}

在这个例子中，子元素正常布局，父元素设置了内外边距以及border（方便观察计算），结果如下





左边是父元素的整体样式，外面是margin，然后是border，然后是padding，然后是content。右边是子元素样式（黄色部分）,可以看出，子元素中的宽高计算是以父元素的content为基数的，即设定的父元素的宽高，不包含边距和边框。

接下来我们改一下，子元素添加属性float: left，使元素脱离文档流。

css

.wrapper {
width: 200px;
height: 200px;
margin: 10px;
padding: 5px;
border: 1px solid #7C7C7C;
}
.content{
width: 100%;
height: 100%;
/*添加浮动*/
float: left;
background: yellow;
}

然后我们发现，结果并没有什么改变（图和上面一样），可以得出结论，百分比计算宽高时与子元素是否在文档流无关。

2.然后来看计算内外边距

这个在w3c里面明确给出过，在计算内外边距时，使用百分比计算，基数是父元素的宽度（查看w3c）,不论是上下边距还是左右边距。之所以这样设定是很好理解的，因为在写css的过程中，我们一般不会给父元素添加设置高度，而是由子元素撑开。用css权威指南里的话来说

我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加。

看例子：

css

.wrapper {
width: 200px;
height: 200px;
margin: 10px;
padding: 5px;
border: 1px solid #7C7C7C;
}
.content{
width: 100px;
height: 100px;
margin: 100%;
background: yellow;
}

改一下父元素的高度，令height: 100px



ok，子元素的位置并没有改变。如果给子元素加浮动呢，效果还是一样的，所以说百分值的计算与是否脱离文档流无关。边距的百分比值计算都是基于父元素width的。

二、auto

1.宽高设置

auto也是比较常用的值，而且是宽高的默认值。

当宽度设为auto时，宽度设定为父元素的100%，但是子元素必须与父元素在同一个层面上，即子元素不能脱离父元素所在的文档流。

如果高度设为auto，没有效果。子元素的高度并不会变为父元素的100%

看例子：

.wrapper {
width: 200px;
height: 200px;
margin: 10px;
padding: 5px;
border: 1px solid #7C7C7C;
}
.content{
width: auto;
height: 100px;
background: yellow;
}

没问题，如果把height设置成auto

.content{
width: 200px;
height: auto;
background: yellow;
}

子元素没有高度，所以并没有显示

2.在margin中的应用

auto咋margin中应用还是比较常见的。比如说常见的水平居中对齐就是把子元素的左右margin设置为auto来实现的。

看例子：

.wrapper {
width: 200px;
height: 100px;
margin: 10px;
padding: 5px;
border: 1px solid #7C7C7C;
}
.content{
width: 100px;
height: 50px;
margin: 0 auto;
background: yellow;
}

auto的值会把父元素剩余空间均分，设置为左右margin

当然，上下margin设置为auto还是没有效果的

auto无论是在宽度设置还是在左右margin设置上，子元素都要处于父元素所在的文档流的，否则没有效果。这也是在设置宽度时auto与100%的区别。