grid网格布局中fr与px混用问题

最新推荐文章于 2022-06-02 17:08:06 发布
最新推荐文章于 2022-06-02 17:08:06 发布
阅读量689 收藏 3
点赞数 3
分类专栏： 笔记 css 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51430625/article/details/120183837
版权
笔记 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

grid网格布局中fr与px混用问题

  1. fr（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

  2. 混用时至少要含有两个fr，若含有一个px加一个fr则会出错，如下是错误的

    grid-template-rows: 120px 1fr;

  3. 我理解的就是fr代表该格子宽度占剩余部分的比例，如总宽度200px；

​ grid-template-columns: 20px 2fr 1fr;第一个格子占20px；剩下180px分为（2+1）共三份，第二个格子占120px；第三个格子占60px。

仅限个人理解，如有错误，欢迎讨论

xxx123112
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css grid 布局 fr 和 % 有区别吗？ （grid-template-column 1fr 1fr 或 50% 50%）
qq_40144303的博客
03-29 1107
答案是有的，但也要看情况 如果你父子级别 宽高 写死 是 肯定没有区别的 <style> .grid-all { width: 600px; height: 150px; } .grid-item { /* width: 100%; */ /* height: 100%; */ width: 150px; height: 150px; } .green { ..
css 网格布局_CSS网格布局：Fr单元
09-15 970
css 网格布局 介绍 (Introduction) With CSS Grid Layout, we get a new flexible unit: the Fr unit. Fr is a fractional unit and 1fr is for 1 part of the available space. The following are a few examples of the ...
css grid布局fr单位理解
JasonHsu Blog_前端开发博客，专注前端开发
11-19 4903
转自 fr 简介及实例 网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。 fr是一个相对尺寸单位，表示剩余空间做等分，此项分配到的百分比(如果只有一个项使用此单位，那就占剩余空间的100%，所以多个项联合使用更有意义) 弹性尺寸使用fr尺寸单位，其来自 “fraction” 或 “fractional unit” 单词的前两个字母，表示整体空间的一部分。 css代码示例 ...
CSS 网格FR 小数单位概述
allway2的博客
06-02 2104
了解 CSS 中的 FR 单元：一个在调整网格内间隙时自动计算布局划分的输入。分数 - 或分数单位 - 正在改变生活。为什么？因为它们是目前最灵活、反应最灵敏的单位！太糟糕了，它们只存在于网格中。分数或 1FR 是整体的一部分。1 分数是可用空间的 100%。2 份各占 50%。因此，1FR 是可用空间的 1/2。如果有250个分数？那么每个分数（1FR）是 1/250 或 0.4%。因此，1 个分数是 1（或 100）除以分数的总数。我们将在下面对此进行更多探讨。是2分！无论您要使用分数还是百分比，您需要
阮一峰老师 CSS Grid 网格布局教程(转载)
鸭绒的博客
09-30 2万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
CSS Grid 网格布局全解析
09-24
主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解jQuery移动页面开发中的ui-grid网格布局使用
11-23
Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局，叫做ui-grid Jquery Mobile 提供有四个预设的布局，可以在任何情况下都需要列 两列（使用ui-grid-a类） 三列（使用ui-grid-b类） 四列（使用ui-...
CSS Grid布局教程之什么是网格布局
09-25
在这篇文章中简单的介绍了CSS Grid Layout，以及为什么要使用他，并且介绍了其一些术语：网格线、网格轨道、网格单元格、网格区域和网格容器等，为后面如何学习和使用CSS Grid Layout做了一个铺垫。
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
grid布局兼容IE浏览器踩坑
yang_da_da的博客
02-22 1836
grid布局其实对于浏览器的兼容性支持不是很好，支持IE时需要加前缀-ms- 普通写法 display: grid; grid-template-rows: 50% 50%; grid-template-columns: 50% 50%; IE兼容写法 display: -ms-grid; -ms-grid-rows: 50% 50%; -ms-grid-columns: 50% 50%; 用css写是没有问题的，但在vue中用v-bind:style绑定样式不生效了，后来发现vue会自动添加前缀，标准
记录一下我使用display和grid时犯下的错误【2021.12.4】
masierty的博客
12-05 706
我想要用grid-row:2/3;来固定住第二排的内容，让第一排的网格区域得到保留，点击第二排区域里面的按钮控制第一排区域的内容的出现和消失（display）。 我这个逻辑是没问题的，但是如果第一排内容全都被display：none，rid-row:2/3是不起作用的。 第一排只要有一个网格还有内容，都是可以用这个方法来操作的。 我简易还原了一下： <!DOCTYPE html> <html lang="en"> <head> <meta ...
css中单位px和em,rem的区别
青天诀的专栏
05-26 1177
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点 1. IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 **px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分
CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位：fr 简介及实例
陈小峰（iefreer）的专栏
01-19 7917
网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。 弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。
CSS3过渡属性 + CSS3动画属性 + 转换 +grid布局
YANG_helloworld的博客
12-24 1245
CSS3新属性 （扩展）
HTML-CSS(五十六)grid布局
weixin_44730244的博客
05-08 884
grid布局是一个二维布局方法，纵横两个方向总是同时出 grid-template-columns和grid-template-rows 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应(auto)以及fr单位（网格剩余空间比例单位）。 auto与1fr区别在于，auto时根据内容撑起的变宽，fr是对剩余空间的划分 有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作 如果列布局（行布局的分布）选用fr作为单位，并且总fr的值<1
grid布局
weixin_50959040的博客
03-21 2万+
grid布局
px fr em rem
weixin_30348519的博客
11-30 91
一、px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 特点： 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 二、fr是一个自适应单位，fr单位被用于在一系列长度值中分配剩余...
网格布局中 grid-template-columns / grid-template-rows 和 grid-template-areas 属性
陈开心的博客
11-05 1万+
grid-template-columns / grid-template-rows 使用空格分隔的值列表，用来定义网格的 列 和 行。 值表示 网格轨道(Grid Track) 大小，值之间的空格 表示网格线。 .container { grid-template-columns: <track-size> ... | <line-name> <track-si...
一文搞懂Grid 布局
热门推荐
pz1021的博客
09-29 4万+
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布
tkinter grid网格布局
最新发布
08-12
Tkinter提供了一个名为`grid`的布局管理器，用于在GUI应用程序中创建网格布局。网格布局将窗口划分为行和列，并允许将小部件放置在指定的行和列中。 以下是一个基本的使用`grid`布局的示例代码： ```python import tkinter as tk # 创建主窗口 root = tk.Tk() # 创建小部件 label1 = tk.Label(root, text="Label 1") label2 = tk.Label(root, text="Label 2") button1 = tk.Button(root, text="Button 1") button2 = tk.Button(root, text="Button 2") # 使用grid布局管理器放置小部件 label1.grid(row=0, column=0) label2.grid(row=0, column=1) button1.grid(row=1, column=0) button2.grid(row=1, column=1) # 运行主循环 root.mainloop() ``` 在这个例子中，我们创建了一个包含两个标签和两个按钮的窗口。我们使用`grid`布局管理器将它们放置在网格中的指定位置。 通过指定`row`和`column`参数，可以控制小部件在网格布局中的位置。默认情况下，网格布局会根据小部件的大小自动调整行和列的大小。你也可以使用`sticky`参数来指定小部件在单元格中的对齐方式。 除了基本的行和列设置，你还可以使用`grid_rowconfigure`和`grid_columnconfigure`方法来配置行和列的属性，例如设置行和列的宽度、最小高度等。 希望这个示例能帮助你理解Tkinter中的网格布局管理器。如果你有任何进一步的问题，请随时提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值