css三种布局简介(主要实现三栏布局)

一. 先引入一些简单概念

 1.盒模型：首先是最中间的content区域，就是我们常说的内容区，我们通常设置的height和width就是设置的这部分的长度。内容区是padding区域，这部分指的是内容区到边框的区域

就是我们常说的内边距。然后就是border区域，它也是占用空间的。边框外面是margin区域，这部分指的是当前元素与其他元素的距离，就是常说的外边距。

  2.两个属性display，poistion

    display 有如下几个值

      block（元素表现为块级元素，有固定宽高，独占一行）

      inline（元素表现为行内元素，不能设置宽高）

      inline-block （对外表现为行内元素，对内表现为块级元素）

    position 有如下几个值

      static（默认情况，存在文档流当中）

      relative（根据元素本身原来所应该处的位置偏移，不会改变布局的计算）

      absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 relative 或者 absolute 定位元素）

      fixed（绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）

      position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。

  3.float浮动

    什么是浮动：浮动元素是脱离文档流，但不脱离文本流，用过Word的应该知道有一种图片环绕的方式是文字环绕，就是这种效果。

    特点：

      1.对自身的影响

        float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高浮动元素的位置尽量靠上尽量靠左（float:left）或右（float:right），

        如果那一行满足不了浮动元素的宽度要求，则元素会往下掉

      2.对兄弟的影响

        不影响其他块级元素的位置，影响其他块级元素的文本，上面贴非 float 元素，旁边贴 float 元素或者边框

      3.对父级元素的影响

        从布局上“消失”或者是高度塌陷

4.三栏布局

        a       .flex实现

   

        b         .float实现

        float实现思路，左侧一个浮动，右侧一个浮动。这里有一个小问题，就是中间元素要写在最后边，因为中间元素假设有块级元素的话会影响右边浮动元素的定位。

       注意box1,2,3的位置

 5.两栏布局（float实现）

6.两栏布局（flex)实现左侧固定，右侧自适应

 <style>
    .outer {
      width: 300PX;
      height: 300PX;
      display: flex;
      border: 1PX solid black;
    }

    .left {
      height: 100%;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 50px;
      background-color: aqua
    }
    .right {
      height: 100%;
      flex: 1;
      background-color: yellow;
    }
  </style>

  <div class="outer">
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </div>