等分布局

含义: 等分布局就是指一行被分为若干列，每一列的宽度是相同的值

	- 利用float实现 - 利用table实现 - 使用flex实现

正常等分

方法一 float

<div id="parent" class="clearfix">
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
  <div id="col4"></div>
</div>

* {
  margin: 0;
  padding: 0;
}
#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  float: left;
  width: 25%;
}
#col1 {
  background-color: hotpink;
}
#col2 {
  background-color: lightblue;
}
#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}
#parent {
  padding: 20px;
  border: 10px solid;
  /* 
  子元素浮动 - 导致父元素的高度塌陷
  解决:
  1. 固定高度 height 固定写死
  2. overflow:hidden => BFC 特点: 把浮动的高度计算进去
  3. clear:both => 加载浮动子元素的尾部 <div style="clear:both"></div>
  4. 利用伪元素 ::after
  */
}

方法二 利用table实现

* {
  margin: 0;
  padding: 0;
}

#parent {
  width: 100%;
  display: table;
}

#col1,
#col2,
#col3,
#col4 {
  display: table-cell;
  height: 300px;
}

#col1 {
  background-color: hotpink;
}

#col2 {
  background-color: lightblue;
}

#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}

方法二 利用flex

* {
  margin: 0;
  padding: 0;
}

#parent {
  width: 100%;
  display: flex;
}

#col1,
#col2,
#col3,
#col4 {
  flex:1;
  height: 300px;
}

#col1 {
  background-color: hotpink;
}

#col2 {
  background-color: lightblue;
}

#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}

间距处理

方法一 浮动布局-加在border上

<div class="parent-fix">
  <div id="parent" class="clearfix">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
    <div id="col4"></div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent-fix {
  overflow: hidden;
}

#parent {
  height: 300px;
  /* 整体移动 视觉上没有10px */
  margin-left: -10px;
}

#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  width: 25%;
  float: left;
  /* 怪异盒模型 */
  box-sizing: border-box;
  border-left: 10px solid #fff;
  /* 盒子模型
  box-sizing:
  content-box: width = width - padding-left/right - border-left/right
  border-box: width = width(padding+border);

  margin 不影响盒子模型的大小 => 间距 / 位移
  */
}

#col1 {
  background-color: hotpink;
}

#col2 {
  background-color: lightblue;
}

#col3 {
  background-color: blue;
}
#col4 {
  background-color: red;
}

方法二 浮动布局-加在padding上

<div id="parent" class="clearfix">
  <div id="col1">
      <div class="innter"></div>
  </div>
  <div id="col2">
      <div class="innter"></div>
  </div>
  <div id="col3">
      <div class="innter"></div>
  </div>
  <div id="col4">
      <div class="innter"></div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}

#parent {
  height: 300px;
  margin-left: -10px;
}

#col1,
#col2,
#col3,
#col4 {
  width: 25%;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
}


#col1 .innter {
  height: 300px;
  background-color: hotpink;
}

#col2 .innter {
  height: 300px;
  background-color: lightblue;
}

#col3 .innter {
  height: 300px;
  background-color: blue;
}
#col4 .innter {
  height: 300px;
  background-color: red;
}

方法三 table

* {
  margin: 0;
  padding: 0;
}

#parent-wrap {
  /* 整体移动放在父元素上 */
  margin-left: -10px;
}

#parent {
  width: 100%;
  display: table;
}

#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  display: table-cell;
  padding-left: 10px;
}

/* 问题: 第一个模块直接消失 */
/* #col1 {
padding-left: 0px;
} */

#col1 .inner {
  height: 300px;
  background-color: hotpink;
}

#col2 .inner {
  height: 300px;
  background-color: lightblue;
}

#col3 .inner {
  height: 300px;
  background-color: blue;
}
#col4 .inner {
  height: 300px;
  background-color: red;
}

<div id="parent-wrap">
  <div id="parent">
    <div id="col1">
        <div class="inner"></div>
    </div>
    <div id="col2">
        <div class="inner"></div>
    </div>
    <div id="col3">
        <div class="inner"></div>
    </div>
    <div id="col4">
        <div class="inner"></div>
    </div>
  </div>
</div>

方法四 flex

* {
  margin: 0;
  padding: 0;
}

#parent-wrap {
  margin-left: -10px;
}

#parent {
  width: 100%;
  display: flex;
}

#col1,
#col2,
#col3,
#col4 {
  height: 300px;
  flex: 1;
  padding-left: 10px;
}

#col1 .inner {
  height: 300px;
  background-color: hotpink;
}

#col2 .inner {
  height: 300px;
  background-color: lightblue;
}

#col3 .inner {
  height: 300px;
  background-color: blue;
}
#col4 .inner {
  height: 300px;
  background-color: red;
}

<div id="parent-wrap">
  <div id="parent">
    <div id="col1">
      <div class="inner"></div>
    </div>
    <div id="col2">
      <div class="inner"></div>
    </div>
    <div id="col3">
      <div class="inner"></div>
    </div>
    <div id="col4">
      <div class="inner"></div>
    </div>
  </div>
</div>