float元素嵌套input宽度计算问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

float元素嵌套input宽度计算问题

a123456678 2016-03-25 10:27:22 1283
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)??

求解这种情况的原理

Web App开发
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:13:40

    其实你用审查元素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参数取消,看看又会发生什么呢?

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程