CSS布局与定位

居中布局

1

1、水平居中

2

       (a) inline-block + text-align:

a

     小结:此方案兼容性较好,可兼容至IE8,对于IE567并不支持inline-block,需要使用css hack进行兼容

     (b) table + margin:

b

      小结:此方案兼容至IE8,可以使用

代替css写法,兼容性良好

      (c) absolute + transform:

c

     小结:此方案兼容至IE9,因为transform兼容性限制,如果.child为定宽元素,可以使用以下写法,兼容性极佳

c-2

(d) flex + justify-content:

d

     小结:flex是一个强大的css,生而为布局,它可以轻松的满足各种居中、对其、平分的布局要求,但由于现浏览器兼容性问题,此方案很少被使用,但是值得期待浏览器兼容性良好但那一天!

2、垂直

v

    (a) table-cell + vertial-align:

a

    小结:可替换成

布局,兼容性良好

    (b) absolute + transform:

b

      小结:存在css3兼容问题,定宽兼容性良好

     (c) flex + align-items:

c

      小结:高版本浏览器兼容,低版本不适用

3、水平垂直

hv

(a) inline-block + table-cell + text-align + vertical-align:

a

    小结:兼容至IE8

   (b) absolute + transform:

b

     小结:兼容性稍差,兼容IE10以上

   (c) flex:

c

多列布局

1、一列定宽,一列自适应

dl

(a) float + margin:

a

    小结:此方案对于定宽布局比较好,不定宽布局推荐方法

(b) float + overflow:

b

      小结:个人常用写法,此方案不管是多列定宽或是不定宽,都可以完美实现,同时可以实现登高布局

(c) table:

c

(d) flex:

d

你可能感兴趣的:(CSS布局与定位)