css常见布局解决方案

水平居中布局

margin+定宽

  
  
  
  
  1. class="parent">

  2.  class="child">Demo

    • 想必是个前端都见过,这定宽的水平居中,我们还可以用下面这种来实现不定宽

    table+margin

      
      
      
      
    1. class="parent">

    2.  class="child">Demo

    • display:table在表现上类似 block元素,但是宽度为内容宽。

    • 无需设置父元素样式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要调整为


      inline-block+text-align

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      兼容性佳(甚至可以兼容IE6和IE7)

      absolute+margin-left

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 宽度固定

      • 相比与使用 transform兼容性更好

      absolute+transform

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 绝对定位脱离文档流,不会对后续元素的布局造成影响

      • transform为CSS3属性,有兼容性问题

      flex+justify-content

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 只需设置父节点属性,无需设置子元素

      • flex有兼容性问题

      垂直居中

      table-cell+vertical-align

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 兼容性好(IE 8以下版本需要调整页面结构至 table)

      absolute+transform

      强大的absolute对于这种小问题当然是很简单的

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 绝对定位脱离文档流,不会对后续元素的布局造成影响,但如果绝对定位元素是唯一的元素,则父元素也会失去高度。

      • transform 为CSS3属性,有兼容性问题

      同水平居中,这也可以使用margin-top实现,原理水平居中

      flex+align-items

      如果说 absolute强大,那 flex只是笑笑,因为他才是最强的,但有兼容性问题

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      水平垂直居中

      absolute+transform

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 绝对定位脱离文档流,不会对后续元素的布局造成影响

      • transform为CSS3属性,有兼容性问题

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

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 兼容性好

      flex+justify-content+align-items

        
        
        
        
      1. class="parent">

      2.  class="child">Demo

      • 只需设置父节点属性,无需设置子元素

      • 还是存在兼容性问题

      一列定宽,一列自适应

      这种布局最常见的就是中后台类型的项目,如下图:

      float+margin

        
        
        
        
      1. class="parent">

      2.  class="left">

      3.    

        left

      4.  

      5.  class="right">

      6.    

        right

      7.    

        right

      8.  

      IE6中会有3px的BUG,解决方法可以在 .left加入 margin-left:-3px当然下面的方案也可以解决这个bug:

        
        
        
        
      1. class="parent">

      2.  class="left">

      3.    

        left

      4.  

      5.  class="right-fix">

      6.    class="right">

      7.      

        right

      8.      

        right

      9.    

      10.  

      float+overflow

        
        
        
        
      1. class="parent">

      2.  class="left">

      3.    

        left

      4.  

      5.  class="right">

      6.    

        right

      7.    

        right

      8.  

      设置overflow:hidden会出发BFC模式(block formatting context)块级格式上下文。BFC是什么呢?用通俗的江就是,随便你在BFC里面干什么,外面都不会手段哦影响。此方法样式简单但不支持 IE 6

      table

        
        
        
        
      1. class="parent">

      2.  class="left">

      3.    

        left

      4.  

      5.  class="right">

      6.    

        right

      7.    

        right

      8.  

      table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout:fixed 可加速渲染,也是设定布局优先。 table-cell 中不可以设置 margin但是可以通过 padding 来设置间距

      flex

        
        
        
        
      1. class="parent">

      2.  class="left">

      3.    

        left

      4.  

      5.  class="right">

      6.    

        right

      7.    

        right

      8.  

      • 低版本浏览器兼容性问题

      • 性能问题,只是适合小范围布局

      以上就是常见的几种布局。


      你可能感兴趣的:(css常见布局解决方案)