CSS-四种两栏式布局

四种两栏式布局

先分别介绍float、position、flex和table

1.float属性指定一个盒子（元素）是否应该浮动。

在早期浏览器当中，文档类型基本都是图片加文字进行页面展示。float属性最开始的设计是想让文字环绕图片
例如这样：

而开发人员无意中利用它做了一些本不应该是float设计时的工作，于是早期的页面布局一般都是float布局。例如让两个块级盒子在一行显示。

2.position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型

absolute    
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed   
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative    
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

3.flex 这是一个新朋友，但是如果你学好了这个属性，碰见任何布局都不带怂的（这里我的语气要降低点，因为我也不是那么肯定~~）。总之这是一个非常好用的属性，详细的细节以后再说，实在是属性太多，这里简单说几个属性。

    首先你必须要给父级添加一个display:flex属性，来确认当前元素是一个弹性盒子！！【这是最关键】
    好了接下来简单说说子元素的属性
    flex-grow   一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
    flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

因为属性实在太多，所以先说这么多

4.table 这是由html内的table标签转化而来的
这里呢，我只说两个属性。display:table和display:table-cell

display:table对应的是html内table
dispaly:table-cell对应的是html内td

这里只是打个比方，对于那些想说“为什么要打比方，比方是无辜的”，同学请你出去！~~

好了，开个玩笑。总算是铺垫了点东西，开始进入今天的正题两栏式布局

一、利用float配合margin( position也一样需要这个属性进行配合)
那可能就有同学问了为什么不用padding或者border呢？这里考虑到有些同学习惯整体用box-sizing:border-box。而一旦用了这个，盒子的的border和padding就属于盒子自身的size了。
哎~~另外如果用border的话还要给border-color透明。所以这里推荐使用margin!!
好了，到了激动人心的时刻了，上代码！！！（注：此处应该有掌声）

 <style> 
        .box div{
            height:100px;
        }
        .left{
            width:200px;
            float: left;
            background-color:pink;
        }
        .right{
            margin-left:200px;
            background-color:yellow
        }
    style>
    <div class="box">
        <div class="left">div>
        <div class="right">div>
    div>

是不是很惊奇？有人问了，这么短的代码就能实现我要两栏布局？我可以郑重的告诉你，或许别人不行，但是！！！集才华与美貌的我，就只要这几行代码~~~

那个~~只是活跃一下气氛啊。。
现在讲讲它的注意事项。第一，float必须放在第一个子元素。第二margin的方向必须同float方向，第三margin的值必须等于float元素的宽（这一点根据实际开发情况来定，一般项目开发两栏之间是需要间距的，这个时候可酌情多个10-20像素）

emm,我最近在群里看到有些同学并没有给margin值(备注：这个群呢，是我在网上报的一所前端培训机构–渡一教育。有兴趣的同学可以搜一下)，其实也是可以的，但是并不完美，如果不给margin值，第二个子元素将会是父级的宽，但是文本内容会绕开float，就像我之前说的文字围绕图片，如果一旦第二子元素内又有一个块级元素呢？而我要将他完整展现出来呢？这是有缺陷的，所以说希望同学们能加上margin。

二、利用position配合margin
原理呢，和float一样这里就不重复说了。直接上代码~~

 <style>
        .box{position: relative}
        .box div{
            height:100px;
        }
        .left{
            width:200px;
            position: absolute;
            left:0;
            background-color:pink;
        }
        .right{
            margin-left:200px;
            background-color:yellow
        }
    style>
    <div class="box">
        <div class="left">div>
        <div class="right">div>
    div>

你没有看错，还是这么短的代码。是不是很惊讶，只要998，代码带回家！！！

一如既往的皮一下~~下面讲讲注意事项
第一，和float一样，必须是第一个子元素，当然如果给它加上top:0的话可以随意，其实如果只是定位在左边的话，我left:0也不会写。显得代码逼格高，如果你要向右那就要加right了。第二，像之前说的float可以不加margin，只能显示文本。这position是不存在的,文字不会环绕定位元素，所以小伙伴们还是都加上margin吧。第三点与float一样。

三、display:flex与flex-grow(比起float，position的搭配，人家这才是两兄弟，之前那两货只能算是半路夫妻)
display:flex需要给予父级，flex-grow放置自适应的子元素。（IE10一下不支持）这里不说太多直接上代码~~

  <style>
        .box{display: flex}
        .box div{
            height:100px;
        }
        .left{
            width:200px;
            background-color:pink;
        }
        .right{
            flex-grow:1;
            background-color:yellow
        }
    style>
    <div class="box">
        <div class="left">div>
        <div class="right">div>
    div>

一如既往的少…那啥，就不吹了。怕被揍。。。一下省略一万字描述我的才华与美貌

下面说说优点于注意事项：

第一，与float、position相比flex布局的好处在于不需要写宽度和margin相匹配了，这里只要求你写入一个固定宽度，flex-grow会自动将你剩下的补全。第二，你可以在任何地方插入，顺序是你写入的顺序，比如你写三栏布局，要求两侧固定宽度200px，中间自适应。你只需要将两侧设置宽度，中间给予flex-grow就OK了。与之前两个相比较，还有一个好处就是，如若你的两个子元素，高度不统一，这个时候，给两个子元素vertical-align: middle;可以让两个子元素水平对齐。是不是感觉很神奇，我可以很不负责任的告诉你，flex布局的强大之处远不至此。想了解的话，关注后期更新

四、display:table和display:table-cell
display:table 给予父级，display:table-cell给予两个子集，这里代码如下：

    .box{display: table}
        .box div{
            display: table-cell
        }
        .left{
            min-width:200px;
            background-color:pink;
        }
        .right{
            width:100%;
            background-color:yellow;
        }
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div style="height:100px">div>
        div>
    div>

这个是我很喜欢的一种布局方式，说说他的优点
第一，你不需要给高，他们自适应的选出你两个子元素最高的作为公共高度（我代码内有一个高100px的div是为了撑起div,如果有内容的话，高度将会是内容高度），第二，甚至你可以不给宽，这里以为我讲的是两栏布局，所以我给了第一个子元素一个200px最小宽度，如果说你内容宽度超过了200px,他将让你的第一个子元素的宽度等于内容宽度。我认为这是自适应的最高境界！！第三，如果你想文本水平居中可以添加vertical-align:middle;

是不是感觉这种布局和之前三个写法不太一样，下面是点私货，与其他三种一样的布局，只添加一个子元素属性：

    <style>
        .box{display: table;width: 100%}
        .left{
            display: table-cell;
            width:200px;
            background-color:pink;
        }
        .right{
            width: 100%;
            background-color:red;
        }
    style>
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div style="height:100px">div>
        div>
    div>

这样看起来是不是就和之前三种布局写法类似了~~~

我第一次接触这个属性来自于bootstarp的input-group组件，当我去看这个组件的属性时是真的被吸引住了，当然这个组件需要合适的地方才能发挥出他强大的一面，大家有兴趣的可以去看看bootstarp的input-group组件。

本次分享到这里就该介绍了，这是鄙人第一次写分享文章，有哪些地方没讲的清楚或错误的地方，还请留言拨正。谢谢大家的阅读