从0开始学前端第十四课：布局与定位（二）

mls学习小记

已于 2024-01-24 17:07:41 修改

阅读量870

点赞数 24

分类专栏：从0开始学前端文章标签：前端

于 2024-01-24 15:49:03 首次发布

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135824314

版权

从0开始学前端专栏收录该内容

81 篇文章 2 订阅

订阅专栏

第十四课：布局与定位（二）

学习目标

在本课中，你将学习以下内容：

深入理解CSS的Display属性。
掌握Flexbox布局的各种属性和用法。
学习网格（Grid）布局的基本概念和应用。

完成本课后，你应该能够使用Display属性控制元素的显示方式，使用Flexbox创建灵活的一维布局，以及使用Grid布局制作复杂的二维布局。

学习内容

显示属性（Display）

概念: display属性是用来控制元素如何显示在页面上的CSS属性。它可以改变元素的布局行为和周围元素的布局关系。

详细参数用法:

none: 该元素不显示，并从布局中移除。
block: 该元素显示为块级元素，通常会占据一整行。
inline: 该元素显示为内联元素，不会独占一行。
inline-block: 该元素横排显示，但同时具有块级元素的特性，如设置宽高。
flex: 该元素变为弹性布局容器，可以使用Flexbox模型中的属性。
grid: 该元素变为网格布局容器，可以使用Grid布局模型中的属性。

代码示例:

<!-- 隐藏元素 -->
<div style="display: none;">不会显示的元素</div>

<!-- 块级元素 -->
<div style="display: block;">独占一行的块级元素</div>

<!-- 内联元素 -->
<span style="display: inline;">内联显示的元素</span>

<!-- 内联块级元素 -->
<span style="display: inline-block; width: 100px; height: 100px;">
  定宽高的内联块级元素
</span>

预计输出效果:

第一个div不会显示在页面上。
第二个div会独占一行。
第三个span会在一行中与其他元素并排显示。
第四个span同样会并排显示，但是你可以设置它的宽度和高度。

弹性盒模型（Flexbox）

概念: Flexbox是一个强大的一维布局工具，允许你快速设计灵活的布局结构。

主要属性:

flex-direction: 定义主轴的方向（row，row-reverse，column，column-reverse）。
justify-content: 在主轴方向上的对齐方式（如flex-start，flex-end，center，space-between等）。
align-items: 在交叉轴上的对齐方式（如stretch，center，flex-start，flex-end）。
flex-wrap: 定义如何处理容器内不足以放下的子元素（nowrap，wrap，wrap-reverse）。
flex-grow, flex-shrink, flex-basis: 定义项目的放大比例，缩小比例，以及默认尺寸。

代码示例:

<!-- Flexbox 容器 -->
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
  <!-- Flexbox 项目 -->
  <div style="flex-grow: 1;">伸展的子元素</div>
  <div style="flex-basis: 200px;">基础宽度200px的子元素</div>
  <div>自动大小的子元素</div>
</div>

预计输出效果:

第一个div将会伸展以占据多余的空间。
第二个div的起始宽度会是200px。
第三个div的大小将会根据内容自动调整。

网格布局（Grid）

概念: Grid布局允许你在二维空间内（行和列）对元素进行布局。

主要属性:

grid-template-columns 和 grid-template-rows: 分别定义列宽和行高。
grid-column 和 grid-row: 定位子元素的列和行。
gap: 定义行间隔和列间隔。

代码示例:

<!-- Grid 容器 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
  <!-- Grid 项目 -->
  <div>第一列</div>
  <div>第二列</div>
  <div>第三列</div>
  <!-- 更多列 -->
</div>

预计输出效果:

一个有三列的网格，每列等宽。
列与列之间有20px的间隔。

课后练习

显示属性练习: 创建一个HTML页面，尝试给不同的元素应用不同的display属性值，观察它们的表现和区别。
Flexbox练习: 设计一个响应式的导航栏，要求包含logo和几个导航链接，要在不同屏幕尺寸下都能保持良好的布局和对齐。
Grid练习: 制作一个图像画廊页面，使用Grid布局来安排图像。尝试不同的grid-template-columns值来改变列数和列宽。

为了帮助你完成这些练习，可以参考以下资源：

MDN Web Docs（https://developer.mozilla.org/）提供的CSS布局相关文档。
CSS Tricks 的Flexbox指南（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）和Grid指南（https://css-tricks.com/snippets/css/complete-guide-grid/）。

记得在编码过程中，多尝试和变化参数，这样可以加深你对每个属性如何影响布局的理解。

章节目录
 第十五课：文本、字体颜色和背景