2.布局解决方案- 水平布局<1>

居中布局

水平布局
写出两个盒子并满足以下条件条件:
1.里面的宽度盒子不固定
2.外面盒子的宽度不固定

第一种解决方案 inline-block+text-align




    
    
    


DEMODEMODEMO

这种解决方案兼容性好,但是son也会继承居中,单独设置文字单独设置他的对齐方式
第二种方式 display:table+margin




    
    
    


DEMODEMODEMO

display: table;的元素是块状元素,但是宽度是跟着内容走。这是不同于其他的块状元素
display: table;兼容性不是很好,改成以下方式解决
第二种方式2 用table布局方式




    
    
    


我是第一个

第三种方式absolute+transform




    
    
    


我是一段文字

这种方式的优点就是子元素脱离文档流不会对别的元素产生影响,缺点是transform兼容性不好
第四种方式




    
    
    


我是一段文字

当父元素设置display:flex;的时候 flex item的宽度默认就是auto,优点很明显就是不用设置son元素,当然也可以设置son元素margin:0 auto;
确定,兼容性不好。

你可能感兴趣的:(2.布局解决方案- 水平布局<1>)