margin属性、margin属性可以设置元素内边距 收藏 0

Flet 布局控件：ft.Card（卡片）

一种材料设计卡片：一个带有略微圆角的面板和一个提升阴影。

一、基本用法

Card 组件是一个非常常见的UI元素，用于创建视觉上吸引人的内容区域。

二、特别用法

卡片通常用于封装相关的信息或功能。你可以在卡片中嵌套其他组件，如按钮、文本框或图像，以创建复杂且易于管理和样式的UI元素。

这个示例展示了如何创建一个包含标题、描述文本框和按钮的卡片，所有这些都整齐地封装在一个卡片组件中。

三、属性

内容将根据此选项进行裁剪。请参阅 ClipBehavior 了解可能的值。

默认值为 ClipBehavior.NONE。

卡片的背景颜色。

要在卡片中显示的控件。

此控件只能有一个子控件。要布局多个子控件，请让此控件的子控件为具有子属性的控件，例如Row、Column或Stack，然后将子控件提供给该控件。

控制卡片下方阴影的大小。默认值为 1.0。

如果此卡片表示单个语义容器，则设置为 True（默认值），如果表示一组单独的语义节点（不同类型的内容），则设置为 False。

卡片周围的空白区域。

margin 属性的值可以是以下类型之一：

• int
• float
• margin.Margin

用于绘制卡片下方阴影的颜色。

卡片的形状。

该值是OutlinedBorder类的实例。

默认形状是 RoundedRectangleBorder(radius=4.0)。

设置边框的形状是否应绘制在“内容”的前面还是后面。

默认为“True”。

用于在 color 上作为覆盖的颜色，以指示海拔高度。

如果为 None，则不会应用覆盖。如果设置了此颜色，它将以与 elevation 相关的不透明度复合在 color 之上，并用于绘制卡片的背景。

默认值为 None。

定义要使用的卡片变体。值的类型为 CardVariant ，默认值为 CardVariant.ELEVATED 。

（汇报结束，感谢收看！）

CSS 速查手册：核心属性一网打尽

在前端开发中，CSS是必不可少的一环。但CSS的属性繁多，容易让人感到头疼。今天，我们就来整理一份CSS速查手册，帮你快速掌握核心属性，提升开发效率。

CSS 可以通过以下三种方式添加到HTML文档中：

1. 外部样式表: 通过 <link> 标签链接外部 CSS 文件。

1. 内部样式表: 在 <style> 标签中定义 CSS 规则。

1. 内联样式: 直接在 HTML 元素的 style 属性中定义 CSS 规则。

CSS 中可以使用以下方式定义颜色：

• rgb 值: 例如 rgb(255, 0, 0) (红色)
• hex 值: 例如 #FF0000 (红色)
• hsl 值: 例如 hsl(0, 100%, 50%) (红色)

• background-color: 设置背景颜色。
• background-image: 设置背景图片。
• background-repeat: 设置背景图片是否重复。
• background-attachment: 设置背景图片是否固定。
• background-position: 设置背景图片的位置。
• background (简写属性): 一次性设置所有背景相关属性。

Padding (内边距): 元素内容与边框之间的距离。

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (简写属性): 例如：padding: 10px 20px 15px 5px;

Margin (外边距): 元素边框与其他元素之间的距离。

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin (简写属性): 例如：margin: 10px 20px 15px 5px;

盒子模型是理解 CSS 布局的基础，它包括：

• content: 元素的内容
• padding: 内边距
• border: 边框
• margin: 外边距

display 属性决定了元素的显示方式：

• inline: 内联元素，只占据必要宽度，不换行。
• block: 块级元素，占据整行宽度，会换行。
• none: 隐藏元素。

position 属性用于控制元素的定位方式：

• static: 默认值，不进行特殊定位。
• relative: 相对定位，相对于自身正常位置进行定位。
• fixed: 固定定位，相对于浏览器窗口进行定位，不随滚动条滚动。
• absolute: 绝对定位，相对于最近的已定位祖先元素进行定位。
• sticky: 粘性定位，基于用户的滚动位置来定位。

• color: 设置文本颜色。
• text-align: 设置文本对齐方式 (left, right, center)
• text-decoration: 设置文本装饰线 (line, color, style, thick)

• font-family: 设置字体族。
• font-style: 设置字体样式 (normal, italic, oblique)
• font-size: 设置字体大小 (px, em, %, cm等单位)

z-index 属性用于控制元素的堆叠顺序，值越大，元素越靠上。

overflow 属性用于控制元素内容溢出时的显示方式：

• visible: 默认值，溢出内容可见。
• hidden: 隐藏溢出内容。
• scroll: 显示滚动条。

opacity 属性设置元素的透明度，取值范围 0 到 1。

• p 选择所有 <p> 标签
• #id 选择特定 id 的元素
• .class 选择特定 class 的元素
• * 选择所有元素

• Border: 用于设置元素的边框样式。提供了多种边框样式选择例如：dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden 等。
• Height & Width: 用于设置元素的高度和宽度。可以使用固定值例如px,cm, pt或者相对单位 %, vw,vh。
• Outline: 用于设置元素的外轮廓。提供了 dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden 等样式。同时可以设置轮廓颜色 outline-color, 轮廓宽度 outline-width，轮廓偏移outline-offset。
• !important 关键字用于增加样式的优先级。
• object-fit: 用于控制替换元素（例如图片或视频）在容器中的显示方式。

总结

以上是 CSS 中一些常用的核心属性的总结。掌握这些属性，可以让你更高效地进行网页布局和样式设计。这份速查手册可以作为你在日常开发中的参考，帮助你快速查找和使用所需的 CSS 属性。

思考题:

在实际项目中，你最常用的 CSS 属性有哪些？你通常如何组织和管理你的 CSS 代码？

希望这份 CSS 速查手册对你有帮助！欢迎在评论区分享你的经验。

负边距在布局中的使用

负边距即margin属性的值设为负值，在CSS布局中时一个很有用的技巧。值为正的场景很常见，大家都很熟悉其表现

当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同

当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移

看几个应用场景

1.绝对定位居中的应用

效果如下：

2、float元素

负边距对float元素的影响也是按照上面说的，不过有其特殊性，我们看个例子就很清楚了

有三个div的宽度之和是300px，大于280px，一行排不满，如果第三个div改成下图：

就可以显示在一行,如下图：

3、带有右边距的浮动子元素列表

看到这种效果你第一想法是什么？会不会是子元素设置margin-right，在遍历的时候nth-child(3n)还要设置为0，看看利用上面知识我们可以怎样处理。没有设置nth-child(3n)的边距为0，是通过负边距使父元素“变大”。

切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com