AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS布局(二)

2022-06-25 146
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS布局(二)

等高布局

等高布局，顾名思义，就是指子元素在父元素中高度相等的布局。

开始之前，先看一个情境。

html代码

<main>
  <div class="left">
    <p>
      《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。
      漫画单行本日文版由史克威尔艾尼克斯（SQUARE ENIX）出版发行，繁体中文版分别由中国台湾的尖端出版社和中国香港的玉皇朝代理发行
      该作讲述了日本突然开始蔓延着可怕的疾病，主人公泷川吉野等人见证了世界破灭的开始，故事也由此展开。
    </p>
  </div>
  <div class="center">
    <p>《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。
      漫画单行本日文版由史克威尔艾尼克斯（SQUARE ENIX）出版发行，繁体中文版分别由中国台湾的尖端出版社和中国香港的玉皇朝代理发行
    </p>
  </div>
  <div class="right">
    <p>《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。</p>
  </div>
</main>

css代码

main {
  color: #eee;
}

main>div {
  display: inline-block;
  width: 300px;
  vertical-align: top;
}

.left {
  background-color: red;
}

.center {
  background-color: blue;
}

.right {
  background-color: purple;
}

image-20220412094720147

看着就有点突兀，这时候就需要我们的等高布局登场了。

padding-bottom正值+ margin-bottom负值

  1. 先给子元素一个非常大的 padding-bottom
  2. 然后在给子元素添加同样大小的 margin-bottom负值
  3. 最后父元素设置 overflow: hidden，去掉多余的
main {
  color: #eee;
  overflow: hidden;
}

main>div {
  display: inline-block;
  width: 300px;
  vertical-align: top;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

image-20220412102529836

原理：

image-20220412101933083

添加 padding-bottom后，如上图所示，此时的父元素的高度就是高度最大的子元素的高度，即上面第一个子元素的高度

image-20220412102320912

再添加 margin-bottom，值为 padding-bottom的负值，就会让父元素收缩成只有最高的子元素的高度

flex布局

因为flex布局，项目默认会拉伸为父元素的高度。当然，想让它不拉伸为父元素的高度也可以，只需要设置父元素 align-items来防止拉伸，因为 align-items是设置项目在侧轴的排列方式，默认值为 stretch，即会拉伸。

IE9以及IE9以下不支持。(没用过IE，要考虑老版本浏览器(过气浏览器)需要留意一下)

main {
  display: flex;
  /* align-items: flex-start; */        /* 防止拉伸 */
  /* align-items: stretch; */            /* 手动设置拉伸，默认值就是` stretch` */
  color: #eee;
}

main>div {
  width: 300px;
}

.left {
  background-color: red;
}

.center {
  background-color: blue;
}

.right {
  background-color: purple;
}

如果子元素高度，且不为 auto，那么此时用flex布局就不能实现等高布局

main {
  display: flex;
  color: #eee;
}

main>div {
  width: 300px;
}

.left {
  background-color: red;
  height: 300px;
}

.center {
  background-color: blue;
  height: auto;
}

.right {
  background-color: purple;
  height: 400px;
}

image-20220412223532259

grid布局

实现比较简单，只需要设置父元素的属性 grid-auto-flow为 column即可，会自动规划好元素如何排列。

具体原理不太熟悉，暂时没研究出个所以然。(没学过grid布局，有空学一下，方法先写在这先)

main {
  display: grid;
  grid-auto-flow: column;
  color: #eee;
}

和flex优点像双胞胎的感觉：

  • IE9以及IE9以下不支持
  • 如果子元素高度，且不为 auto，那么此时用grid布局也不能实现等高布局

table布局

利用表格中所有单元格高度都相等的特性。

main {
  display: table;
  color: #eee;
}

main>div {
  display: table-cell;
  width: 300px;
}

.left {
  background-color: red;
}

.center {
  background-color: blue;
}

.right {
  background-color: purple;
}

上下固定中间自适应布局

<main>
  <div class="top"></div>
  <div class="center"></div>
  <div class="bottom"></div>
</main>

定位法

上中下盒子都设置绝对定位。然后先让上盒子的 top设置为0，这时候就能实现上盒子固定了

 main>div {
  position: absolute;
  width: 100%;
}

.top {
  top: 0;
  height: 100px;
  background-color: red;
}

接下来让下盒子固定，设置 bottom为0

.bottom {
  bottom: 0;
  height: 200px;
  background-color: purple;
}

最后，实现中间自适应，只需要设置 top为上盒子的高度， bottom为下盒子的高度即可。

.center {
  top: 100px;
  bottom: 200px;
  background-color: blue;
}

image-20220413090218636

flex布局

利用 flex: 1划分剩余空间的特性，并配合 flex-direction: column切换主轴为垂直方向。

main {
  display: flex;
  flex-direction: column;
}

.top {
  height: 100px;
  background-color: red;
}

.center {
  flex: 1;
  background-color: blue;
}

.bottom {
  height: 200px;
  background-color: purple;
}

image-20220413091031723

结果发现，压根没起到中间自适应的效果。

分析以下原因：因为 main没有设置高度，且它的祖先元素 html、 body都没有设置高度，所以 main的高度就只有被上盒子和下盒子的高度撑开的那部分。既然如此，怎么可能还会有剩余空间呢？

经过上面的分析，我们发现 main的高度只有被上下盒子撑开的部分，所以我们需要依次给 html、 body、 main设置 height为 100%，这样子就可能一直继承屏幕的高度。这时候， main的高度就是屏幕高度，而中间占满剩余空间，也就是说中间自适应了。

html,
body,
main {
  height: 100%;
}

image-20220413091744030

grid布局

利用 grid-template-rows属性设置每一行的高度，中间需要自适应则设置成auto

同理， html、 body、 main的高度都需要设置成 100%，去继承屏幕的高度

html,
body,
main {
  height: 100%;
}

main {
  display: grid;
  grid-template-rows: 100px auto 200px;
}

.top {
  background-color: red;
}

.center {
  background-color: blue;
}

.bottom {
  background-color: purple;
}

table布局

父盒子 main设置 table布局，子盒子设置 display: table-row按行来分

html,
body,
main {
  height: 100%;
}

main {
  display: table;
  width: 100%;
}

main>div {
  display: table-row;
}

.top {
  height: 100px;
  background-color: red;
}

.center {
  background-color: blue;
}

.bottom {
  height: 200px;
  background-color: purple;
}

搞完了？

别太天真了

image-20220413094050459

看似搞完了，实际没有搞完。

这是为什么呢？实际上 display: table-row就相当于是把 main下的 div都转换成 tr，而 tr内是必须要有内容的。

image-20220413094745563

粘连布局

粘连布局：

  • 当主体内容足够多时(即 main的高度足够大)， footer紧跟在后面
  • 当主体内容较少(小于屏幕高度)，footer粘连在屏幕的底部

footer添加 margin-top负值

html

<main>
  <p>主体内容</p>
</main>
<footer></footer>

首先，我们需要主体内容较少时， footer粘连在屏幕底部。

所以主体盒子 main的高度应该为屏幕高度，然后给 footer设置 margin-top为自身高度的负值，让 footer上移到屏幕底部。

html,
body {
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
}

main {
  height: 100%;
  background-color: pink;
}

footer {
  height: 50px;
  background-color: purple;
  margin-top: -50px;
}

image-20220413162103731

第一步完成，但是第二步还没实现，让我们来看看。

image-20220413162211675

为什么？因为我们设置的 main盒子的高度为100%，也就是说当内容超过屏幕高度时就会溢出。所以我们不应该给 main盒子设置正常的高度，而应该设置最小高度 min-height，这样子当高度小时，就会是屏幕高度，而当高度大于屏幕高度时，高度还是正常的内容的高度。

而且，还应该给 main盒子设定 padding-bottom的值为 footer的高度，这样子就不会出现负 margin导致 footer覆盖内容。

main {
  min-height: 100%;
  padding-bottom: 50px;
  background-color: pink;
}

image-20220413164724164

捡了芝麻丢了西瓜？

也不算，后面只要在再加一个小步骤就行了。首先呢？上面我们给 main盒子设置了 min-width: 100%，所以当内容很少时， main盒子的高度会是屏幕的高度，再加上一个 padding-bottom，那么就自然不能实现当主体内容较少(小于屏幕高度)，footer粘连在屏幕的底部

解决方案就是添加多一个外盒子 wrap把 min-height: 100%给 wrap而不是 main

<div id="wrap">
  <main>
    <p>主体内容</p>
    <p>主体内容</p>
  </main>
</div>
<footer></footer>
#wrap {
  min-height: 100%;
}

main {
  padding-bottom: 50px;
  background-color: pink;
}

image-20220413165452965

footer以外的部分添加 margin-bottom负值

从上面的例子中，我们可以给 footer添加负 margin-top值来实现，而添加负 margin-top值只是为了让 footer能够让 footer上移到屏幕底部。所以不给 footer添加 margin-top负值，给 footer外的部分添加 margin-bottom负值也能得到同样的效果。

html,
body {
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
}

#wrap {
  min-height: 100%;
  margin-bottom: -50px;
}

main {
  padding-bottom: 50px;
  background-color: pink;
}

footer {
  height: 50px;
  background-color: purple;
}

flex布局

还是老样子，利用flex布局项目的属性 flex会平分剩余空间的特性。

html

<div class="box">
  <main>
    <p>主体内容</p>
  </main>
  <footer></footer>
</div>

css

html,
body {
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
}


.box {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

main {
  flex: 1;
  background-color: pink;
}

footer {
  height: 50px;
  background-color: purple;
}

grid布局

有flex布局的地方怎么能没有grid布局(×?)。flex布局可以通过子项目的属性 flex来设置平分剩余空间，只有一个属性没有设置宽( flex-direction: row)或高( flex-direction: column)的时候，就是占满剩余空间。而通过 grid-template-rows可以设置每一行的高度，为 auto时是自动计算，为 1fr时是占满剩余空间

html, 
body {
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
}


.box {
  display: grid;
  grid-template-rows: 1fr 50px;
  /* grid-template-rows: auto 50px; */
  min-height: 100%;
}

main {
  background-color: pink;
}

footer {
  background-color: purple;
}

最后提一嘴：flex布局、grid布局真nb

参考链接：

文章标签：
前端开发
关键词：
CSS布局
赤蓝紫
目录
相关文章
杀死一只知更鸟debug
|
6天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记，详细介绍了flex容器和元素的相关属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等，解释了这些属性在弹性盒子布局中的作用和用法。
杀死一只知更鸟debug
17 2
杀死一只知更鸟debug
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
22 0
石小石Orz
|
2月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局？
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局？
石小石Orz
42 3
技术混子
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中，网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具，为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用，帮助读者快速掌握这一强大的网页布局工具。
技术混子
41 3
土木林森
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统，打造未来网页设计！
【8月更文挑战第25天】在网页设计领域，布局至关重要。传统的布局方法难以满足复杂需求，CSS Grid 栅格系统因此诞生。它是一种二维布局模式，能直接控制行和列，简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器，并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸，轻松实现响应式布局。此外，CSS Grid 支持高级功能，如网格区域划分和对齐设置，极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强，CSS Grid 必将成为未来网页设计的关键技术之一。
土木林森
52 1
土木林森
|
2月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器：vw/vh、rem、%与px大PK，掌握它们，让你的网页设计秒变高大上，面试难题迎刃而解！
【8月更文挑战第4天】在Web开发中，合理选择CSS单位对响应式布局至关重要。本文探索viewport单位（vw/vh）、rem、百分比（%）及像素（px）的基础知识与应用场景。通过代码示例，展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后，模拟面试题，介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
土木林森
161 8
白如意i
|
2月前
|
前端开发
CSS Grid 布局：span 关键字
CSS Grid 布局：span 关键字
白如意i
40 0
刘志辉~
|
2月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
刘志辉~
37 0
刘志辉~
|
2月前
|
编解码 前端开发 容器
CSS弹性布局：打造响应式与灵活的网页设计
CSS弹性布局：打造响应式与灵活的网页设计
刘志辉~
76 0
1941623231718325
|
3月前
|
编解码 前端开发 容器
CSS Flex布局实战案例：构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤，我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码，还让我们能够轻松实现复杂的布局效果，如响应式设计。在实战中，掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
1941623231718325
76 2