首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么css网格中的子容器在水平方向上占100%,而在垂直方向上只占90%?

CSS网格中的子容器在水平方向上占100%,而在垂直方向上只占90%的原因是因为网格容器的默认行为是将剩余的空间分配给子容器,但是在垂直方向上存在一些特殊情况。

在CSS网格布局中,网格容器可以被分为行和列,每个单元格可以包含一个或多个子容器。当子容器没有指定具体的高度时,网格容器会根据子容器的内容自动调整高度。

在水平方向上,子容器默认会占满整个网格单元格的宽度,因为网格容器会自动将剩余的空间平均分配给子容器。这意味着子容器的宽度会自动扩展以填充整个单元格。

然而,在垂直方向上,子容器默认不会占满整个网格单元格的高度。这是因为在垂直方向上,网格容器会根据子容器的内容自动调整高度,但是会保留一部分空间作为网格行的间距。这个间距的大小通常由网格容器的属性和样式决定。

如果希望子容器在垂直方向上也占满整个网格单元格的高度,可以通过设置子容器的样式属性来实现。例如,可以使用height: 100%来指定子容器的高度为100%,这样子容器就会占满整个网格单元格的高度。

总结起来,CSS网格中的子容器在水平方向上占100%,而在垂直方向上只占90%是因为网格容器的默认行为是将剩余的空间分配给子容器,并且在垂直方向上会保留一部分空间作为网格行的间距。如果需要子容器在垂直方向上也占满整个网格单元格的高度,可以通过设置子容器的样式属性来实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HarmonyOS4.0 Grid_GridItem容器组件详解

本章内容概要 Grid组件说明 网格容器,由“行”和“列”分割单元格所组成,通过指定“项目”所在单元格做出各种各样布局。包含GridItem组件。...GridItem 组件说明 网格容器单项内容容器。 Grid属性讲解 columnsTemplate 设置当前网格布局列数量,不设置时默认1列。...如果设置了columnsTemplate,Gird滚动方向为垂直方向,主轴方向为垂直方向,交叉轴方向为水平方向。...如果设置了rowsTemplate,Gird滚动方向为水平方向,主轴方向为水平方向,交叉轴方向为垂直方向。...rowsTemplate、columnsTemplate都不设置: 元素layoutDirection方向上排布,列数由Grid宽度、首个元素宽度、minCount、maxCount、columnsGap

4900

低代码如何构建响应式布局前端页面

而在后续迭代,活字格加入了粒度精确到行列模式设置,通过对行列性质修改,保证页面可以动态且精确填充至整个展示屏幕。 页面拉伸模式 活字格,可对全局或单个页面设置页面拉伸模式。...单个页面设置本页面生效,而全局生效范围扩展到了整个应用。活字格为用户提供了五种拉伸模式,方便用户不同场景下进行选择: 无拉伸:页面浏览器不会进行拉伸,与设计原型保持一致。...水平拉伸:页面不同浏览器随着浏览器尺寸进行水平向上拉伸。 垂直拉伸:页面不同浏览器随着浏览器尺寸进行垂直向上拉伸。...双向拉伸:页面不同浏览器随着浏览器尺寸进行水平垂直向上拉伸,使得充满不同分辨率浏览器时都具有较好视觉效果。...网格(Grid)布局 网格布局(Grid)是CSS(层叠样式表,为网页添加页面样式一种计算机语言)布局方案一种,也是泛用性最广泛一种。

4K40

IT课程 CSS基础 031_网格布局 Grid

**网格线 (grid line)**:网格线是将网格容器划分为行和列线。网格线可以是水平线或垂直线。 **网格列 (grid column)**:网格列是网格容器垂直方向线。...**网格行 (grid row)**:网格行是网格容器水平方向线。 常用属性 网格容器属性 网格容器具有以下属性用于控制网格布局: display: 设置网格容器显示模式。...grid-column-start: 设置网格起始位置。 grid-column-end: 设置网格结束位置。 grid-row-start: 设置网格项在行起始位置。...它是 grid-column-start 和 grid-column-end 简写。通过 grid-column,你可以更方便地定义网格水平向上位置和跨足列数。...通过 grid-row,你可以更方便地定义网格垂直向上位置和跨足行数。

5610

【移动端网页布局】流式布局案例 ⑦ ( 水平排列图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

*/ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 绝父相 该容器容器需要绝对定位 因此父容器设置为相对定位...*/ width: 100%; } /* 设置水平向上 连续排列图片链接 */ .brand { /* 设置圆角后 超过圆角图片不再显示 */ overflow:...div 盒子左浮动 这样这些盒子可以水平向上紧密排列 */ float: left; /* 要在水平向上放置 3 个 为其设置 1/3 宽度即可 */...width: 33.33%; } .brand div img { /* 设置图片链接图片 水平向上充满父容器即可 */ width: 100%; } /* 多排按钮导航栏...设置为 块级元素 */ display: block; } /* 设置水平向上 连续排列图片链接 */ .news { /* 设置父容器顶部外边距 20 像素 */

2.3K40

鸿蒙应用开发-初见:ArkUI

视图上报给父视图自身大小值是指 组件内容区大小ArkUI中常用布局容器如何选择使用哪种布局线性布局(Row/Column)线性布局元素在线性方向上水平方向和垂直方向)依次排列线性布局容器包括...Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列主轴线性布局容器布局方向上轴线,元素默认沿主轴排列。Row容器主轴为横向,Column容器主轴为纵向。...通过justifyContent属性设置元素容器主轴上排列方式默认相邻元素是紧贴着,也可以通过space设置元素间间距Column容器内子元素主轴上排列主轴方向:垂直向下Column(...Row容器内子元素垂直向上排列Row() {...}.alignItems(VerticalAlign.Top)VerticalAlign.Top:元素垂直方向顶部对齐VerticalAlign.Center...:元素垂直方向居中对齐VerticalAlign.Bottom:元素垂直方向底部对齐层叠布局(Stack)层叠布局主要用于实现基于Z轴布局,容器元素(组件)依次入栈,后一个元素覆盖前一个元素

3710

【移动端网页布局】流式布局案例 ⑤ ( 连续排列链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

一、连续排列链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局 , 水平放置 3 个图片链接 ; 每个图片链接 宽度 1/3 ; 2、标签结构设置 将布局 三个 链接图片..., 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置 , 为父容器三个元素都设置 左浮动 , 就可以实现上述效果 ; 设置浮动后 , 还需要设置元素宽度 ,...{ /* 设置 .brand 父容器 div 盒子左浮动 这样这些盒子可以水平向上紧密排列 */ float: left; /* 要在水平向上放置 3..., 会按照宽高比等比例缩放 ; 设置样式为 : .brand div img { /* 设置图片链接图片 水平向上充满父容器即可 */ width: 100%; } 二、完整代码实例...width: 33.33%; } .brand div img { /* 设置图片链接图片 水平向上充满父容器即可 */ width: 100%; } 3、展示效果

3.5K20

HarmonyOS开发学习(3)–页面开发

alignItems Column容器主轴是垂直方向,交叉轴是水平方向,其参数类型为HorizontalAlign(水平对齐),HorizontalAlign定义了以下几种类型: Start:设置组件水平向上按照起始端对齐...Center(默认值):设置组件水平向上居中对齐。 End:设置组件水平向上按照末端对齐。...Row容器主轴是水平方向,交叉轴是垂直方向,其参数类型为VerticalAlign(垂直对齐),VerticalAlign定义了以下几种类型: Top:设置组件垂直向上居顶部对齐。...: string | number}) Column和Row容器接口都有一个可选参数space,表示组件主轴方向上间距。...Horizontal:组件ListItemList容器组件呈横向排列。

17010

vh 存在问题?试试动态视口单位之 dvh、svh、lvh

根因在于: 很多浏览器,计算 100vh 高度时候,会把地址栏等相关控件高度计算在内2 同时,很多时候,由于会弹出软键盘等操作,弹出过程100vh 计算值并不会实时发生变化!...其实,之前也有 vi 和 vb 两个单位: vi:vi 代表 Viewport Inline,代表文档内联方向。水平书写方向上,这对应于视口宽度,而在垂直书写方向上,这表示视口高度。...这与 vi 水平书写方向相反,这将对应于视口高度,而在垂直文档,这将表示视口宽度。 因此,vi 和 vb 属于两个逻辑单位。...CSS 更新迭代一直快速持续,很多内容还是有必要不断了解学习,不久将来就能很快应用在业务。...此外,除了动态视口外,其实 CSS 还更新了与容器大小相关相对单位 -- 譬如 cqw 和 cqh。 cqw:表示容器查询宽度(Container Query Width)比。

1.7K20

CSS Grid 那些鲜为人知内幕

网格线 ❝网格线是构成网格结构分割线。它们可以是垂直(列网格线)或水平(行网格线),并位于行或列两侧。 ❞ 在这里,黄色线是列网格线一个例子。...(这里我们就不贴代码了) 而在其他任何布局模式,创建这样区块唯一法就是「添加更多 DOM 节点」。...其实,网格容器仍然使用流式布局,而流式布局块级元素会垂直增长以容纳其内容。「只有元素使用网格布局进行排列」。...到目前为止,我们一直讨论如何在水平向上对齐内容。...使用两个 CSS 属性,我们就可以将元素水平垂直居中于容器: 正如我们所学到,justify-content 控制列位置。align-content 控制行位置。

10910

CSS Flexbox 布局完全指南 (一):4000字,多示例讲解

再进一步,我们可以让图片完美居中对齐(无论是水平还是垂直) 如上所示,这可以让图片在 .gallery 内水平垂直都居中。 你可以通过 Flexbox 布局方式随意选择你想要对齐选项。...示例三:如何使用 Flexbox 创建网格布局 在这个例子,我们要探讨整体 CSS 框架概念,这是很重要一点。 什么是网格布局? 网格是用来构建内容一系列水平垂直相交引导线。 ?...一系列水平垂直相交引导线 如果你对 Bootstrap 这样 CSS 框架比较熟悉,那你之前一定使用过网格布局。 你所掌握内容可能不一样,但这个例子会涵盖不同网格布局类型。...水平网格布局元素是其他两倍或三倍 实现方式很简单。...一行三个元素居中嵌套排列较大元素里 你可以在这里查看最终布局效果。 更多网格布局 当你可以用 Flexbox 垂直网格甚至更复杂参数实现好看网格构造时,就可以把这个很好工具用于工作。

4.3K20

CSS3】CSS3 3D 转换示例 - 3D 导航栏示例 ( 列表设置 | 透视视图 | 过渡动画 | 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型效果 )

transition: all 0.5s; 上述代码 告诉浏览器 该 盒子模型 及 盒子模型 所有 可过渡 属性值 0.5 秒内平滑地改变 ; 设置 3D 呈现样式 盒子模型 容器容器...box:hover 样式 ; 设置两个子盒子模型效果 父容器设置 相对定位 , 根据 绝父相 原则 , 盒子使用了绝对定位 , 父盒子就要使用相对定位 ; 第一个容器 显示正面 , 为了保证...position: relative; /* 宽度 和 高度 容器 100% */ width: 100%; height:...*/ color: #fff; /* 设置文字盒子水平对齐 */ text-align: center;.../* 设置文字盒子垂直对齐 */ line-height: 100px; } .box div:first-child {

11810

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

100% , 高度也不需要设置 , 设置自适应即可 ; 具体控制每行显示多少个元素 , 需要进行精确计算 , 每行有 5 个元素 , 每个元素宽度 20% , 这个计算必须精准到 1 像素 , 如果不精确...*/ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 绝父相 该容器容器需要绝对定位 因此父容器设置为相对定位...*/ width: 100%; } /* 设置水平向上 连续排列图片链接 */ .brand { /* 设置圆角后 超过圆角图片不再显示 */ overflow:...div 盒子左浮动 这样这些盒子可以水平向上紧密排列 */ float: left; /* 要在水平向上放置 3 个 为其设置 1/3 宽度即可 */...width: 33.33%; } .brand div img { /* 设置图片链接图片 水平向上充满父容器即可 */ width: 100%; } /* 多排按钮导航栏

3.2K40

CSS实现垂直居中布局

height: 100%; } 垂直居中大致分为两类,父元素定宽高与父元素不定宽高,将两类样式以及容器设定好 .set-parent,.dy-parent{ width...父元素定宽高 position+margin 使用margin: auto使水平居中,将容器设定为relative以不脱离文档流情况下偏移50%,由于本身子容器占用一定宽高,会将其撑下,使用margin...若是容器使用absolute定位,则父容器应设置为relative,否则会其相对于static定位以外第一个父元素进行定位,本Demo中会以浏览器为基准定位;此外absolute无法使用margin...父元素定宽高 position+transform 原理与position+margin相同,CSS3transform使得div向上平移自身高度50%。 <!...父元素不定宽高 grid Grid布局将网页划分成一个个网格,可以任意组合不同网格,做出各种各样布局 Grid布局与Flex布局有一定相似性,都可以指定容器内部多个项目的位置。

1.8K30

setLayout()和GridData设置

下面的HORIZONTAL_ALIGN_FILL代表水平向上 * * 按单元格拉伸对其,而FILL_BOTH代表双向拉伸充满。当然还有水/*平方向上FILL_HORIZONTAL等。...HorizontalSpacing:表示组件水平间距。 VerticalSpacing:表示组件垂直间距。...通过GridData可以设置组件在网格填充方式、大小边距等信息,用户可以通过组件setLayoutData方法设置网格布局数据。...GridData可以控制组件在网格位置大小等相关显示信息。GridData可以设置如下一些属性。 属性: HorizontalAlignment:表示水平对齐方式。...VerticalAlignment:表示组件垂直对齐方式,值和水平方式一样。 HorizontalIndent:表示组件水平偏移多少像素。

1.4K40

CSS实现 | 食物系虚拟流光键盘

创建栅格容器 栅格布局第一步就是创建一个栅格容器,这点跟弹性盒布局定义弹性容器很像,它们都会将一个父元素定义为栅格或者弹性容器容器生成网格布局后,其所有元素为「网格元素」,而弹性容器元素是「弹性元素...单元格内部对齐方式 单元格默认情况下,水平垂直方向是拉伸,以便撑满整个单元格,看个动图更形象 我们可以通过justify-items:center来设置水平方向排列方式,用align-item...:center来设置垂直方向排列方式,可取值都是一样:start 左 | end 右 | center | stretch 拉伸(默认) 对了,它依然是个复合属性,我们可以通过place-items...:center center属性分别设置垂直水平方向排列方式 5....单元格定位 默认情况下,每个单元格都是独占一格,但是我们可以通过设置grid-area来改变这一式,让一个数字四个格子 使用方式:grid-area: 起始行线编号/起始列线编号/结束行线编号/结束列线编号

81240

解析 CSS 格式化上下文

容器里面子元素不会影响到外部,外部元素也不会影响到容器里面的元素。 ? 规范 BFC 内部盒子会从上至下一个接着一个顺序排列。...IFC line-box (也称行盒)高度是根据包含行内元素中最高实际高度计算而来。(不受垂直方向 padding/margin 影响) ?...行内元素垂直向上可按照顶部、底部或基线对其。...这些行盒不会在垂直向上被分离(除非在其他地方有特殊规定),并且他们也不重叠。 垂直向上,当行内元素高度比行盒要低,那么 vertical-align 属性决定垂直向上对齐方式。...水平向上,当行内元素总宽度比行盒要小,那么行内元素水平向上分部由 text-align 决定。

1.1K20

grid布局—让css变得更简单

CSS 网格,父元素称为容器(container),它元素称为项(items)。...四、CSS 网格单位 CSS 网格,可以使用绝对定位和相对定位单位如px和em来确定行或列大小。...八、线(lines) 网格假想水平线和垂直线被称为线(lines)。这些线在网格左上角从 1 开始编号,垂直线向右、水平线向下累加计数。 这是一个 3x3 网格线条: ?...十一、 justify-self 水平对齐 CSS 网格,每个网格内容分别位于被称为单元格(cell)框内。...: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线 ; item1 { grid-area: 1/1/2/4; }:网格项将占用第 1 条和第 2 条水平线之间行及第 1 条和第 4 条垂直线之间

5.3K20

CSS各种布局背后(*FC)

CSS各种布局背后,实质上是各种*FC组合。CSS2.1 只有 BFC 和 IFC, CSS3 还增加了 FFC 和 GFC。...BFC就是页面上一个隔离独立容器容器里面的元素不会影响到外面的元素。反之也如此。 计算BFC高度时,浮动元素也参与计算。...这些盒子垂直方向起点从包含块盒子顶部开始。 摆放这些盒子时候,它们水平向上 padding、border、margin 所占用空间都会被考虑在内。...垂直向上,这些框可能会以不同形式来对齐(vertical-align):它们可能会使用底部或顶部对齐,也可能通过其内部文本基线(baseline)对齐。...布局规则 设置为 flex 容器被渲染为一个块级元素 设置为 inline-flex 容器则渲染为一个行内元素 弹性容器每一个元素都是一个弹性项目。弹性项目可以是任意数量

2.1K50

建议收藏!总结了 42 种前端常用布局方案

CSS 布局掌握程度决定你Web开发开发页面速度。随着Web技术不断革新,实现各种布局方式已经多得数不胜数了。...定位实现水平垂直居中方案(一) 步骤如下: 使元素相对于容器元素定位 元素开启绝对定位 设置该元素偏移量,值为50% 减去宽度/高度一半 实现CSS代码如下: .parent { /* 1....定位实现水平垂直居中方案(二) 步骤如下: 使元素相对于容器元素定位 元素开启绝对定位 设置该元素偏移量,值为50% 通过外边距-值方式将元素移动回去 实现CSS代码如下: .parent {...定位实现水平垂直居中方案(三) 步骤如下: 使元素相对于容器元素定位 元素开启绝对定位 将元素拉满整个容器 通过margin:auto实现水平垂直居中 实现CSS代码如下: .parent {...绝对定位方式 通过绝对定位方式实现Sticky Footer布局步骤如下: 设置最外层容器高度为100%; 让元素元素相对于容器元素进行定位,并设置容器元素最小高度为100%; 中间区域设置padding-bottom

4K30
领券