亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS常見布局解決方案

Big_fat_cat / 3547人閱讀

摘要：到此，我們了解常見的布局解決方案，這些只是參考，一樣的布局實(shí)現(xiàn)方式多種多樣。主要就使用從很久很久以前起，我們就拋棄了布局頁(yè)面，但是異常強(qiáng)大等屬性目前兼容性較差傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器轉(zhuǎn)自常見布局解決方案

水平居中布局 1.margin + 定寬 

  
Demo

相必是個(gè)前端都見過，這定寬的水平居中，我們還可以用下面這種來實(shí)現(xiàn)不定寬的

2. table + margin 

  
Demo

display: table 在表現(xiàn)上類似 block 元素，但是寬度為內(nèi)容寬。

無(wú)需設(shè)置父元素樣式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要調(diào)整為

3.inline-block + text-align

  
Demo

兼容性佳（甚至可以兼容 IE 6 和 IE 7）

4. absolute + margin-left

  
Demo

寬度固定

相比于使用transform ，有兼容性更好

5. absolute + transform

  
Demo

絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。

transform 為 CSS3 屬性，有兼容性問題

6. flex + justify-content

  
Demo

只需設(shè)置父節(jié)點(diǎn)屬性，無(wú)需設(shè)置子元素

flex有兼容性問題

垂直居中1.table-cell + vertical-align

  
Demo

兼容性好(IE 8以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至 table

2.absolute + transform

強(qiáng)大的absolute對(duì)于這種小問題當(dāng)然也是很簡(jiǎn)單的


  
Demo

絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。但如果絕對(duì)定位元素是唯一的元素則父元素也會(huì)失去高度。

transform 為 CSS3 屬性，有兼容性問題
同水平居中，這也可以用margin-top實(shí)現(xiàn)，原理水平居中

3.flex + align-items

如果說absolute強(qiáng)大，那flex只是笑笑，因?yàn)椋攀亲顝?qiáng)的。。。但它有兼容問題


  
Demo
水平垂直居中1. absolute + transform

  
Demo

絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。

transform 為 CSS3 屬性，有兼容性問題

2. inline-block + text-align + table-cell + vertical-align

  
Demo

兼容性好

3. flex + justify-content + align-items

  
Demo

只需設(shè)置父節(jié)點(diǎn)屬性，無(wú)需設(shè)置子元素

蛋疼的兼容性問題

一列定寬，一列自適應(yīng)

1.float + margin


  

    
left

  

  

    
right

    
right

IE 6 中會(huì)有3像素的 BUG，解決方法可以在 .left 加入 margin-left:-3px 當(dāng)然也有解決這個(gè)小bug的方案如下：


  

    
left

  

  

    

      
right

      
right

此方法不會(huì)存在 IE 6 中3像素的 BUG，但 .left 不可選擇， 需要設(shè)置 .left {position: relative} 來提高層級(jí)。 注意此方法增加了不必要的 HTML 文本結(jié)構(gòu)。
傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器

2.float + overflow

  

    
left

  

  

    
right

    
right

設(shè)置 overflow: hidden 會(huì)觸發(fā) BFC 模式（Block Formatting Context）塊級(jí)格式上下文。BFC是什么呢。用通俗的來講就是，隨便你在BFC 里面干啥，外面都不會(huì)受到影響 。此方法樣式簡(jiǎn)單但不支持 IE 6

3 .table

  

    
left

  

  

    
right

    
right

table 的顯示特性為每列的單元格寬度和一定等與表格寬度。 table-layout: fixed 可加速渲染，也是設(shè)定布局優(yōu)先。table-cell 中不可以設(shè)置 margin 但是可以通過 padding 來設(shè)置間距

4. flex

  

    
left

  

  

    
right

    
right

低版本瀏覽器兼容問題

性能問題，只適合小范圍布局
我們?cè)趯W(xué)會(huì)一列定寬，一列自適應(yīng)的布局后也可以方便的實(shí)現(xiàn) 多列定寬，一列自適應(yīng) 多列不定寬加一列自適應(yīng) 這里我們不一一講解，大家自行嘗試，也可以鞏固前面學(xué)習(xí)的

等分布局1. float

  

    
1

  

  

    
2

  

  

    
3

  

  

    
4

此方法可以完美兼容 IE8 以上版本

2. flex

  

    
1

  

  

    
2

  

  

    
3

  

  

    
4

強(qiáng)大簡(jiǎn)單，有兼容問題

3. table

  

    

      
1

    

    

      
2

    

    

      
3

    

    

      
4
等高布局1.table

table 的特性為每列等寬，每行等高可以用于解決此需求


  

    
left

  

  

    
right

    
right
2.flex

  

    
left

  

  

    
right

    
right

注意這里實(shí)際上使用了 align-items: stretch，flex 默認(rèn)的 align-items 的值為 stretch

3. float

  

    
left

  

  

    
right

    
right

此方法為偽等高（只有背景顯示高度相等），左右真實(shí)的高度其實(shí)不相等。 兼容性較好。

到此，我們了解常見的布局解決方案，這些只是參考，一樣的布局實(shí)現(xiàn)方式多種多樣。主要就使用position、flex 、table（從很久很久以前起，我們就拋棄了table布局頁(yè)面，但display: table;是異常強(qiáng)大）、float等屬性目前flex兼容性較差 傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器
轉(zhuǎn)自：CSS常見布局解決方案

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112071.html

相關(guān)文章

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

    xiaolinbang 評(píng)論0 收藏0

  • 常見的面試問題：【CSS】已知高度，寫出三欄布局

    摘要：?jiǎn)栴}已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應(yīng)回答效果示例解決方案浮動(dòng)絕對(duì)定位彈性布局表格布局網(wǎng)格布局。方案二絕對(duì)定位將和的都設(shè)置脫離文檔流，給的設(shè)置左右兩邊距離即左右兩邊盒子的實(shí)際寬度。 問題： 已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應(yīng)showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

    MobService 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Big_fat_cat

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看

























































































           
               
                                           
                       
                 
            
                     
             
               
                      
               
              
              
              
               
              
           
           
        
       
    
    
     
    
    
    
       
       
      
  
    
    













    

<