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

文章标签
layout

42 篇文章
{
,

}
文章“相同 HTML,不同 CSS”的直接链接
布局

相同 HTML,不同 CSS

Ahmad Shadeed 介绍了卡片组件的概念,它具有固定的一组语义 HTML,以及一些 BEM 类。它包括标题、作者、图片和标签。然后他将卡片重新设计为五个完全不同的……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 2 月 19 日
文章“使用 CSS Contain 属性帮助浏览器优化”的直接链接
contain 布局 性能

使用 CSS Contain 属性帮助浏览器优化

为了帮助浏览器实现最佳性能,我们必须做很多事情。

  • 响应式图片语法就包含很多。例如,需要告诉浏览器图片在我们的……中将有多大
…
Avatar of Chris Coyier
Chris Coyier 于 2020 年 2 月 10 日
文章“网页上的印刷灵感布局”的直接链接
布局 多列布局 打印

网页上的印刷灵感布局

我一直很喜欢看到人们从印刷设计中汲取灵感,并尝试将其移植到网页上。印刷作品有着更加深厚的历史,可以从中借鉴,而且现在依然有很多现代作品……

Avatar of Chris Coyier
Chris Coyier 于 2019 年 12 月 18 日
文章“使用 CSS Grid 和元素之间的边框线创建报纸布局的技术”的直接链接
网格 布局

使用 CSS Grid 和元素之间的边框线创建报纸布局的技术

最近我需要制作一个类似报纸的设计,它包含多个行和列跨度,并在它们之间使用分隔线。请看这里的设计稿,看看是否让你感到压力。如果你……

Avatar of Marco Troost
Marco Troost 于 2019 年 11 月 20 日
文章“双值 display 语法(有时还有三值)”的直接链接
display 布局 语法

双值 display 语法(有时还有三值)

你了解单值语法:.thing { display: block; }。“block”是一个单值。display 有很多单值。例如,inline-flex,它类似于 flex,因为它会成为……

Avatar of Chris Coyier
Chris Coyier 于 2019 年 11 月 11 日
文章“每种布局”的直接链接
布局

每种布局

Every Layout 是 Heydon Pickering 和 Andy Bell 的一个正在进行中的网站和书籍,它解释了如何使用 CSS 创建常见的布局模式。他们描述了这些设计中遇到的很多问题……

Avatar of Robin Rendle
Robin Rendle 于 2019 年 6 月 18 日
文章“快!Flexbox 和 Grid 有什么区别?”的直接链接
flexbox 网格 布局

快!Flexbox 和 Grid 有什么区别?

让我们快速地回答这个问题,用一些要点而不是长篇大论。Flexbox 和 Grid 有很多相似之处,首先它们都用于布局,还有更多……

Avatar of Chris Coyier
Chris Coyier 于 2019 年 2 月 14 日
文章“你对 CSS 布局了解多少?”的直接链接
盒模型 布局 学习

你对 CSS 布局了解多少?

CSS 中的良好体验和漫长的令人沮丧的体验之间的区别通常仅仅在于一些细微的细节。CSS 确实很细致。我最常看到人们感到困惑的领域之一就是布局。就我个人而言,我喜欢……

Avatar of Brad Westfall
Brad Westfall 于 2019 年 1 月 15 日
文章“CSS Masonry 布局的方法”的直接链接
flexbox 网格 houdini 布局

CSS Masonry 布局的方法

在网页上,Masonry 布局是指将大小不一的项目排列在一起,使之没有不均匀的间隙。我猜这个词是由 David DeSandro(至少是流行的)创造的,因为……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 12 月 2 日
  • 较新的
  • 1
  • ...
  • 2
  • 3
  • 4
  • ...
  • 5
  • 较旧的

CSS-Tricks 由 DigitalOcean 提供技术支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们写作!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.