有没有证据证明CSS的顺序是相关的？

时间：2016-10-12 08:17:01

标签： html css safari mozilla

如果我的CSS在其他样式的末尾命令全局（父）样式，这是否重要？就个人而言，我有一个理论，即样式标记中的所有样式首先被解析并在之后处理（之后设置继承）。这只是一个理论，它可能在不同的浏览器中有所不同。如果在之后处理所有CSS ，则解析样式标记，那么顺序无关紧要。

例如展示 B 比展示 A 更快？你能证明这个吗？图表B在开头订购了全球风格（*，HTML，Body）。

图表A： 

<style>

    #VGroup2210  {
        position:absolute;
        top:35px;
        left:25px;
        overflow:visible;
        text-align:left;
    }

    #Label2211  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        font-weight:bold;
        margin-top:-0.2em;
    }

    #Label2212  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2213  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2214  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2215  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2216  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2217  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2218  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2219  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2220  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2221  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2222  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2223  {
        position:relative;
        vertical-align:top;
        display:block;
        margin-top:-0.2em;
    }

    #BorderContainer2224  {
        position:absolute;
        top:30px;
        left:100px;
        width:562px;
        height:50px;
        display:inline-block;
        background-color:rgba(255,255,255,1);
        border-style:solid;
        border-width:1px;
        border-color:#696969;
        border-radius:0px;
    }

    #HGroup2229  {
        position:absolute;
        top:30px;
        left:101px;
        min-width:20px;
        min-height:20px;
        height:50px;
        display:inline-block;
        overflow:visible;
        text-align:left;
    }

    #Label2230  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2231  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2232  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2233  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2234  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2235  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2236  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2237  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2238  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-top:-0.2em;
    }

    #HGroup2239  {
        position:absolute;
        top:166px;
        left:209px;
        min-width:20px;
        min-height:20px;
        overflow:visible;
        text-align:left;
    }

    #Label2240  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:2px;
        font-weight:bold;
        margin-top:-0.2em;
    }

    #BorderContainer2241  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:2px;
        width:300px;
        height:250px;
        display:inline-block;
        background-color:rgba(255,255,255,1);
        border-style:solid;
        border-width:1px;
        border-color:#696969;
        border-radius:0px;
        font-size:9px;
    }

    #Label2246  {
        position:absolute;
        top:20px;
        left:20px;
        margin-top:-0.2em;
    }

    #Label2248  {
        position:absolute;
        top:20px;
        display:table;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
        margin-top:-0.2em;
    }

    #Label2249  {
        position:absolute;
        top:20px;
        right:20px;
        margin-top:-0.2em;
    }

    #Label2250  {
        position:absolute;
        display:table;
        top:50%;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        left:20px;
        margin-top:-0.2em;
    }

    #Label2251  {
        position:absolute;
        display:table;
        top:50%;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        right:20px;
        margin-top:-0.2em;
    }

    #Label2252  {
        position:absolute;
        bottom:20px;
        left:20px;
        margin-top:-0.2em;
    }

    #Label2253  {
        position:absolute;
        bottom:20px;
        display:table;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
        margin-top:-0.2em;
    }

    #Label2254  {
        position:absolute;
        bottom:20px;
        right:20px;
        margin-top:-0.2em;
    }

    #Label2255  {
        position:absolute;
        display:table;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        margin-top:-0.2em;
    }

    #Label2256  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        font-weight:bold;
        margin-top:-0.2em;
    }

    /* Global styles */

    *, *:before, *:after {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    html, body {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }

    body {
        font-family:Verdana;
        font-weight:normal;
        font-size:12px;
    }
</style>

图表B： 

<style>

    /* Global styles */

    *, *:before, *:after {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    html, body {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }

    body {
        font-family:Verdana;
        font-weight:normal;
        font-size:12px;
    }

    #VGroup2210  {
        position:absolute;
        top:35px;
        left:25px;
        overflow:visible;
        text-align:left;
    }

    #Label2211  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        font-weight:bold;
        margin-top:-0.2em;
    }

    #Label2212  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2213  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2214  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2215  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2216  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2217  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2218  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2219  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2220  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2221  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2222  {
        position:relative;
        vertical-align:top;
        margin-bottom:12px;
        display:block;
        margin-top:-0.2em;
    }

    #Label2223  {
        position:relative;
        vertical-align:top;
        display:block;
        margin-top:-0.2em;
    }

    #BorderContainer2224  {
        position:absolute;
        top:30px;
        left:100px;
        width:562px;
        height:50px;
        display:inline-block;
        background-color:rgba(255,255,255,1);
        border-style:solid;
        border-width:1px;
        border-color:#696969;
        border-radius:0px;
    }

    #HGroup2229  {
        position:absolute;
        top:30px;
        left:101px;
        min-width:20px;
        min-height:20px;
        height:50px;
        display:inline-block;
        overflow:visible;
        text-align:left;
    }

    #Label2230  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2231  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2232  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2233  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2234  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2235  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2236  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2237  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:8px;
        margin-top:-0.2em;
    }

    #Label2238  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-top:-0.2em;
    }

    #HGroup2239  {
        position:absolute;
        top:166px;
        left:209px;
        min-width:20px;
        min-height:20px;
        overflow:visible;
        text-align:left;
    }

    #Label2240  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:2px;
        font-weight:bold;
        margin-top:-0.2em;
    }

    #BorderContainer2241  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        margin-right:2px;
        width:300px;
        height:250px;
        display:inline-block;
        background-color:rgba(255,255,255,1);
        border-style:solid;
        border-width:1px;
        border-color:#696969;
        border-radius:0px;
        font-size:9px;
    }

    #Label2246  {
        position:absolute;
        top:20px;
        left:20px;
        margin-top:-0.2em;
    }

    #Label2248  {
        position:absolute;
        top:20px;
        display:table;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
        margin-top:-0.2em;
    }

    #Label2249  {
        position:absolute;
        top:20px;
        right:20px;
        margin-top:-0.2em;
    }

    #Label2250  {
        position:absolute;
        display:table;
        top:50%;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        left:20px;
        margin-top:-0.2em;
    }

    #Label2251  {
        position:absolute;
        display:table;
        top:50%;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        right:20px;
        margin-top:-0.2em;
    }

    #Label2252  {
        position:absolute;
        bottom:20px;
        left:20px;
        margin-top:-0.2em;
    }

    #Label2253  {
        position:absolute;
        bottom:20px;
        display:table;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
        margin-top:-0.2em;
    }

    #Label2254  {
        position:absolute;
        bottom:20px;
        right:20px;
        margin-top:-0.2em;
    }

    #Label2255  {
        position:absolute;
        display:table;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        margin-top:-0.2em;
    }

    #Label2256  {
        position:relative;
        display:inline-block;
        vertical-align:middle;
        font-weight:bold;
        margin-top:-0.2em;
    }

</style>

HTML： 

<div id="VGroup2210">
    <span id="Label2211">Left</span>
    <span id="Label2212">Apple</span>
    <span id="Label2213">Orange</span>
    <span id="Label2214">Banana</span>
    <span id="Label2215">Grape</span>
    <span id="Label2216">Cherry</span>
    <span id="Label2217">Mango</span>
    <span id="Label2218">Kiwi</span>
    <span id="Label2219">Pineapple</span>
    <span id="Label2220">Strawberry</span>
    <span id="Label2221">Blueberry</span>
    <span id="Label2222">Raspberry</span>
    <span id="Label2223">Orange</span>
</div>
<div id="BorderContainer2224">&#160;
</div >
<div id="HGroup2229">
    <span id="Label2230">Apple</span>
    <span id="Label2231">Orange</span>
    <span id="Label2232">Banana</span>
    <span id="Label2233">Grape</span>
    <span id="Label2234">Cherry</span>
    <span id="Label2235">Mango</span>
    <span id="Label2236">Kiwi</span>
    <span id="Label2237">Pineapple</span>
    <span id="Label2238">Strawberry</span>
    <span style='display:inline-block;height:100%;width:0;vertical-align:middle;'></span>
</div>
<div id="HGroup2239">
    <span id="Label2240">Left</span>
    <div id="BorderContainer2241">
        <span id="Label2246">Top Left</span>
        <span id="Label2248">Top Centered</span>
        <span id="Label2249">Top Right</span>
        <span id="Label2250">Left Center</span>
        <span id="Label2251">Right Center</span>
        <span id="Label2252">Bottom Left</span>
        <span id="Label2253">Bottom Centered</span>
        <span id="Label2254">Bottom Right</span>
        <span id="Label2255">Center</span>
    </div >
    <span id="Label2256">Right</span>
    <span style='display:inline-block;height:100%;width:0;vertical-align:middle;'></span>
</div>

跨浏览器是否相同？

1 个答案:

答案 0 :(得分：1)

经过一些测试后，我得出的结论是，在我的电脑上，exibit A平均需要7毫秒加载，并且显示B 17毫秒，这两个数字平均每次运行10次在您的设备上exibit并且可能不一样，但是，我认为你声明CSS的方式确实很重要

相关问题
最新问题