跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
layout

42 篇文章
{
,

}
使用网格命名区域可视化(和引用)您的布局的文章的直接链接
grid grid-template-areas layout naming

使用网格命名区域可视化(和引用)您的布局

每当我们使用 CSS 网格构建简单或复杂的布局时,通常会使用行号来定位项目。网格布局包含网格线,这些网格线会自动使用正负行号进行索引(除非我们显式地为它们命名)。…

Avatar of Preethi Selvam
Preethi Selvam 于 2022 年 8 月 26 日
如何制作 CSS 斜面容器的文章的直接链接
layout transform

如何制作 CSS 斜面容器

我在更新我的投资组合,并且想要使用正斜杠 (/) 作为网站主布局的可视元素。我以前从未尝试过在 CSS 中创建斜面容器,但它似乎像…

Avatar of Dave Seidman
Dave Seidman 于 2022 年 2 月 9 日
如何在设计系统中处理组件间距的文章的直接链接
components design systems layout

如何在设计系统中处理组件间距?

假设您有一个 <Card /> 组件。它很可能不应该直接与任何其他组件相邻,而没有任何间距。这对…几乎所有组件都是正确的。那么,如何在…

Avatar of Chris Coyier
Chris Coyier 于 2022 年 1 月 27 日
六边形及更多:灵活、响应式网格模式,无需媒体查询的文章的直接链接
float grid layout

六边形及更多:灵活、响应式网格模式,无需媒体查询

不久前,Chris 分享了这个不错的六边形网格。顾名思义,它使用的是——请稍等——CSS 网格来形成该布局。这是一个巧妙的技巧!结合网格列、网格间距和创意裁剪…

Avatar of Temani Afif
Temani Afif 于 2021 年 6 月 8 日
CSS 网格布局指南的文章的直接链接
grid layout

CSS 网格布局指南

我们针对 CSS 网格的综合指南,重点介绍网格父容器和网格子元素的所有设置。
Avatar of Chris House
Chris House 于 2024 年 8 月 12 日
构建设置组件的文章的直接链接
layout

构建设置组件

这是来自 Adam Argyle 的一个很棒的 CSS 侧重教程。我真的很喜欢这里的“只用于间距”概念。网格非常强大,但您不必每次使用它时都使用所有功能。在这里,Adam…

Avatar of Chris Coyier
Chris Coyier 于 2021 年 4 月 15 日
SmolCSS 文章的直接链接
layout

SmolCSS

来自Stephanie Eckles 的一个很棒的关于布局相关 CSS 代码片段的集合,既可以作为快速参考,也可以作为 CSS 已变得多么简单和强大的提醒。

一些需要注意的事项!…

Avatar of Chris Coyier
Chris Coyier 于 2021 年 2 月 24 日
负责任的 Web 应用程序的文章的直接链接
accessibility layout web components

负责任的 Web 应用程序

Joy Heron 购买了一个很酷的域名并在那里发布了一篇文章

幸运的是,借助现代 HTML 和 CSS,我们可以相对轻松地创建响应式和可访问的 Web 应用程序。在我从事软件开发的这些年里,我学到了一些

…
Avatar of Chris Coyier
Chris Coyier 于 2021 年 2 月 12 日
探索 CSS 中宽度和高度的复杂性 文章的直接链接
height layout width

探索 CSS 中宽度和高度的复杂性

以下文章由Uri Shaked 和Michal Porag 共同撰写。

让我们探索 CSS 如何计算元素的宽度和高度尺寸的复杂性。这基于无数个深夜调试和摆弄大量…

Avatar of Uri Shaked
Uri Shaked 于 2021 年 3 月 1 日
  • 1
  • 2
  • 3
  • ...
  • 5
  • Older

CSS-Tricks 由DigitalOcean 提供支持。

随时了解 Web 开发动态

使用我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费信用额度!
CSS-Tricks
  • 为我们写作!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.