CSS 三种布局遇到的坑

1. 图片设置 border-radius 不生效

通常 img 标签外面会包裹一个 div ，方便用来布局。但是给这个 div 设置 border-radius 却发现不生效。

<div class="profile-image">
	<img class="img" src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />	
</div>

.profile-image {
	width: 100px;
	height: 100px;
	border-radius: 8px;
}
.img {
	display: block;
	width: 100%;
	height: 100%;
}

如果图片外面需要套 div ，需要设置这个图片的 width 和 height 分别为 100%，使其自适应父元素大小

后来发现设置 overflow: hidden; 就可以实现了。

.profile-image {
	width: 100px;
	height: 100px;
	overflow: hidden; /* 这边设置溢出隐藏 */
	border-radius: 8px;
}
.img {
	display: block;
	width: 100%;
	height: 100%;
}

本人推测原因是由于 img 嵌套在 div 里面，所以 div 实际上在图片后面。然后给 div 设置了 border-radius ，但是 img 并不能检测到 div 的边框，因此图片没有圆角效果。但给 div 设置了 overflow: hidden; 之后，img 就可以检测到 div 的边框，因此就有圆角效果了。

2. 三栏布局中间高度自适应

前端经常会遇到三栏布局的需求，通常 header 和 footer 固定定位，分别位于顶部和底部，要求中间部分的高度随内容增加而增加（有滚动条），内容不足时要求能够充满剩余高度。

<div class="home">
	<van-cell-group title="今天">
	    <van-cell title="单元格" value="内容" />
	    <van-cell title="单元格" value="内容" label="描述信息" />
  	</van-cell-group>
</div>

.home {
  background-color: #f7f8fa;
}

在上面这张图中，class="home" 的 div 即为中间部分的布局容器，然后这个 div 有一个灰色的背景色。但是我们可以看到，由于容器中的内容不足，无法让 div 撑开充满整个页面，导致下方出现大量空白。

那么如何让灰色充满剩余的空间？由于 header 和 footer 的高度都是写死的，因此可以设置一个 min-height ：

.home {
  min-height: calc(100vh - 96px);
  background-color: #f7f8fa;
}

这样一来，div 就可以充满剩余空间了。但是这样有一个问题，div 内容很多的时候，把页面滚动到底部会发现最后一条内容被 footer 遮挡了：

这个时候很多人的第一反应肯定是给 class="home" 的 div 设置 padding-bottom （不要用 margin，会出现外边距合并的问题）。

.home {
  min-height: calc(100vh - 96px);
  padding-bottom: 66px;
  background-color: #f7f8fa;
}

这样一来，最后一条就不会被 footer 遮挡了。但还有一个问题，回到刚开始的情况，当容器中内容不多的时候，本来我们设置的 min-height 是可以刚好撑开容器的，但是由于刚才加了 padding-bottom ，这个 padding 的高度又比 footer 稍微高一点，导致在没有内容的时候也出现了滚动条（padding 也是可滚动的一部分）。

这个问题对于有经验的同学来说很简单，添加 box-sizing: border-box; 就搞定了：

.home {
  box-sizing: border-box;
  min-height: calc(100vh - 96px);
  padding-bottom: 66px;
  background-color: #f7f8fa;
}

这是因为现在主流浏览器的盒模型都是标准盒模型，我们设置的 height 都是对 content 部分生效，这就导致我们设置 padding 之后总高度超出滚动容器的高度，导致滚动条出现。如果希望 height 对 content 和 padding 生效，就可以设置 box-sizing: border-box; （实际上还包括 border，因为这边没有设置 border，所以可以认为是 content 和 padding）。

3. flex 布局的项目中继续用 flex 布局，设置 justify-content: space-between 不生效

在 flex 布局的项目里面经常也会用到 flex 布局，有时候我们使用 justify-content: space-between 发现不生效。

<div class="weekly-card">
  <van-image
  	class="thumb"
    width="3rem"
    height="3rem"
    src="https://img01.yzcdn.cn/vant/cat.jpeg"
  />
  <div class="article-info">
    <div class="title">文章标题文章标题</div>
    <van-tag class="read-switch-tag" plain type="danger">未读</van-tag>
  </div>
</div>

.weekly-card {
  display: flex;
  .article-info {
    display: flex;
    justify-content: space-between;
    height: 16px;
    margin-left: 12px;
  }
}

如图所示，我们在最外层的 .weekly-card 容器中设置 display: flex; ，使得图片和文章信息可以在一行排列。接着，我们在内部的 .article-info 容器中设置 display: flex; ，使得文章标题和标签可以在一行排列，同时还用了 justify-content: space-between; ，希望让文章标题和标签可以两端对齐，但却发现并没有生效。

其实 justify-content: space-between; 不生效的原因非常简单，通常是容器宽度没有设置，或者浏览器计算布局的时候无法检测到宽度。由于在 flex 布局的项目里面继续用 flex 布局，最外层的 flex 项目会作为第二层 flex 布局的容器，所以经常忽略了给作为容器的项目设置宽度。最简单的办法是给 .article-info 设置宽度：

.weekly-card {
  display: flex;
  .article-info {
    display: flex;
    justify-content: space-between;
    height: 16px;
    width: 260px; /* 这里设置宽度 */
    margin-left: 12px;
  }
}

可以看到，两端对齐立即就生效了。但是由于写死宽度，缺点也很明显，宽度没法做到自适应，特别是适配移动端的时候。这个时候就可以用到 flex 布局的容器属性了。

.weekly-card {
  display: flex;
  .thumb {
    flex-shrink: 0;
  }
  .article-info {
    flex-shrink: 0;
    flex-grow: 1; /* 如果宽度剩余则自动充满剩余空间 */
    display: flex;
    justify-content: space-between;
    height: 16px;
    margin-left: 12px;
  }
}

可以看到不仅两端对齐生效了，还完美实现了自适应宽度。