前端杂记2015.11.25

Posted by luoway on November 25, 2015

HTML、CSS、Javascript性能消耗:
HTML < CSS < JavaScript
因此尽量使用HTML、CSS实现布局和样式。


Q: CSS中属性选择器单次选择不能选中元素并修改值

A: 因为有其他css样式选择了该项,且
1.其他css样式使用了至少一次属性选择器
2.其他css样式使用了两级或更多级选择器
3.其他css样式设置了准备修改的属性值
总之,其他css样式优先级高于此单次选择器。


ie7在控制边距上有独特之处

由于盒模型不同于W3C标准,padding和border都是ie的width内容

因此,padding在固定了width的情况下不适用,造成很大差异。

然而在ie7中,内外边距的表现往往不按自己的代码写的那样做。

例如: ie7双内边距:

<style>
    .header{
        width:300px;
        margin:10px auto;
        font-size: 12px;
    }
    .nav{
        padding:0 0 0 50px;
        background:yellow;
        overflow: hidden;
    }
    .f{
        float: left;
        margin: 0;
    }
</style>

<div class="header">
    <div class="nav">
        <span>不浮动的我很正常,问题与我无关。</span>
        <p>不浮动的&lt;p&gt;很正常,问题与我无关。</p>
    </div>
</div>

<div class="header">
    <div class="nav">
      <span class="f">浮动的我不正常,问题与我有关。</span>
      <p class="f">浮动的&lt;p&gt;不正常,问题与我有关。</p>
    </div>
</div>

ie7设置外边距强制内边距:

<style>
    .p{
        float: left;
        margin: 0 3px;
        padding: 0;
        border: solid 1px #fff;
        background-color: red;
    }
    .child{
        width: 100px;
        border: solid 1px #000;
        background-color: yellow;
    }
</style>
<div class="p">
    <input class="child">
</div>

珍爱生命,远离 lte ie 7。