<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ## 浮動布局 ```html <section class="layout float"> <style media="screen"> .layout.float .left{ float:left; width:300px; background: red; } .layout.float .center{ background: yellow; } .layout.float .right{ float:right; width:300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>浮動解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> </article> </section> ``` 優點:兼容性好 缺點:浮動元素脫離文檔流,要做清除浮動,這個處理不好的話,會帶來很多問題,比如父容器高度塌陷等 ## 絕對定位布局 ```html <section class="layout absolute"> <style> .layout.absolute .left-center-right>div{ position: absolute; } .layout.absolute .left{ left:0; width: 300px; background: red; } .layout.absolute .center{ left: 300px; right: 300px; background: yellow; } .layout.absolute .right{ right:0; width: 300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>絕對定位解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section> ``` 優點:快捷,設置很方便,而且也不容易出問題。 缺點:容器脫離了文檔流,后代元素也脫離了文檔流,高度未知的時候,會有問題,這就導致了這種方法的有效性和可使用性是比較差的。 ## flexbox布局 ```html <section class="layout flexbox"> <style> .layout.flexbox{ margin-top: 110px; } .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex:1; background: yellow; } .layout.flexbox .right{ width: 300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flexbox解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section> ``` 優點:css3里新出的一個,它就是為了解決上述兩種方式的不足出現的,是比較完美的一個。 缺點:IE10開始支持,但是IE10的是`-ms`形式的 ## 表格布局 ```html <section class="layout table"> <style> .layout.table .left-center-right{ width:100%; height: 100px; display: table; } .layout.table .left-center-right>div{ display: table-cell; } .layout.table .left{ width: 300px; background: red; } .layout.table .center{ background: yellow; } .layout.table .right{ width: 300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>表格布局解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section> ``` 優點:兼容性很好,在flex布局不兼容的時候,可以嘗試表格布局。當內容溢出時會自動撐開父元素。 缺點:無法設置欄邊距;對seo不友好;當其中一個單元格高度超出的時候,兩側的單元格也是會跟著一起變高的,然而有時候這并不是我們想要的效果。 ## 網格布局 ```html <section class="layout grid"> <style> .layout.grid .left-center-right{ width:100%; display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left-center-right>div{ } .layout.grid .left{ width: 300px; background: red; } .layout.grid .center{ background: yellow; } .layout.grid .right{ background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>網格布局解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section> ``` 優點:CSS新標準,創建網格布局最強大和最簡單的工具 缺點:兼容性不好。IE10+上支持,而且也僅支持部分屬性 ***** 內容來自慕課網《前端跳槽面試必備技巧》
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看