CSS: width:100% 和 width:auto

width:100%

引自：http://lenciel.cn/2011/09/width_with_percentage_in_css/

这似乎是CSS里面最简单的一个概念：如果你希望一个block-level的元素填满整个父容器的所有空白，只需要为这个元素声明width:100%这个属性就可以了。

但从个人经验和搜索结果看，大概很多CSS使用者都有过加上这个属性后挠头不已的惨痛回忆。最后很多人不得不经过反复试验后重新转回使用绝对值的长和宽。

的确，百分比在CSS里的真实作用，就像偶像派的苦瓜炒蛋，是属于“看起来简单，弄起来挺难”的东西。

其实Blocks不需要指定100%

大多数专业的Web开发者都清楚，block-level的元素(如div, p, ul等)和inline的元素两者的区别就在于默认情况下，block元素的宽度就会取填满父容器的宽度(减去自己的margin或者父容器的padding)。

这知识虽然初级，理解这点对我们明白百分比的实际作用很有帮助。

真实的含义

如果你在CSS中给一个元素x%的宽度，其实就是定义：“把这个元素所占的区域扩成它父容器的绝对宽度的x%，当然，必须它父容器有一个绝对宽度啊，亲。”比如你的元素放在一个400px宽度的容器里面，然后它的宽度定成了100%，那么它在保证自己被渲染成400px宽度之后，还是会遵守自己被定义margin/padding/border的设置，所以最好出来的效果很可能就是下图那悲催样：

Height(在所有的浏览器)也一样

是的，这是CSS比较桶妈的地方：如果你的父容器没有一个显示声明的绝对值高度，那么你用百分比来定义它的高度希望它充满父容器是不行的。Height和Width的唯一区别是对于block-level的element而言，不会自动去填满父容器，也就是说height:100%是不能省略的。

当然，百分号的行为也是CSS里面难得不桶妈的地方：所有的浏览器对百分比的渲染都是一致的。

 

width:auto(根据内容自动改变宽度）在多数浏览器上，这个方法都很有效，只是除了IE6之外。

另附：IE6下实现width:auto功能（引自：http://www.cnblogs.com/cocowool/archive/2012/07/05/2578458.html）

看了这个题目，很多人肯定觉得有点太老土了，IE6都快到末路了，不过这个方法确实非常经典，我觉得很有必要记下一笔。

 

在制作水平菜单的时候，我们经常使用ul和li元素，利用float属性让这些元素在水平的位置上对齐，同时利用width:auto来保持每个菜单随着内容的不同而变化宽度。在多数浏览器上，这个方法都很有效，只是除了IE6之外。

 

以下面的代码为例：

<style type="text/css">

    ul {

        height: 30px;

        overflow: hidden;

    }

    ul li {

        float: left;

        width: auto;

    }

    ul li a {

        display: block;

        height: 30px;

    }

</style>

<ul>

    <li><a href="#">Link 1</a></li>

    <li><a href="#">Link 2</a></li>

</ul>

 

如何避免这个问题呢？

 

Step 1 为IE6单独定制样式

 

为了解决问题，我们需要将li元素的宽度设置为0,但是不能改变其他浏览器中的宽度，为此我们必须要用一些小手段，只能在IE6下生效，有三种办法：

 

1、hack 的手法。

 

#nav ul li {

     width:auto;

     _width:0;

     float:left;

}

 

2、使用条件表达式

 

<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />

<!--[if lt IE 7]>

    <link rel="stylesheet" href="/css/lt-ie7.css" type="text/css" media="screen" />

<![endif]-->

 

这样，只有IE版本小于7是才会加载CSS。

 

3、使用CSS选择器

 

#nav ul li {

    width: 0;

    float: left;

}

#nav ul > li {

    width: auto;

}

 

IE6会忽略选择器，因为不支持，而其他浏览器则不会。

 

Step 2 Magic

 

最关键的让li宽度自适应的办法，是使用 white-space:nowrap ，如下：

 

#nav ul li {

    width: 0;

    float: left;

    white-space: nowrap;

}

#nav ul > li {

    width: auto;

}