伸缩布局决定的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间，这可以用flex属性来完成。...响应式网格视图通常有12列，总宽度为100％，并在调整浏览器窗口大小时缩小和展开。 让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。...这可确保填充和边框包含在元素的总宽度和高度中。...使用行样式row来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。...列组合 row/col-md-4 col-md-8等测试 列偏移 col-md-offset-4,原理 margin-left 列嵌套 div class='row'>div代码嵌套代码div
display: inline-flex; 元素的子元素作为 flex 项但是该元素的行为类似于行内元素。...我的相邻块级元素在我的下方另起一行。 默认情况下，我们会占据父元素 100% 的宽度，并且我们的高度与我们的子元素内容一样高。...在所有子元素上添加 flex 属性，并赋值为1，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄,。...min-content : 是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。...div>Sevendiv> div> 效果结果: 其网格布局的子元素中div边框随着窗口变化而变化。
阻止外边距 margin 折叠塌陷 1、阻止外边距折叠 margin 塌陷问题：在标准文档流中，块级标签之间竖直方向的 margin 会以大的为准，这就是 margin 的塌陷现象。...阻止元素被浮动元素覆盖和高度坍塌 阻止浮动元素造成的父级元素高度坍塌问题和遮挡其他元素问题 高度塌陷问题，这时就可以用 BFC 来清除浮动了。...，且右边网格的大小自适应。...不同点： 双飞翼布局给主面板添加了一个父标签用来通过 margin 给子面板腾出空间。 圣杯采用的是 padding，而双飞翼采用的 margin，解决了圣杯布局的问题。...结构伪类选择器： 选择符号 含义 相同点 E:first-child 匹配父元素的第一个子元素 E 带有 child，以 E 元素的父元素为参考 E:last-child 匹配父元素的最后一个子元素
三、创建简单的传统网格框架 3.1 固定宽度网格 固定宽度网格 是最简单的网格布局之一，它通常用于较小的网页或定宽设计中。...因为浮动的元素会脱离文档流，父容器往往不会自动扩展以包围浮动的子元素。这会导致父容器的高度坍塌，需要开发者手动清除浮动来解决这个问题。...例如，如果没有清除浮动的情况下，父元素的背景颜色不会扩展以包含所有子元素： div class="container"> div class="float-box">浮动框 1div>...边距重叠（Margin Collapse） 浮动元素在处理相邻元素的边距（margin）时可能会出现边距重叠问题，这意味着两个相邻的浮动元素的边距可能会意外地合并，导致布局出现问题。解决这 6....响应式断点：提供5种预定义的响应式断点（extra small, small, medium, large, extra large）。 可嵌套的网格：列内可以再包含一套网格系统，形成嵌套布局。
3、什么是margin-top的传递现象？当父元素嵌套 子元素，给子元素添加margin-top属性的时候，会出现子元素没有效果，但是父元素却出现了margin-top。...当父元素嵌套子元素，子元素设置了固定宽度（具体的px值或者%），子元素的margin、padding、border都会将元素“向外扩张”；但是如果子元素不设置width，或者width: initial...float属性 清除浮动的方案 clear属性：left、right、both三个属性值，用于清除兄弟节点的浮动，如果是父元素嵌套了子元素，子元素有浮动，那么可以通过给子元素添加一个空的同级兄弟空元素，...弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。 Tips / 提示 通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。...1 默认值，表示当子元素宽度超出flex容器时，将其宽度收缩至父元素的100% 0.5 宽度减少父元素的50% 0 不对flex容器中的子元素宽度进行收缩 大于1 还是宽度收缩至父元素，与1效果相同
all 给浮动元素的父元素新增一个 after 伪类，设置该伪类和父元素： div{ zoom:1; } div:after{ content:""; display:block...塌陷 前面我们说过 BFC 可以用于解决 margin 塌陷问题。...同样地，如果是父子嵌套的 margin 塌陷问题，只需要触发父元素的 BFC 即可。...如果父元素的宽度足以包含这两个子元素的宽度之和，则子兄弟元素和子浮动元素并排。如图： image.png 如果父元素的宽度不足以包含这两个子元素的宽度之和，则子兄弟元素会出现在子浮动元素的下面。...IFC 中是不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。
在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。...用法示例： 在第一个网格中，用auto-fill和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。...使用示例： 在类为container2的网格中，用auto-fit和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。...，用```auto-fit```和```repeat```来填充网格，其中列宽的最小值为60px，最大值为1fr。...二十二、在网格中创建网格 将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。
基本概念 容器和项目 采用网格布局的区域，称为 “容器”（container）。容器内部采用网格定位的子元素，称为 “项目”（item）。...> 元素就是容器，内层的三个 div> 元素就是项目。...注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的 元素就不是项目。Grid 布局只对项目生效。 ...可以最大限度的填满 父级容器 用多个100px的大小填满宽度*/ grid-template-columns: repeat(auto-fill, 100px); /* fr...注：如果移动到了，使用了area属性，分了区域的子元素的话，子元素不会移动位置， 而是产生层叠的浮动效果，可以使用z-index属性来改变层级。
从图中可以看出浏览器的兼容率整体达到84.16%，并且都是无需带前缀的。 基本概念 网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。...Grid Container (网格容器) 在一个元素上应用了display: grid;或者display: inline-grid;那么就创建了一个网格容器，它下面的直接子元素都会成为网格元素，例如...在图中可以看出网格的数量，其中的子元素会根据这些网格的数量自动填充。...5个元素如果是划分3列，那么就应该会有两行。 fr 如果想要均分容器的宽度，那么可以使用新引入的单位fr，新的fr单位代表网格容器中可用空间的一等份。...使用auto-fill来根据容器宽度决定会有多少列，并且使用minmax()函数来确定最小为200px，最大为容器宽度来自适应。
，可以根据父类的宽度以及子类的宽度自动排列更多的子元素*/ /* grid-template-columns:40px 40px minmax(40px,1fr);minmax...2.1 容器和项目 采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。...注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的元素就不是项目。Grid 布局只对项目生效。...默认情况下，容器元素都是块级元素，但也可以设成行内元素。 div { display: inline-grid; } 上面代码指定div是一个行内元素，该元素内部采用网格布局。...grid-template-columns: 100px auto 100px; 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度
一样的，将容器内的所有div元素浮动，横向排列 通过负边距，将两边的广告位移到相对的位置 弹性布局 弹性布局的核心思想是通过设置容器为弹性容器，并为其子元素指定弹性属性，轻松实现复杂的布局。...弹性子元素：使用flex属性使子元素在弹性容器中调整其占用空间。 顺序控制： 使用order属性让子元素在弹性容器中调整其位置。...表格单元格：使用display: table-cell将子元素设为表格单元格，使其按表格的方式排列。 固定宽度：为左右侧边栏设置固定宽度，为中间内容区域设置自适应宽度。...将容器内的所有div元素设为表格单元格 将中间内容区域.content的宽度设置为100%，使其占满容器的剩余空间 网格布局 网格布局的核心思想是通过将容器设为网格容器，并为其定义网格列和行，使子元素按网格方式排列...网格模板：使用grid-template-columns定义网格列的大小和数量。 自动布局：自动将子元素按网格排列。
根据 W3C，以下是针对该问题的一些解决方案： 给父元素添加边框 将子元素显示更改为 inline-block 更直接的解决方案是将 padding-top 添加到父元素。...因此，导航项的宽度取决于它们的内容。 以下是解决方案： 设置导航项的最小宽度 增加水平填充 在分隔符的左侧添加额外的边距 最简单更好的解决方案是第三种，即添加一个margin-left。...-- -->div> div> CSS: .card__content { padding: 10px; } 上面的填充将为其中的所有子元素添加偏移量...出了点问题。 内容卡在边缘！ 为了解决这个问题，应该从左右边缘对内容进行填充（哦，看起来填充是一个新词）。...例如，根据视口宽度设置具有最小值和最大值的边距。 答案是肯定的！ 我们可以。 最近，CSS 数学函数在 Firefox 75 中得到支持，这意味着它们在所有主流浏览器中都受 CanIUse 支持。
网格布局的基本概念 网格容器（Grid Container）： 网格布局的容器，它将子元素定义为网格项目，并控制它们的排列方式。...网格项（Grid Item）： 网格容器内的子元素，这些元素会按照网格规则进行排列。 网格线（Grid Line）： 网格容器中的虚拟线，用于定义行和列的位置。...div> 在这个示例中，我们定义了 2 列网格，其中第一列的宽度是第二列的 2 倍。...每列的宽度最小为 100px，最大为 1fr。每行的高度最小为 50px，最大为 auto（即自动调整）。...3、自动使用多列填充 CSS Grid 允许使用 grid-auto-flow 属性来自动填充网格项。这可以用来控制项的排列方式，例如从左到右填充或从上到下填充。 示例代码： <!
项目 项目是网格容器的子元素（即「直接后代」）。...– 生成内联级网格 ❝默认情况下，Grid 使用「单列」，并根据子元素的数量动态创建行。...这被称为「隐式网格」，因为我们没有明确定义任何结构。 ❞ 隐式网格是动态的；根据子元素的数量将添加和删除行。每个子元素都有自己的行。 ❝默认情况下，网格容器的高度由其子元素确定。...其实，网格容器仍然使用流式布局，而流式布局中的块级元素会垂直增长以容纳其内容。「只有子元素使用网格布局进行排列」。...start：将网格与容器的开始边缘对齐 end：将网格与容器的结束边缘对齐 center：将网格置于容器的中心 stretch：重新调整网格项的大小，以使网格填充容器的整个宽度 space-around
网格项目（Grid Item） 网格容器中的子元素就叫网格项目 div class="grid-container"> div class="grid-item">div> div...的值) ：你选择的任意名称 subgrid：如果你的网格容器本身就是一个网格项(即嵌套网格)，你可以使用此属性指定行和列的大小继承于父元素而不是自身指定（一般很少会用） .container...： start：网格在网格容器中左对齐 end：网格在网格容器中右对齐 center：网格在网格容器中居中对齐 stretch：调整网格的大小，使其宽度填充整个网格容器 space-around：和Flexbox...-row：自动布局会将没有定义位置的网格项填充每一行，必要时添加新行（默认） column：自动布局会将没有定义位置的网格项填充每一列，必要时添加新列 row dense/column dense：如果按照...subgrid：将 grid-template-rows 和 grid-template-columns 的值设置为 subgrid（继承来自父元素的设置），其余子属性值为初始值 <grid-template-rows
下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）。...，.item元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以p元素并不是网格元素。...第一个参数就是最小值，第二个参数就是最大值。...c'; 复制代码 上面代码将9个单元格分成a、b、c三个区域 如果某些区域不需要利用，则使用"点"（.）表示 grid-auto-flow 属性 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格...的元素 如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高。
学习慕课网笔记，课程：http://www.imooc.com/code/2024 1.css选择器 子选择器：parent>child 子选择器是指选择parent的范围内的第一个子元素。...与子选择器不同的是，这里包含嵌套内的child元素，而子选择器仅仅选中parent下的直接的第一个子元素。 全局选择：*{} 这里可以配置全局的默认配置，如去掉默认间距等。...div{ display:inline; } 内联元素特点： 和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变 解决行内元素间隙bug...问题 行内元素之间会产生间隙bug问题的场景： 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。...因此一个元素实际宽度为： 盒子的宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 ?
不填写自动分配 做些准备 我们先画好div，main中包着十个子元素。main此时就是容器(container)，十个子元素就是项目(item)。...如下最小值为150px 最大值为1fr，当我们缩小浏览器窗口，可以看到第一列的元素还在变小，而第二列的元素固定在了150px。...grid-auto-flow 划分网格后，容器的子元素会按照顺序，自动的放置在每一个网格，默认的是 先填满第一行，然后再开始第二行。也就是说我们 grid-auto-flow属性，默认是row。...然后就按照内容的(字)的宽度进行填充了，只是项目的对齐。 如下图，网格的宽度还是我们给定的100px，只是其内部的内容变小了。...justify-content:space-around 两端保留子元素与子元素间距的一半。还有留白，列之间等分。
子元素的margin是百分比，随父元素的宽度改变而改变。 子元素没有文案,加了一个边框示意他的位置和处境。...就好像内联元素没有填充水平宽度就没有水平方向的剩余空间是一样的。...不起作用 div class="box"> div class="test"> 原因：如果我不设置高度，我的高度也不会自动填充整个父元素的高度，就像内联元素不会自动填充父元素的宽度一样...,我没有block化之前设置margin：0 auto；不起作用，原因是因为我内联元素的宽度不会自动填充父元素的水平区域，所以我没有剩余的水平空间可供margin分割的。...两端对齐（两端网格对齐） 利用margin可以改变元素尺寸的特性 使用margin负值让列表的宽度变宽即可。 ? <!
图中展示了深度是如何根据每个评论的嵌套级别而变化的。 思考布局 在深入细节之前，我更愿意先着手处理布局，并确保它能很好地运作。这样的做法旨在探索现代CSS解决该问题的潜力。...评论包装器布局 - 使用CSS Subgrid 另一个解决方案是使用CSS子网格（subgrid）来构建嵌套评论布局。坦率地说，这将需要更多的CSS代码，但是探索新的CSS特性的潜力是非常有趣的。...接下来的步骤是将深度为1的评论放置在主网格内，然后添加子网格并定位内部的 元素。...一个简单的内边距就可以解决问题。 思考连接线的问题 为了更清楚地显示评论和回复之间的关联，我们可以在主评论和回复之间添加连接线。Facebook团队使用了一个 div> 元素来处理这些连接线。...： 它是 元素的直接子元素 元素有一个 作为子元素 父元素的 depth 属性为 0 或 1 下面是如何将上述条件翻译为CSS代码。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
