[image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距...块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。...FC(formatting context)直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。...如下图： [enter image description here] 当父元素设置了BFC之后，父元素与子元素p重叠区域将不再合并 .outer { background-color: #ccc;...flow-root浏览器兼容情况： [enter image description here] 浏览器对此值的支持是有限的，如果要在不支持flex或网格布局浏览器创建回退，了解BFC阻止浮动元素的负面影响十分必要
简单来说，就是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。...属于同一个 BFC 的两个相邻的 Box 的 margin 会发生重叠。 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。 BFC 的区域不会与浮动 Box 重叠。... Box 重叠，所以右侧空白没有了 外边距垂直方向重合的问题 BFC 还能够解决 margin 折叠的问题，例如： <div class="box2"...）：翻译成中文就是“网格布局格式化上下文”，将一块区域以 grid 网格的形式来格式化 FFC（Flex formatting contexts）：翻译成中文就是“弹性格式化上下文“，将一块区域以弹性盒的形式来格式化...更多关于格式化上下文的内容，可以参阅 MDN： BFC：*https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
是目前最为成熟和强大的布局方案 4、grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局 Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式...：空单元格 none：无网格区域被定义 将这个网格容器划分成几个区域，从而组成一个网格模板，这几个区域有各自的名称，子项目通过 grid-area 属性来占有相应的区域。...网格项可以互相重叠，使用 z-index 设置层级顺序 .item1 { background: red; grid-column-start: 1; grid-column-end:...同样的，如果只用一个值，也就是没有声明结束的网格线，默认的轨道跨度为 1 3. grid-area 网格容器通过属性 grid-template-areas 定义网格模板，每个区域定义自己的名称，然后网格项通过...如果网格容器没有定义模板，那么这个属性相当于 grid-column和grid-row的和，也就是由四个值组成 属性值： ：区域的名称 //
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。） 1. 导读 网格布局是由CSS3引入的一种新的布局方式，提供了强大的布局能力。...简介 （注：本节内容不是规范性的）。 网格布局是一种新的CSS布局模型，它具有强大的能力来控制箱子及其内容的大小和位置。...通过将媒体查询与控制网格容器及其子节点布局的CSS属性相结合，作者可以使其布局适应设备形状因素，方向和可用空间的变化，同时保持演示文稿内容的理想语义结构。...虽然许多布局可以用Grid或Flexbox来表示，但它们都有其特色。网格强制执行二维对齐，使用自上而下的布局方式，允许项目的显式重叠，并具有更强大的跨越能力。...然后，作者可以将其应用程序的构造块元素精确定位和设置到由这些列和行的交叉点定义的网格区域grid area中。以下示例说明了网格布局的自适应功能，以及它如何更清晰地分离内容和样式。
由于 IE 盒模型的怪异模式，IE 模型和标准模型的内容计算方式不同。...# 使用 BFC 解决边距重叠问题 块格式化上下文（Block Formatting Context，BFC） (opens new window) 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域...，也是浮动元素与其他元素交互的区域。...BFC 决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定的规则进行布局。...# BFC 渲染规则 BFC 元素垂直方向的边距会发生重叠，属于不同 BFC 外边距不会发生重叠 BFC 的区域不会与浮动元素的布局重叠 BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素
CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。...- 浮动(Floats) 在浮动模型中，盒首先根据常规流布局，然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。...BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。...应用场景 闭合浮动：浮动区域不叠加到BFC区域上 防止与浮动元素重叠 防止margin collapse float 元素高度塌陷 ......布局规则 通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid
下面是需要创建的内容： 要完成这个基本布局， Flexbox 需要完成的主要任务包括以下方面： 创建完整宽度的 header 和 footer 将侧边栏放置在主内容区域左侧 确保侧边栏和主内容区域的大小合适...Grid 模板区域 CSS Grid 的方便之处在于，可以指定模板区域，这也使得定义布局变得非常直观。采取这种方法，网格上的区域可以命名并引用位置项。...与创建网格布局完全不同。...这里 grid-template-column 已将侧边栏和主内容区域大小设置为 1fr 和 3fr。fr 是网格的分数单位。 接下来，需要调整 header 容器中的 fr 单元。...对于网格内容区域的设计，使用 Flexbox 进行样式的排序和微调会更容易实现。
是 W3C在CSS2.1 规范中的一个概念。FC是指页面中一篇渲染区域，渲染区域内使用的格式化上下文的渲染规则，决定了该区域以及其子元素如何定位。...4种格式化上下文渲染规则，也是体现了CSS中不同的渲染规则。...BFC什么是BFCBlock Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。...（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；BFC的区域不会与float的元素区域重叠；计算BFC的高度时，浮动子元素也参与计算；BFC...GFC什么是GFCGFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域
盒子本身的布局 盒子由内容(content)、内边距(padding)、边框(border)、外边距(margin)构成。 盒模型有两种标准，一个是标准盒模型，一个是 IE 盒模型。...定位布局 什么是定位布局： 标准文档流和浮动布局都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位布局正是为了解决这一问题而设计的。...格式上下文 Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，有一套渲染规则决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...，与包含块的左边相接触（对于从右往左的布局，则相反），即使存在浮动也是如此； BFC 的区域不会与 float 重叠； BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...网格布局格式化上下文 GFC( GridLayout Formatting Contexts )，当一个元素设置为 display:grid 的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列
通过本文和大家一起重新认识 CSS Grid 布局 。 以下内容是2021年，你使用 Grid 布局可以做的所有事情的备忘单！...03 grid-template-areas 该属性用于指定网格单元格应在整个父容器中按列和行进行承载的空间量。这个属性可以让我们直观地看到自己在做什么。 我们称之为布局的蓝图（模板）。...它的4个值表示情况如下： 08 justify-content 此属性用于将我们的网格 [基本上所有内容] 沿X轴 [主轴] 放置在网格容器内。...它的7个值表示情况如下： 09 align-content 这用于沿着Y轴 [Cross Axis] 将我们的网格[基本上所有内容]放置在网格容器内。...03 grid-area 首先，我们需要设置 grid-template-areas☝️完成后，我们必须在子类中指定父类中使用的名称，如下所示： 在父容器内指定网格模板区域 在带有网格区域的子类中指定在父容器中使用的名称
最近在整理前端知识体系，怎么可以少了布局这一环呢？先问大家一个问题，如果让css只保留一种布局，留下来解决前端布局问题？你会选择那个布局呢？...、对齐、模板区域旧浏览器不兼容强大的二维布局能力、精确布局控制学习曲线高、兼容性问题inline-grid内联的复杂布局内联元素的二维布局与grid相同grid的优点，但适用于内联环境与grid相同，不适合大型的二维布局...对齐网格项：.item { justify-self: start;/* 水平对齐到网格区域的起始边缘 */ align-self: end;/* 垂直对齐到网格区域的末端边缘 */}可以控制单个网格项在其网格区域内的对齐方式...创建网格模板区域：.container { display: grid; grid-template-areas: "header header header" "sidebar content...通过grid-template-columns: 1**fr** 3**fr**;，控制了siderbar和 内容区域的比例。
1024程序员节，160就能买到400的书，红宝书 5 折 网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。...接下来，我们为每个html元素分配了一个网格区域名称。在container 类中，我们可以使用grid-template-areas`属性定 义html 模板的外观，注意网格模板区域是如何排列的。...但是，最终按我们网络区域的顺序来展示。 image.png 下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。...image.png 如上所见，我们已经能够使用少量的CSS网格属性来构建非常复杂的布局。...在这个特殊的例子中，我们使用flex属性中心对齐内容。 image.png 对于移动端，我们希望section在header下面，right 在 section 下面，我们可以使用网格区域来完成。
在网页布局中，三栏布局是一种常见的布局方式，尤其在 PC 端。如下图所示。 ? 三栏布局 从上到下由页头、内容和页脚组成，内容由左、中、右三列组成，其中左右两列的宽度固定，中间一列自适应。...如果三个容器的高度不一致，或者容器内的内容溢出，就会影响布局美观性。不推荐使用这种方式实现圣杯布局。 弹性盒子 使用弹性盒子很容易创建出圣杯布局。...网格布局 网格布局是新出的一种布局方式。首先改造一下 HTML 骨架。...解释一下上面的 css 代码。在 grid-template-columns 属性中设置了三列的页面布局。行数是自适应的。...在不改变 HTML 骨架的情况下使用 grid 布局，只需要设置 article 容器为网格布局即可。
网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中，将会介绍所有我们需要了解的 CSS 网格知识 ?。...接下来，我们为每个html元素分配了一个网格区域名称。在container 类中，我们可以使用grid-template-areas`属性定 义html 模板的外观，注意网格模板区域是如何排列的。...但是，最终按我们网络区域的顺序来展示。 下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。...如上所见，我们已经能够使用少量的CSS网格属性来构建非常复杂的布局。...在这个特殊的例子中，我们使用flex属性中心对齐内容。 对于移动端，我们希望section在header下面，right 在 section 下面，我们可以使用网格区域来完成。
一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。...Grid 布局远比 Flex 布局强大。 二、基本概念 学习 Grid 布局之前，需要了解一些基本概念。 2.1 容器和项目 采用网格布局的区域，称为”容器”（container）。...3.4 grid-template-areas 属性 网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。...属性是整个内容区域的垂直位置（上中下）。....item-1 { grid-column-end: span 2; } 使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
BFC(Block Formatting Context，块格式上下文)是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。...《CSS权威指南》中指出，浮动的目的，最初只能用于图像，的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。...BFC的一些应用 实现自适应的两栏布局 应用了第四点BFC的区域不会与float box重叠的特性。一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了文字环绕及类似情形。...解决这种问题我上之前的博文中有总结，地址请戳CSS清除浮动。这里再简单的说下原理： 也就是用到了BFC的特性五：闭合内部浮动。...那么，我们将他们隔离成不同的BFC不久解决问题了嘛。
Padding（内边距）：位于内容区域和边框之间的空白区域，可以用于控制元素内容与元素边框之间的距离。 Border（边框）：位于内边距周围的线条，用于包围元素内容和内边距。...CSS盒子模型计算盒子宽度和高度时，默认情况下是包括了所有这些部分的大小。可以通过box-sizing属性来改变盒子的盒模型，让它只包括内容区域和内边距的大小，或者只包括内容区域的大小。...可以使用CSS的网格布局（grid）和媒体查询来实现一个响应式的网格布局。...属于同一个BFC的两个相邻盒子的上下外边距会发生重叠。 BFC的区域不会与浮动元素重叠。 BFC在页面上是一个独立的容器，容器内部的元素不会影响到外面的元素。...通过创建BFC可以解决一些常见的布局问题，例如清除浮动、防止边距重叠、实现两栏自适应布局等。 仓库地址：https://github.com/webVueBlog/WebGuideInterview
CSS中划分好具体哪个元素所占的区域即可。...其实，网格容器仍然使用流式布局，而流式布局中的块级元素会垂直增长以容纳其内容。「只有子元素使用网格布局进行排列」。...此时我们用gap来设置所有列和行之间添加了固定量的空间 看看在%和fr之间切换时会发生什么： 当使用基于%的列时，内容会溢出到网格父容器之外。这是因为%是使用总网格区域来计算的。...当我们想让特定区域跨越多行或多列时，我们可以在我们的模板中「重复该区域的名称」。在这个例子中，sidebar区域跨越了两行，所以我们在第一列的两个单元格中都写了 sidebar。...键盘用户的注意事项 ❝在处理网格分配时存在一个重要的问题：Tab 键顺序仍然基于 DOM 位置，而不是网格位置。 ❞ 通过一个示例会更容易理解。
盒模型 了解盒子模型对于限制使用布局和定位时的问题是必不可少的。 它是CSS中最基本的概念之一。 盒模型用于计算元素的宽和高。这是一个计算步骤，并不完全被依赖于确定元素的最终布局和定位。...每个盒子都有4个区域，用于定义元素的边距（margin）、边框（border）、填充（padding）和内容区域。 默认情况下，你给一个元素设置的宽度，只是设置了内容区域的宽度。...好吧，你可能遇到过一些情况，事情似乎有些不同的表现… 填充区域 当你给一个元素设置背景的时候，填充的不仅仅是内容区域，而且还包括内部padding区域和边框区域。 ?...很多人喜欢这个属性，如果你正在建立一个网格系统，或任何其他需要水平对齐类型的布局项目，这可以是更直观的工作方式。 边距重叠 当边距意外重叠当时候，真的令人很困惑，因为你不知道发生了什么。...具有重叠偏移的定位元素可以导致元素占用相同空间而发生重叠问题。堆叠上下文可以解决这个问题。 层叠上下文 堆叠上下文决定事物呈现到页面的顺序。 你可以想象一个堆叠上下文，如图层。
，CSS Grid 是创建网格布局最强大和最简单的工具。...使用：任何容器（行内元素可设置为display:inline-block）; 特点：空间分布在行中进行，而非整体 Grid Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统...，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。...grid-template-areas 通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。...row axis) 对齐 网格项(grid items) 内的内容 grid-auto-columns: 隐式网格的宽度 兼容性 作为前端，我们逃不掉的一个问题就是兼容性问题了，看似强大的grid布局为什么在日常中使用的却不多呢
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
