http://jsfiddle.net/JcwB3/3/
input
{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #999;
padding:0;
margin:0
}
.pull-left
{
float:left
}
.navbar-form
{
margin-top:6px;
margin-bottom:6px
}
input.text
{
width:100%
}
.input
{
width:50px
}
<h3>默认input</h3>
<input>
<br clear='both'>
<h3>input 100%</h3>
<div class="navbar-form pull-left"><input type="text" class="text input"></div>
<br clear='both'>
<h3>input 50px</h3>
<div class="navbar-form pull-left"><input type="text" class="input"></div>
Chrome测试下,第二个input外层嵌套一个float:left的div,input用到width:100%;width:50px的样式,
结果这个input计算后样式的width取值为浏览器默认input的width,而没用采用width:50px(50px优先级高于浏览器默认样式)
在内部只有input的情况下,浏览器input最后计算样式是width:100%.
为什么这100% 刚好等于默认input的width(auto)??
求解这种情况的原理
其实你用审查元素
orFireBug
看的话你会发现其实input[2]
(姑且让我这么称呼它)的实际width
是100%
的,而不是你所谓的默认宽度
。
这里就要问了,为什么明明width:50px
设置在后面,反而得到的是前面的width:100%
这个值呢?这里需要注意的是类似权重
(原谅我,我也不太清楚这个应该怎么称呼)的东西CSS
选择器的优先级。仔细看你的CSS
你会看到你设置width:100%
的标签用了input.text
两个标签,而设置width:50px
只用了.input
一个标签。这样做,无形中就把input.text
的权重
增大了,也就是说把它变得更优先了,所以解析器默认使用了width:100%
这个参数。
好了,到这里,给你一个意见,把.input
改成.input.text
,看看会发生什么?
解决了这个,我们来继续看看问题。为什么width:100%
参数生效了,可是宽度还是默认的呢?这只有一个可能,那就是包裹它的标签的宽度有问题。我们往上看一下,发现你对包裹input
标签的div
父标签设置了float:left
这个属性。通过搜索,我们会发现,float
参数具有破坏div
标签宽度的作用(搜索了一下,发现很多专题讲述float
的都很复杂,这里给一个直接简单的地址:http://my.oschina.net/jing31/blog/6601)。
你又继续问了一个问题,为何这里的100%
和auto
是一样的效果呢。这里就要对100%
进行解释。width
为100%
的话实际上应该理解为宽度为其父元素的100%
宽度。但是我们又知道,父元素的宽度被float
属性破坏了,其实际宽度应该是其子元素被撑大后的宽度。也就是说width:100%
找不到比较对象了,不知道是谁的100%
了(这里可能理解的不是那么准确)。所以浏览器解释成了auto
。这里,你可以试验的将width:100%
修改成width:300px
,看看会发生什么?或者你在div
父标签中填充点文字进去,看看又会发生什么?
再次新加的内容可以很好的看上一段粗体的这个解释,应该是正常的情况。由于内部有文字所以div
的宽度存在了基数,有了比较对象。没有文字的情况下,你可以这么理解,父元素的宽度靠子元素决定,子元素的宽度靠父元素决定,然后陷入死循环,然后浏览器疯了,然后浏览器就傲娇了,不知所措了,就给了默认的值了(这种情况应该挺正常的吧←_←)。
好了,到这里问题应该解决了。最后结果是width:100%
优先级高于width:50px
而应用到了标签中,但是由于父标签的width
变成了最小,所以被包裹的input
也变成了默认的了。这里在给个意见,如果把父标签的float
参数取消,看看又会发生什么呢?