-文本排版：在处理一段包含多个内联元素（比如不同样式的文字、链接等混合在一起）的文本内容时，IFC 规则决定了它们如何在一行内排列以及垂直方向上的对齐情况。...GFC（Grid Formatting Context，网格格式化上下文）定义：GFC 是 CSS3 中 grid（网格）布局模块所创建的一种格式化上下文，它提供了一种二维的布局方式，能像表格一样将页面划分为行和列...布局特性及相关属性：定义网格结构：通过 grid-template-columns 和 grid-template-rows 属性来分别定义网格的列和行的尺寸、数量等。...（控制元素在单元格内垂直方向的对齐）、justify-content（控制整个网格容器内网格内容在水平方向的对齐）、align-content（控制整个网格容器内网格内容在垂直方向的对齐）等属性，取值同样有...页面整体布局：对于复杂的网页页面，如电商网站的商品展示页面、新闻资讯网站的文章列表页等，使用 GFC 可以清晰地划分不同的板块区域，像头部导航、侧边栏、主体内容区、底部版权信息区等，将它们按照网格结构进行布局
div> 这是一段普通文本，用于展示浮动元素与文本的关系。...常用于创建垂直菜单、侧边栏以及垂直堆叠的内容区域，能有效利用垂直空间，使页面布局更紧凑、有条理。 示例4-3： <!...（Grid 布局） Grid 布局（网格布局）是 CSS 中一种强大的二维布局模型，它能够将网页分割为行和列的网格，然后精确地将元素放置到这些网格区域中。...如 grid-template-rows: 80px 120px 创建两行，高度分别为 80px、120px ；grid-template-rows: 1fr 3fr 按比例分配行高。...：align-items 设置网格项目垂直对齐方式，取值同 justify-items，分别对应顶部对齐、底部对齐、居中对齐和拉伸填充。
CSS 是什么、CSS 如何工作、CSS 的简单使用、CSS 的调试、CSS 盒模型、CSS 布局、学习 CSS 的方法等 # 理解 CSS - 笔记 # CSS 是什么 Cascading Style...# 行高 line-height 即每行文字的 baseline 的间距，可以用不带单位的数字表示行高为字体大小的数倍 line-height: 1.6; line-height: 32px; # 文本对齐方式...、border、margin 如何使用 CSS 模拟三角形？...决定一行内盒子的水平对齐 vertical-align 决定一行内盒子在行内的垂直对齐 避开浮动 (float) 元素 # 块级排版上下文 Block Formatting Context...（交叉轴）的元素摆放规则（垂直对齐规则） # align-self 属性 对于单个元素自身设置其侧轴（交叉轴）的摆放规则（垂直对齐规则） # order 属性 调整元素的在摆放顺序中的位置，值越小越靠前
– 生成内联级网格 ❝默认情况下，Grid 使用「单列」，并根据子元素的数量动态创建行。...其实，网格容器仍然使用流式布局，而流式布局中的块级元素会垂直增长以容纳其内容。「只有子元素使用网格布局进行排列」。...我们可以使用grid-template-rows[10]属性来实现： 通过同时定义grid-template-rows和grid-template-columns，我们创建了一个显式网格。...如何抉择 在构建显示布局时，我们可以通过使用areas和行/列都可以达到目的，但是呢，使用areas时，它允许我们给grid分配语义含义，而不是使用晦涩难懂的行/列数字。...只使用两个 CSS 属性，我们就可以将子元素水平和垂直居中于容器中： 正如我们所学到的，justify-content 控制列的位置。align-content 控制行的位置。
CSS的分类和HTML的分类很像，除了p不一样： 所有的「文本级标签」都是「行内元素」，除了p；「p是个文本级，但是是个块级元素」； 所有的「容器级标签」都是「块级元素」 当然，块级元素与行内元素是可以相互转换的...网格布局 5.1 Grid 布局是什么 网格是一组相交的水平线和垂直线，它定义了网格的列和行。CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。...正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。 上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。...「（6）网格线的名称」 grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。...这时，浏览器会自动生成多余的网格，以便放置项目。 grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。...四、CSS 网格单位 在 CSS 网格中，可以使用绝对定位和相对定位单位如px和em来确定行或列的大小。...该 CSS 网格属性也可以使用其他的值： start：使内容在单元格左侧对齐， center：使内容在单元格居中对齐， end：使内容在单元格右侧对齐....十四、align-items 垂直对齐所有项目 对网格容器使用align-items属性可以给网格中所有的网格项设置沿列轴对齐的方式。...二十二、在网格中创建网格 将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。
使用 CSS，我们可以轻松创建导航栏，即菜单。此外，链接可以左对齐或右对齐。我们将使用 flex 来实现相同的目的。让我们看看如何。使用 创建导航栏 元素用于在网页上创建导航栏。...使用position属性的固定值固定位置：nav { display: flex; position: fixed; top:0; width: 100%; background-color...: rgb(251, 255, 196); overflow: auto; height: auto;}设置 Left Links 的 div以下菜单链接位于网页的左侧：More Info链接与 Flex 向左对齐使用 flex 属性，将 Home、Login 和 Register 链接设置在左侧。...左侧柔性项的初始长度设置为 200px：.left-links{ flex:1 1 200px;}以下是创建具有左对齐和右对齐链接的导航栏的代码： <!
网格系统（CSS Grid）是CSS中最重要的特性之一。它能够以简单的方式将元素对齐到列和行中。CSS网格使得设计复杂且响应式的网页变得更加容易，无需使用浮动、表格或定位。...; } 你也可以使用grid-template-rows属性来定义行的宽度，或者像我们使用grid-template-columns那样自动拉伸行的宽度。...它们之间没有区别，只是我们是在处理行而不是列。 网格间隔属性（grid-gap） 网格间隔属性grid-gap用于在父元素内设置列和行之间的间隔。...） 对齐内容属性align-content用于垂直对齐容器内的所有网格。...你可以在文本编辑器上尝试它们，以查看它们之间的区别。 网格项（Grid Items） CSS网格还有一些有用的属性，你可以将它们传递给网格容器的子元素，以便轻松设计复杂的网格布局。
align-items：控制弹性项在交叉轴（默认垂直轴）上的对齐方式。常见值有stretch（拉伸）、center（居中）、flex-start（顶部对齐）等。...四、Grid布局 Grid布局是CSS的一种二维布局系统，可以非常轻松地创建复杂的网页布局。与Flexbox相比，Grid布局能够同时控制行和列。 1....Grid布局的其他属性 gap：设置网格单元格之间的间隔。 grid-template-areas：定义命名网格区域，可以用于创建更语义化的布局。...题1：创建一个三栏布局 使用Flexbox创建一个响应式三栏布局，其中左栏和右栏固定宽度，中间栏自适应剩余空间。...使用Grid布局创建一个三行三列的网格，其中第一行的两个单元格合并为一个单元格，第三行的三个单元格合并为一个单元格。
的值) ：你选择的任意名称 subgrid：如果你的网格容器本身就是一个网格项(即嵌套网格)，你可以使用此属性指定行和列的大小继承于父元素而不是自身指定（一般很少会用） .container...6. justify-items 定义所有网格项相对于列轴在水平方向上的对齐方式 start ：项目与网格轨道的左端对齐 end：项目与网格轨道的右端对齐 center：在项目所在轨道居中对齐 stretch...7. align-items 与 justify-items相对应的，网格项目在所在的行轨道上的对齐方式，属性值同样和列对齐是一样的： start：项目与行轨道顶端对齐 end：项目与行轨道底端对齐 center...当显示定位行与列（使用 grid-template-columns/grid-template-rows属性）时候，如果网格项目超出了网格的定义范围，那么就会创建隐式网格。...5. align-self 定义 某个网格项 相对于行轴在垂直方向上的对齐方式（可以定义某个网格项不同于 使用 align-items 的对齐方式） 这个与justify-self属性相同，不过是在垂直方向上
（注2：更多内容请查看我的目录。） 1. 导读 网格布局是由CSS3引入的一种新的布局方式，提供了强大的布局能力。我们先来看一下W3C对于它的描述。...然后，作者可以将其应用程序的构造块元素精确定位和设置到由这些列和行的交叉点定义的网格区域grid area中。以下示例说明了网格布局的自适应功能，以及它如何更清晰地分离内容和样式。...一个网格项目引用网格线来确定其网格中的位置属性。 下面两个例子创建了三个列网格线和四行网格线。第一个示例演示了设计师如何将一个使用网格行号的位置来确定网格项目的位置，第二个例子显式的设置了网格线。...网格容器的子元素称为网格项目以及运行在网格容器的文本将自动变成一个匿名的网格项目，然后如果只是一个空格，这个匿名项目就相当于“display:none”一相被隐藏在网格容器之中。...基本示例 以下示例显示了一个三列轨道网格，其中创建的行最小为100像素，最大为自动。条目使用线性定位放置在网格上。
CSS网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。 它像表格一样，网格布局让我们能够按行或列来对齐元素。...网格线（Grid Lines） 使用Grid布局在显式网格中定义轨道的同时会创建网格线。 网格线可以用它们的编号来寻址。在从左到右的语言中，列线1将位于网格的左侧，行线1将位于其顶部。...grid-template-rows 我们使用grid-template-rows来显性定义网格有多少行。它可以取如下的值： none 关键字，表示不明确的网格。...但是我们却有 5 个子元素。CSS网格决定将它们扩展到隐式创建的空间，新建的隐式行中的列自动从先前指定的grid-template-rows属性继承行高。...align-self用来垂直方向对齐，justify-self用来水平方向对齐。 align-self flex 布局也可以使用这个属性。
grid 布局的使用 css 网格布局，是一种二维布局系统。 浏览器支持情况:老旧浏览器不支持， 概念： 网格容器。...元素应用dispalay:grid,它是所有网格项的父元素。 ... 器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）。 ... 容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）。 ...5. align-self: start | end | center | stretch; 定义单个网格项垂直于行网格线的对齐方式。
简单来说，它就像一个显示文本、图像、视频等的框，通过使用宽度和高度等属性来调整大小。内容区包含元素的主要内容。内容包括文本、图像或视频。 2、填充： 填充在其边界内围绕元素创建空间。...e) space-around space-around 值在第一行之前和最后一行之后添加空间，并在行之间分配剩余空间。 f) stretch 拉伸值相对于行容器中最长的项目垂直拉伸弹性行。...您还可以尝试 CSS 网格图片库以了解有关 CSS 网格的更多信息。 如何创建 CSS 网格布局？ 要创建 CSS 网格布局，我们创建一个容器并将其 display 属性设置为网格。...这并不是创建网格布局所需要做的全部。您必须使用 CSS 属性 grid-template-columns 和 grid-template-rows 显式创建网格行和列。...e) start 起始值对齐网格容器开始处的所有网格项。 f) end end值对齐网格容器末尾的所有网格项 7) align-content align-content 垂直对齐容器内的整个网格。
往期文章 【css高级】变量详解 轮播图swiper框架的基本使用 【Transform3D】转换详解（看完就会） 【css动画】移动的小车 【CSS3】 float浮动与position定位常见问题（...看这个就够了 详解 CSS3中最好用的布局方式——flex弹性布局（看完就会） [前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（...行和列 整个grid页面布局是由行和列构成的，在使用grid布局时，需要单独设计行和列。 ...注：如果移动到了，使用了area属性，分了区域的子元素的话，子元素不会移动位置， 而是产生层叠的浮动效果，可以使用z-index属性来改变层级。...对于这个属性 我们还可以使用span关键字，他表示跨越的网格数量，而不是线的数量。
Grid Containers：首先我们要设置父元素的布局为grid，通过使用display属性给元素显式设置了属性值grid或inline-grid，此时这个元素将自动变成网格容器，对应上图的Sheet1...Grid Track：就是由lines构成的水平和垂直空间，对应到上图的水平和垂直灰色区域，而对于table来说就是row和column Grid Cell：简单来说就是单元格了，对应到上图就是蓝色的...A1，而对于table来说就是单元格 Grid Area：网格区域是由任意四条网格线组成的空间，可能由一个或多个单元格组成。...上的属性，这里我大概分为三大类： 第一类：如何去定义一个网格系统，行列及间距等 display：grid/inline-grid，定义使用网格系统 grid-template-columns：定义垂直栏...和space-between的不足 align-content：整个垂直栏在grid范围的对齐方式 第三类：自动分配形式，当定义的行或列数量不够时，item的自动排列方式 grid-auto-columns
基础 通过指定display: grid;指定容器使用Grid布局，Grid布局中采用网格布局的区域，称为容器，容器内部采用网格定位的子元素，称为成员。...容器中水平区域称为行，垂直区域称为列，可以将其看作二位数组。划分网格的线就称为网格线，正常情况下n行有n + 1根水平网格线，m列有m + 1根垂直网格线。...如果希望每一行或每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充，当容器不足容纳成员时会自适应换行。...grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。...它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
然后，一个块级元素会填充其父元素所有的行向空间，并沿着其块向伸长以容纳其内容，行级元素的大小就是其本身的大小；如果你想要控制行级元素的 display 属性，请使用 CSS 将其设置为块级元素（例如，使用...总之，当你使用 css 创建一个布局时，此时默认的正常布局流将会被改变，通常使用 display、float、position 、表格、多列布局样式设置会覆盖默认的布局, 这些我们在上一章【5.CSS基础知识之定位浮动学习笔记...3.网格布局 (Grid) 描述: CSS 网格是一个用于 web 的二维布局系统，Grid 网格布局设计用于同时在两个维度上把元素按行和列排列整齐, 为啥会出现网格布局？...) grid-template-rows 属性: 定义网格行的数量及行高大小。...grid 布局 display: grid, 并使用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道，最后使用grid-gap定义网格间隙
可接受长度、百分比、fr（fraction单位，表示网格空间的分数）或auto值。还可以使用repeat()函数创建重复轨道，以及使用minmax()函数定义轨道的最小和最大尺寸。...*/ } CSS Grid 与 Flexbox 结合 在某些情况下，我们可以结合CSS Grid和Flexbox的优点，创建更复杂的响应式布局。...*/ } } 首先使用CSS Grid创建了一个自适应列宽的网格布局。...每个网格项（子元素）内部使用Flexbox，使内容垂直居中。当屏幕宽度小于768px时，通过媒体查询切换到单列布局，以适应移动设备。...Flexbox 与 Grid 的选择 选择使用Flexbox还是Grid，通常取决于具体的需求： Flexbox 适合处理一维布局，比如行或列中的元素排列，以及元素的对齐和填充。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
