CSS 实现左右布局&左中右布局

左右布局

         首先一个网页实现左右布局的方式有很多，个人主要通过浮动(float)来实现左右布局。

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。

        首先我们写出三个盒子，其中father盒子中包含2个盒子left和right。代码如下。

        然后我们就可以通过float属性来实现页面的左右布局。代码如下。

        效果图如下：

    最后因为我们加了浮动元素，所以要清除浮动(不清除浮动会影响后面的页面布局)这里我用clearfix类。

   

   

   

   

   

   

       

       

   

   

   

完整代码 方便看效果。

左中右布局

        看完左右布局，那么发现也可以用float来实现左中右布局。先通过float实现块级元素的一排布局然后在通过margin 属性调整样式。

   

   

   

   

   

   

       

       

       

   

   

   

CSS一些常见的居中基本功

           水平居中 ：详见：https://jingyan.baidu.com/article/86112f1381081127379787bb.html

        1.通过margin: 0 auto; text-align: center实现CSS水平居中（最为常见的居中方式）

        2.通过position:absolute实现CSS水平居中。

        3.通过display:inline-block和text-align:center实现CSS水平居中。

          垂直居中 :详见：https://jingyan.baidu.com/article/3a2f7c2e26041a26aed61150.html

        1.通过line-height实现CSS垂直居中。(设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况)

        2.通过verticle-align:middle实现CSS垂直居中。(通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外    注              意，vertical生效的前提是元素的display：inline-block。)