1022 作业 1. 实例演示列间隙的二种设置方案,并比较异同 2. 参考课堂案例,自己实现一个等高列的案例(不得抄源码)

1022 作业

1. 实例演示列间隙的二种设置方案,并比较异同

方案 1：利用百分比

css 代码：

body {
  background-color: #eee;
}
header {
  color: #fff;
  background-color: #0072b0;
  border-radius: 0.5em;
}
/* 群组选择器,同时匹配多个元素 */
.main,
.sidebar {
  background-color: #fff;
  border-radius: 0.5em;
  /* 暂时使用浮动来实现 */
  float: left;
  /* 将w3c的盒子转为IE盒子: 盒子大小包括了追加上的padding,border */
  box-sizing: border-box;
}
.sidebar {
  padding: 1.5em;
}
/* 左侧 */
.main {
  width: 70%;
}
/* 右侧 */
.sidebar {
  width: 29%;
  margin-left: 1%;
}

html 代码：

<header>
  <h1>PHP中文网 <small>php爱好者的娘家</small></h1>
</header>
<div class="container">
  <main class="main">
    <h2>欢迎加入战队</h2>
    <p>
      据<a href="https://w3techs.com/">w3techs</a
      >统计,目前全球Web开发领域,php仍以78.8%占有率,傲视所有对手,
      那些天天唱衰PHP的家伙们被啪啪打脸
    </p>
  </main>
  <aside class="sidebar">
    <div class="widget"></div>
    <div class="widget"></div>
  </aside>
</div>

将右列（sidebar）的宽度设置为 29%，然后设置左侧外边距为 1%，即 margin-left: 1%; 此时我们发现得到了我们想要的效果，如图：

但是利用百分比有个问题，那就是百分比是依赖父容器大小进行计算的，也就是说屏幕小间隙就小，屏幕大间隙就大，如图：

所以此方案有缺陷，所有我们采取另一种方案，即 em 和百分比，两者组合来解决

方案 2：利用 em + 百分比 组合方案

只需对 sidebar 做如下设置

.sidebar {
  width: calc(30% - 1em);
  margin-left: 1em;
}

说明：这里当我们设置 margin-left: 1em 时，相当于 sidebar 的宽度多出来 1em,所以 sidebar 要减去 1em，这样一来，无论屏幕大小如何变化，间隙的大小始终不变。

注意：calc 函数的运算符前后都需要保留一个空格

2. 参考课堂案例,自己实现一个等高列的案例(不得抄源码)

当设置container容器的显示类型为表格的时候（即 display: table;）,那么此时宽度就以内容决定，所以不会自动填充满整个容器，所以我们需要人为的设置容器的宽度为 100%（即 width: 100%;），接着将每一列的 display 属性设置为 table-cell,如此一来就能实现等高列布局。

css 代码：

body {
  background-color: #eee;
}
header {
  color: #fff;
  background-color: #0072b0;
}
/* 群组选择器,同时匹配多个元素 */
.main,
.sidebar-left,
.sidebar-right {
  background-color: #fff;
  box-sizing: border-box;
  display: table-cell;
  text-align: center;
}
.main {
  width: 40%;
  padding: 1.5em;
}
.sidebar-left {
  width: 30%;
  padding: 1.5em;
}
.sidebar-right {
  width: 30%;
  padding: 1.5em;
}
.container {
  display: table;
  width: 100%;
  border-spacing: 1em 0;
}
.big-container {
  margin-left: -1em;
  margin-right: -1em;
}

html 代码：

<header>
  <h1>3列等高列演示</h1>
</header>
<div class="big-container">
  <div class="container">
    <aside class="sidebar-left">
      <div class="widget">左列</div>
    </aside>
    <main class="main">
      <div class="widget">主体</div>
    </main>
    <aside class="sidebar-right">
      <div class="widget">右列</div>
    </aside>
  </div>
</div>

这里有个重点提一下，由于在 container 容器中设置了 border-spacing 属性的左右间隙为 1em，所以在用 big-container 包裹 container 之前，container 容器两边分别多出 1em 的列间隙，所以这里添加 big-container 容器包裹 container，并且在 big-container 容器中设置负值为 1em 的左右外边距，到处为止 3 列等高列实现。

下面两张图片演示 big-container 包裹 container 之前和之后的变化：