全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

2023-10-31 18:23:02 浏览数 (1)
实践文章整理不易，请各位看友，点击文中广告，支持支持作者我呀!

0x00 前言简述

描述: 前面相信大家已经跟着【WeiyiGeek】作者一起学习了CSS基础知识了，并且了解了盒子模型、以及元素的定位浮动方面的知识。现在我们在此基础上继续深入学习CSS布局，它是学习CSS之路上一个重点，是在进行前端开发时常常使用到的，所以说我们需要认真学习，若有不懂的地方可以在文章末尾，以及作者交流群【在公众号回复微信交流群】进行留言交流。

同时，欢迎各位看友支持《#前端学习之路》专栏的更新。

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置，本章将主要针对正常布局流, FlexBox(弹性盒子), Grid(网格), Column (多列布局), 以及最后再了解一下CSS 表格布局（它是传统的布局方式，在当前开发中不建议使用，我们简单了解即可）等技术进行讲解。

CSS 布局相关属性一览

代码语言：javascript复制
# 传统布局
display (前已学习): 此章节主要的几个布局属性，即 flex、grid
position (前已学习)：此章节主要的几个布局属性, 即 静态定位（默认）、相对定位、绝对定位、固定定位(类似于绝对)、粘性定位。

# 常规流布局,即在你没有改变默认布局规则情况下的页面元素布局方式。

# FlexBox 流布局 
display: flex; 指定元素的布局为 flexible。
display: inline-flex; 元素的子元素作为 flex 项但是该元素的行为类似于行内元素。
flex: 设置 flex 项的动态尺寸，表示每个 flex 项沿主轴的可用空间大小, 实际上它可以指定最多三个不同值的缩写属性。
flex-grow : 指定 flex 元素的flex 增长系数。
flex-shrink ： 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。
flex-basis : 指定 flex 元素在主轴方向上的初始大小。
flex-direction : 指定主轴的方向（弹性盒子子类放置的地方），其默认值为 row (`行布局`)，当然你可以设置 column (`列布局`) ，以及 row-reverse (`行元素排列的方向相反`) ， column-reverse (`列元素排列的方向相反`)
flex-wrap : 当弹性盒子子类元素宽度超过父元素宽度时，使用其 wrap 值可以自动换行。
flex-flow : 它是 flex-direction 和 flex-wrap 两个属性的缩写，其属性值设置, 值为 row wrap 或者 row 单用。

# Grid 布局 
grid-template-columns 属性: 定义网格列的数量及宽度大小，建议使用 fr 单位来设置灵活网格，此单位代表网格容器中可用空间的一份(`1fr 1fr 1fr` = `repeat(3, 1fr);`=>表明了后续列宽的配置要重复多少次)
grid-template-rows 属性: 定义网格行的数量及行高大小。
grid-auto-columns 属性: 默认是 auto 大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
grid-auto-rows 属性: 默认是 auto大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
grid-gap 属性：同时定义网格的列、行间隙，若想单独定义请看下面两个属性。
grid-column-gap 属性：定义列间隙。
grid-row-gap 属性 ：定义行间隙。
grid-column 属性 ：用于指定网格项目`列`的大小和位置，开始与结束的线的序号要使用/符号分开。
grid-column-start 属性 ：指定网格项在网格`列`中的起始位置。
grid-column-end 属性 ：指定网格项在网格`列`中的起始位置。
grid-row 属性 ：用于指定网格项目`行`的大小和位置，开始与结束的线的序号要使用/符号分开。
grid-row-start 属性 ：指定网格项在网格`行`中的起始位置
grid-row-end 属性 ：指定网格项在网格`行`中的起始位置
grid-template-areas 属性 ：定义放置元素的区域，是网格区域 grid areas 在 CSS 中的特定命名。

# 多列布局 multicol
column-count: 创建指定数量的列
column-width: 创建列具有弹性的宽度（尽可能按照宽度创建列，若容器与宽度成比例的数量）
column-fill：此属性控制在分解为列时如何平衡元素的内容。
column-span：属性使元素在其值设置为all时可以跨所有列。
column-gap：设置列间间隙
column-rule：在列间加入一条分割线(颜色、样式、宽度)
column-rule-color：设置分割线颜色
column-rule-style：设置分割线样式
column-rule-width：设置分割线宽度

# Table 布局 display: table (不建议，简单了解)
display: table-row-group ：该元素的行为类似于 HTML 的 <tbody> 元素。
display: table-header-group：该元素的行为类似于 HTML 的 <thead> 元素。
display: table-footer-group： 该元素的行为类似于 HTML 的 <tfoot> 元素。
display: table-row: 该元素的行为类似于 HTML 的 <tr> 元素。
display: table-cell: 该元素的行为类似于 HTML 的 <td> 元素。
display: table-column-group: 该元素的行为类似于 HTML 的 <colgroup> 元素。
display: table-column: 该元素的行为类似于 HTML <col> 元素。
display: table-caption: 该元素的行为类似于 HTML 的 <caption> 元素。
display: ruby-base 实验性 : 该元素的行为类似于 HTML 的 <rb> 元素。
display: ruby-text 实验性 : 该元素的行为类似于 HTML 的 <rt> 元素。
display: ruby-base-container 实验性 : 该元素是作为匿名盒子生成的。
display: ruby-text-container 实验性 : 该元素的行为类似于 HTML 的 <rtc> 元素。

0x01 CSS 页面布局

1.正常布局流

描述: 正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。

元素在默认情况下是如何布局的？

首先，取得元素的内容并将其放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距——就是我们所说的盒子模型。然后，一个块级元素会填充其父元素所有的行向空间，并沿着其块向伸长以容纳其内容，行级元素的大小就是其本身的大小；如果你想要控制行级元素的 display 属性，请使用 CSS 将其设置为块级元素（例如，使用 display: block; 或 display: inline-block;，后者混合了两者特性）。

下面，我们可以快速查看一个HTML正常布局流的示例, 其文本内容并不会随着窗口的变化而变化：

代码语言：javascript复制
<style>
body {
  width: 500px;
  margin: 0 auto;
}
p {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
}
span {
  background: white;
  border: 1px solid black;
}
img {
  width: 450px;
  height: auto;
}
</style>
<h1>基础文档流</h1>
<p>我是一个基本的块级元素。我的相邻块级元素在我的下方另起一行。</p>
<p>默认情况下，我们会占据父元素 100% 的宽度，并且我们的高度与我们的子元素内容一样高。我们的总宽度和高度是我们的内容   内边距   边框宽度/高度。
</p>
<p> 我们以我们的外边距分隔由于外边距折叠，我们以其中一个外边距的宽度分隔，而不是两个。</p>
<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>
<p>
如果行级元素溢出，<span>那么它们将会换行，就像这个包含文本的行级元素一样</span>，或者如果没有足够的空间，那么它们将会换到新的一行，就像这个图片一样：
<img src="https://www.weiyigeek.top/img/wx-mini-program.jpg" alt="snippet of cloth" />
</p>
<p> Blog: https://blog.weiyigeek.top</p>
<p>The end!</p>

执行结果:

此此小节，我们通过了解行级元素、块级元素以及外边距的默认行为，在未来你可以更轻松地修改这些行为。

总之，当你使用 css 创建一个布局时，此时默认的正常布局流将会被改变，通常使用 display、float、position 、表格、多列布局样式设置会覆盖默认的布局, 这些我们在上一章【5.CSS基础知识之定位浮动学习笔记】，讲解过此处不再过多的陈述。

2.弹性盒子 (Flexbox)

描述: Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。

为啥会出现弹性盒子？

长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning, 虽然这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。例如，在父内容里面垂直居中一个块内容;使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同等场景下使用浮动和定位可能难以实现。

模型说明描述: 当给元素设置flex时，它们沿着两个轴来布局，例如当<section>元素中包含了三个 <article> 元素，设置了 display: flex 的父元素 section 被称之为 flex 容器（flex container）, 而在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）即元素 article , 此时其模型如下图所示：

  • 主轴（main axis）：是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）; 该轴的开始和结束被称为 main start 和 main end。
  • 交叉轴（cross axis）: 是垂直于 flex 元素放置方向的轴; 该轴的开始和结束被称为 cross start 和 cross end。

weiyigeek.top-flex模型说明图

Flex 布局相关属性:

  • flex-direction: 指定主轴的方向（弹性盒子子类放置的地方），其默认值为 row (行布局)，当然你可以设置 column (列布局) ，以及 row-reverse (行元素排列的方向相反) ， column-reverse (列元素排列的方向相反)
  • flex-wrap : 当弹性盒子子类元素宽度超过父元素宽度时，使用其 wrap 值可以自动换行。
  • flex-flow : 它是 flex-direction 和 flex-wrap 两个属性的缩写，其属性值设置,如 flex-flow: row wrap; 或者 flex-flow: row 单用
  • flex ：设置 flex 项的动态尺寸，表示每个 flex 项沿主轴的可用空间大小, 实际上它可以指定最多三个不同值的缩写属性。
  • flex-grow : 设置 flex 项主尺寸的 flex 增长系数，无单位比例。
  • flex-shrink ：指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。
  • flex-basis : 指定最小值
flex - 弹性布局子元素动态尺寸

描述: flex 属性设置了弹性布局如何增大或缩小以适应其弹性容器中可用的空间，此属性是 flex-grow、flex-shrink、flex-basis 3个属性的简写。

语法参数：

代码语言：javascript复制
/* 语法 */
flex =  none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  

/* 参数 */
initial： 元素会根据自身宽高设置尺寸
auto： 元素会根据自身宽度与高度来确定尺寸（自适应）等同于 "flex: 1 1 auto"
none： 元素会根据自身宽高来设置尺寸（完全非弹性的）等同于 "flex: 0 0 auto"
flex-grow: 0
flex-shrink: 1
flex-basis: auto

/* 格式 */
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 单值，无单位数字：flex-grow 、flex-basis 此时等于 0。 */
flex: 2;
/* 单值，宽度/高度：flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 双值：flex-grow | flex-basis */
flex: 1 30px;
/* 双值：flex-grow | flex-shrink */
flex: 2 2;
/* 三值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

示例演示:

代码语言：javascript复制
<style>
* { box-sizing: border-box;}
.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}
.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}
.initial { flex: initial;}
.auto { flex: auto;}
.none { flex: none;}
.four { flex: 4;}
.two { flex: 2;}
.one { flex: 1;}
</style>
<div class="flex-container">
  <div class="item auto">auto</div> <div class="item auto">auto</div> <div class="item auto">auto</div>
</div>
<div class="flex-container">
  <div class="item auto">auto</div> <div class="item initial">initial</div> <div class="item initial">initial</div>
</div>
<div class="flex-container">
  <div class="item auto">auto</div> <div class="item auto">auto</div> <div class="item none">none</div>
</div>
<div class="flex-container">
  <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div>
</div>
<div class="flex-container">
  <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div>
</div>

执行结果:

flex-grow - 指定 flex 元素的flex 增长系数

描述: flex-grow 属性主要设置 flex 项主尺寸的 flex 增长系数，简单的说是item flex的宽度比例。

语法参数:

代码语言：javascript复制
/* 语法 */
flex-grow = <number [0,∞]>  

/* 格式 */
/* <number> 值 */
flex-grow: 3;
flex-grow: 0.6;

简单示例:

  • 1.设置 flex 项目增长因子。
代码语言：javascript复制
<style>
#content {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}
.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
</style>
<h4>这展示了 flex 增长</h4>
<h5>A,B,C 和 F 具有 flex-grow:1。D 和 E 具有 flex-grow:2 .</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

执行结果：

flex-shrink - 指定 flex 元素的收缩规则

描述: flex-shrink 属性指定了 flex 元素的收缩规则, flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据此值。

语法参数:

代码语言：javascript复制
/* 语法 */
flex-shrink =  <number [0,∞]>  

/* 格式 */
flex-shrink: 2;
flex-shrink: 0.6;
flex-basis - 指定 flex 元素在主轴方向上的初始大小

描述: 此属性指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

语法参数:

代码语言：javascript复制
/* 语法 */
flex-basis = content | <'width'> 

/* 参数 */
content：基于 flex 的元素的内容自动调整大小。

/* 格式 */
/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 在 flex item 内容上的自动尺寸 */
flex-basis: content;

简单示例示例1.我们在父元素上使用 display: flex 属性值标志着进行 flex 布局，所有直接子元素都将会按照 flex 进行布局。

在所有子元素上添加 flex 属性，并赋值为1，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄,。

下面，我们来看一个最简单的 Flexbox 布局的示例:

代码语言：javascript复制
<style>
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
}
.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  flex: 1;
}
</style>
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

执行结果:

flex-flow - flex 容器中布局及单多行显示

描述: 它是 flex-direction 和 flex-wrap 两个属性的缩写，其属性值设置, 其默认值值为 row wrap;。

语法参数:

代码语言：javascript复制
/* 语法 */
flex-flow = 
  <'flex-direction'>  || <'flex-wrap'>    

/* 参数 */
取值信息请查看 flex-direction 和 flex-wrap

/* 格式 */
flex-flow: column-reverse wrap;
flex-direction - 指定内部元素是如何在 flex 容器中布局

描述: flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

语法参数

代码语言：javascript复制
/* 语法 */
flex-direction = row | row-reverse | column | column-reverse  

/* 参数 */
row ：flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row-reverse ：表现和 row 相同，但是置换了主轴起点和主轴终点
column ：flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
column-reverse ：表现和column相同，但是置换了主轴起点和主轴终点
flex-wrap - 指定 flex 元素单/多行显示

描述: flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

语法参数

代码语言：javascript复制
/* 语法 */
flex-wrap = nowrap | wrap | wrap-reverse  

/* 参数 */
nowrap ：flex 的元素被摆放到到一行，可能导致 flex 容器溢出。
wrap ：flex 元素被打断到多个行中，即支持溢出换行。
wrap-reverse ：和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

/* 格式 */
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

简单示例示例1.Flex 布局之水平和垂直对齐、项排序、嵌套示例演示。

代码语言：javascript复制
<style>
  body {
    margin: 0;
  }
  header {
    background: purple;
    height: 100px;
  }
  h1 {
    text-align: center;
    color: white;
    line-height: 100px;
    margin: 0;
  }
  article {
    padding: 10px;
    margin: 10px;
    background: aqua;
  }
  /* Add your flexbox CSS below here */
  article {
    /* flex : 控制 flex 项占用空间的比例的 */
    flex: 1 200px;
  }
  article:nth-of-type(3) {
    /* 设置第三个 <article> 元素的子节点的布局同样为 flex，但是属性值为列布局 */
    flex: 3 200px;
    display: flex;
    flex-flow: column;
  }
  article:nth-of-type(3) div:first-child {
    /* 选择第一个div，首先使用 flex: 1 100px; 简单的给它一个最小的高度 100px，溢出则换行 */
    flex: 1 100px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
  }
  section {
    display: flex;
  }
  button {
    /*  给按钮设置大小，并设置值为 1 auto 的 flex 属性，此时调整浏览器窗口宽度将会根据宽度进行自适应 */
    flex: 1 auto;
    margin: 5px;
    font-size: 18px;
    line-height: 1.5;
  }
</style>
<header>
  <h1>Complex flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>本页记录了博主（WeiyiGeek）个人在初识计算机技术到从业过程中学习的路径，包括在此学习、工作过程中学习的计算机基础知识、网络工程师、开发程序员、运维工程师以及物联网硬件等相关学习资料（书籍、视频）和总结的笔记，并按学习类别分别进行整理归纳，方便后续回顾学习以及帮助后来学习的朋友做一个学习参考，希望能对各位读者朋友们的学习有帮助, 有成长。
      </p>
  </article>

  <article>
    <h2>Second article</h2>
    <p>本节中推荐了博主所看的一些书籍，在电子化资料横行的今天，我觉得学习还是离不开纸质书籍，它可以帮助您加深知识的理解，让你事半功倍;当下，我的学习方法通常是先参考官方文档中的入门实践、然后在看看与其相关的视频实践，最后找寻相关书籍（纸质或者电子化）进行加深学习，实践并总结经验笔记。</p>
  </article>

  <article>
    <!-- 设置第一个div为列布局 -->
    <div>
      <button>前端</button>
      <button>后端</button>
      <button>运维</button>
      <button>网安</button>
      <button>DBA</button>
    </div>
    <div>
      <p>欢迎关注【WeiyiGeek】作者，我将持续整理不断更新中, 希望各位看友多多支持!，邀请各位看友加入学习交流群【 https://weiyigeek.top/visit.html 】相互监督学习答疑。
        </p>
    </div>
    <div>
      <p>欢迎各位朋友关注我的微信公众号【WeiyiGeek】以及微信小程序【极客全栈修炼】，以及学习交流群( https://weiyigeek.top/visit.html )。 </p>
    </div>
  </article>
</section>

执行结果:

综上所述，弹性盒子的真正价值可以体现在它的灵活性/响应性，如果你调整浏览器窗口的大小，或者增加一个 <article> 元素，这时的布局仍旧是好的。

3.网格布局 (Grid)

描述: CSS 网格是一个用于 web 的二维布局系统，Grid 网格布局设计用于同时在两个维度上把元素按行和列排列整齐,

为啥会出现网格布局？

网格是由一系列水平及垂直的线构成的一种布局模式, 它可以帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。网格具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，被称为沟槽（gutter），如下示例所示：

weiyigeek.top-Grid 布局图

网格布局的相关属性

  • grid-template-columns 属性: 定义网格列的数量及宽度大小，建议使用 fr 单位来设置灵活网格，此单位代表网格容器中可用空间的一份(1fr 1fr 1fr = repeat(3, 1fr);=>表明了后续列宽的配置要重复多少次)
  • grid-template-rows 属性: 定义网格行的数量及行高大小。
  • grid-gap 属性：同时定义网格的列、行间隙，若想单独定义请看下面两个属性。
  • grid-column-gap 属性：定义列间隙。
  • grid-row-gap 属性 ：定义行间隙。
  • grid-auto-columns 属性: 默认是 auto 大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
  • grid-auto-rows 属性: 默认是 auto大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
  • grid-column 属性 ：用于指定网格项目列的大小和位置，开始与结束的线的序号要使用/符号分开。
  • grid-column-start 属性 ：指定网格项在网格列中的起始位置。
  • grid-column-end 属性 ：指定网格项在网格列中的起始位置。
  • grid-row 属性 ：用于指定网格项目行的大小和位置，开始与结束的线的序号要使用/符号分开。
  • grid-row-start 属性 ：指定网格项在网格行中的起始位置
  • grid-row-end 属性 ：指定网格项在网格行中的起始位置
  • grid-template-areas 属性 ：定义放置元素的区域，是网格区域 grid areas 在 CSS 中的特定命名。

温馨提示:

  • fr 单位 分配的是可用空间而非所有空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。
grid-template-columns - 定义列网格尺寸大小

描述: 该属性是基于网格列的维度，去定义网格线的名称和网格轨道的尺寸大小。

语法参数:

代码语言：javascript复制
/* 语法 */
grid-template-columns = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

/* 参数 */
none : 表示不明确的网格,所有的列和其大小都将由grid-auto-columns 属性隐式的指定。
<length> : 非负值的长度大小。
<flex> : 非负值，用单位 fr 来定义网格轨道大小的弹性系数
<percentage> : 百分比。
max-content : 是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
min-content : 是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
auto : 如果该网格轨道为最大时，该属性等同于 <max-content>，为最小时，则等同于 <min-content>。
fit-content( [ <length> | <percentage> ] ): 相当于公式 min(max-content, max(auto, argument))
minmax(min, max): 是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) :  表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。

格式:

代码语言：javascript复制
/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];
grid-template-rows - 定义行网格尺寸大小

描述: 该属性是基于网格行的维度，去定义网格线的名称和网格轨道的尺寸大小。

语法参数:

代码语言：javascript复制
/* 语法 */
grid-template-rows = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

/* 参数，同 grid-template-columns*/

格式:

代码语言：javascript复制
/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;
gap、grid-gap - 定义网格的列、行间隙

描述: gap、grid-gap 属性是用来设置网格行与列之间的间隙（gutters），该属性是 row-gap 和 column-gap 的简写形式，建议在开发中使用gap而不是grid-gap(语义过渡)属性

语法参数

代码语言：javascript复制
/* 语法 */
gap =  <'row-gap'> <'column-gap'>?  
/* 参数 */
<length> : 网格线之间的间隙宽度。
<percentage> : 网格线直接的间隙宽度，相对网格容器的百分比。

格式

代码语言：javascript复制
/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10%   20px);
gap: calc(20px   10%) calc(10% - 5px);

示例演示:

  • 示例 1.同 flex 一样，你可以通过指定 display 的值来转到 grid 布局 display: grid, 并使用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道，最后使用grid-gap定义网格间隙，我们来看一个最简单的 Grid 布局的示例:
代码语言：javascript复制
<style>
* {
  box-sizing: border-box;
}
.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
.wrapper {
  display: grid;
  /* 使用fr单位控制列数、宽 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 使用repeat来重复构建具有某些宽度配置的某些列，效果同上
  grid-template-columns: repeat(3, 1fr); */
  /* 行数、高控制 */
  grid-template-rows: 100px 50px;
  /* 行、列间隙设置，注意不能使用fr单位*/
  grid-gap: 10px;
}
</style>
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
  <div class="box6">Six</div>
</div>

执行结果:

grid-auto-columns - 指定隐式纵向(列)轨道宽度
grid-auto-rows - 指定隐式横向(行)轨道大小

描述: 显式网格是我们用 grid-template-columns 或 grid-template-rows 属性 创建的。而隐式网格使用 grid-auto-rows 和 grid-auto-columns 属性创建 则是当有内容被放到网格外时才会生成的, 显式网格与隐式网格的关系与弹性盒子的 main 和 cross 轴的关系有些类似。简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。

语法参数:

代码语言：javascript复制
/* 语法 */
grid-auto-columns =  <track-size>   
grid-auto-rows =  <track-size>   
<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage> )     

/* 参数 */
<length> ：指定一个非负的数作为尺寸
<percentage> ：指定一个非负的百分数（<percentage>），相对于 grid 容器的尺寸。
<flex> ：指定一个以 fr 为单位非负的尺寸，表示轨道的伸缩系数。
max-content ：一个关键字，表示以网格项的最大的内容来占据网格轨道。
min-content ：一个关键字，表示以网格项的最大的最小内容来占据网格轨道。
minmax(min, max) ： 定义一个尺寸范围，即大于或等于 min 值，并且小于或等于 max 值。
fit-content(argument) ：等同于公式 min(max-content, max(auto, argument))。
auto ：如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content>。

格式

代码语言：javascript复制
/* 以下是不同类型的属性值示例 */
/* Keyword values */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* <length> values */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* <percentage> values */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* <flex> values */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() values */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

示例演示

  • 示例 1.定义隐式网格以及 minmax() 函数、自动使用多列填充 repeat(auto-fill, minmax(200px, 1fr))示例。
代码语言：javascript复制
<style>
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
.container {
  /* 使用 grid 网格布局 */
  display: grid;
  /* 显示网格列宽度设置，让网格自动创建很多列来填满整个容器 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 所有行都位于隐式网格内，如果内容尺寸大于 100 像素则会根据内容自动调整。 */
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}
</style>
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

效果结果: 其网格布局的子元素中div边框随着窗口变化而变化。

grid-column、grid-row - 指定网格项目的大小和位置

描述: grid-column 属性是 grid-column-start 和 grid-column-end 的简写属性，它定义了网格单元与网格列（column）相关的尺寸和位置，跨度或不添加任何内容（自动），从而指定其 grid area。

grid-row 属性是 grid-row-start 和 grid-row-end 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。

语法参数

代码语言：javascript复制
grid-column =  <grid-line> [ / <grid-line> ]?  
grid-row =  <grid-line> [ / <grid-line> ]?  

/* 参数 */
auto 表示自动放置，自动跨度或默认跨度为 1。
<custom-ident>  start / 
span && [ <integer> || <custom-ident> ] 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘 n 行。
如果忽略 <integer> ，它就默认设为 1。它的值也不能为 0。

格式

代码语言：javascript复制
/* 不同类型的属性值 */
/* Keyword values */
grid-row: auto;
grid-row: auto / auto;

/* <custom-ident> values */
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/* <integer>   <custom-ident> values */
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/* span   <integer>   <custom-ident> values */
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

grid-column: 2 / 4;
grid-column: span 2 / 7;

示例演示: 示例 1.用定义网格线的方法将所有元素放置到网格中.

代码语言：javascript复制
<style>
body {
  width: 90%;
  max-width: 900px;
  margin: 1em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
.container {
  display: grid;
  /* 定义网格的列比重 */
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 20px;
}
/* 占用第1行，一到三列 */
header {
  grid-column: 1 / 3;
  grid-row: 1;
}
/* 占用第2行，两列 */
article {
  grid-column: 2;
  grid-row: 2;
}
/* 占用第2行，三列 */
aside {
  grid-column: 1;
  grid-row: 2;
}
/* 占用第3行，一到四列 */
footer {
  grid-column: 1 / 4 ;
  grid-row: 3;
}
header,
footer {
  border-radius: 5px;
  padding: 5px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
aside {
  border-right: 1px solid #999;
}
</style>
<div class="container">
  <header>This is WeiyiGeek's blog</header>
  <article>
    <h1>如何修炼成为全栈工程师？</h1>
    <p>
      本页记录了博主（WeiyiGeek）个人在初识计算机技术到从业过程中学习的路径，包括在此学习、工作过程中学习的计算机基础知识、网络工程师、开发程序员、运维工程师以及物联网硬件等相关学习资料（书籍、视频）总结而出的学习之路笔记，并按类别进行分别整理归纳汇总，方便后续回顾学习以及帮助后来学习的朋友做一个学习参考，希望能对各位读者朋友们的学习有帮助, 有成长。
    </p>
    <p>
      相关学习书籍以及视频推荐，请访问如下book站点查阅（持续更新中）：https://blog.weiyigeek.top/books/
    </p>
  </article>

  <aside>
    <h2>学习交流</h2>
    <p>
      欢迎各位朋友关注我的微信公众号【WeiyiGeek】以及微信小程序【极客全栈修炼】，以及欢迎同道中人加入到小白到大神学习交流群( https://weiyigeek.top/visit.html )。
    </p>
  </aside>
  <footer>
    原文作者: WeiyiGeek [https://weiyigeek.top]<br>
    转载注明出处，原文地址：https://blog.weiyigeek.top/2018/1-1-1.html<br>
    更多最新文章, 请关注我的微信公众账号【WeiyiGeek】或者【B站专栏】哟, 谢谢支持！(๑′ᴗ‵๑) ❤<br>
</footer>
</div>

执行效果：

grid-template-areas - 定义网格区域模板放置元素

描述: 此属性是网格区域 grid areas 在 CSS 中的特定命名。网格区块 (grid areas) 和网格项 (grid item) 沒有关联，但是它们可以和一些网格定位属性 (grid-placement properties) 关联起来，比如 grid-row-start， grid-row-end， grid-column-start 和 grid-column-end；也可以和一些速记 (shorthands) 属性关联起来，比如 grid-row，grid-column 和 grid-area。

语法参数:

代码语言：javascript复制
/* 语法 */
grid-template-areas =  none | <string>   

/* 参数 */
none ：网格容器没有定义任何的网格区块 (grid areas)。
<string>  ：每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元 (cell) 会生成一列, 多个同名的，跨越相邻行或列的单元称为网格区块 (grid area)，非矩形的网格区块是无效的。

格式:

代码语言：javascript复制
grid-template-areas: none;
grid-template-areas: "a b"; /* 一行 两列 */
grid-template-areas:
  "a b b"
  "a c d"; /* 两行 三列 */
grid-template-areas:
  "a b ."
  "a c c"; /* 两行 三列 */

/* 使用 . 来占位元素位置。 */

亲，文章就要看完了，不关注一下【全栈工程师修炼指南】吗？

示例演示

示例 1.使用 grid-template-areas 属性放置元素，来区别使用grid-column、grid-row布局网格方法, 此处仍然使用上一个示例文件中的html内容。

代码语言：javascript复制
<style>
body {
  width: 90%;
  max-width: 900px;
  margin: 1em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
.container {
  /* 使用网格布局，定义网格的列比重 */
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;

  /* 使用区域模板进行定义,空白区域使用 . 占位 */
  grid-template-areas:
    "header header ."
    "sidebar content ."
    "footer footer footer";
  gap: 20px;
}
header {
  grid-area: header;
}
article {
  grid-area: content;
}
aside {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}
header,
footer {
  border-radius: 5px;
  padding: 5px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
aside {
  border-right: 1px solid #999;
}
</style>

执行效果:

温馨提示: 由于篇幅过长问题，多列布局（Multicol），浮动布局（Float），表格布局（Table），以及其他传统布局（Other traditions）等知识将在下一章节进行学习。

本文至此完毕，更多技术文章，尽情等待下篇好文！

原文地址: https://blog.weiyigeek.top/2023/9-10-777.html

css3 布局 前端 全栈 语法

0 人点赞