我的第一本小册:现代 Web 布局

已经很久没有看到有一本关于 Web 布局的书了。我在一些平台上搜索了一下,关于 Web 布局方面的书还是停留在多年以前,比如 DIV + CSS 方面的。基于这个原因,几年前我就开始想写一本关于 Web 布局方面的书。有一次有月影姐姐聊了一下我自己的想法,我说想写一本关于 现代 Web 布局方面的小册,后来得到月影姐姐的支持和鼓励,就有了现在这本小册!经过三个多月的全职时间创作,该小册已经接近尾声,现在面向大家!希望大家能喜欢!

创意性的CSS布局和灵活Web

2022年CSS Day于2022年6月9日和10日在阿姆斯特丹举行,这是时隔三年后再次举办的一次有关于CSS主题的盛会(上一届是2019年)。今年的CSS Day一共有14个关于CSS方面的话题,其中有几个话题是非常有意思的,比如 Lea Verou 的 《CSS Variable Secrets》、Bramus Van Damme的《The CSS Cascade, a deep dive》、Adam Argyle的《Oh Snap!》和 Michelle Barker 的《Creative CSS Layout》。就我个人而言,Michelle Barker 的 《Creative CSS Layout》话题我最为感兴趣,该话题围绕着 CSS 的一些新技术给Web布局带来的变化而展开。如果用一句话来描述的话,就是 CSS的新特性可以构建具有创造性的、灵活的Web布局。在接下来的内容中,我们一起来看看这个主题中所阐述的观点和内容,如果你感兴趣的话,请继续往下阅读。

图解CSS:CSS背景(Part3)

前面已经花了两篇的篇幅(《CSS背景:Part1Part2》)介绍完了除background-size之外的所有background子属性的特性以及使用。众所周之,在Web中对于<img>引入的图片,我们可以显式使用widthheightaspect-ratioobject-fit等属性来调整图片尺寸,但对于背景图片,我们只能使用background-size来进行调整。那么background-size是如何决定背景图片尺寸的计算呢?如果你感兴趣的话,这篇文章可以告诉你很多不为人知的答案。

图解CSS: CSS 背景(Part2)

第一部分主要和大家一起探讨了 CSS background属性中的background-imagebackground-repeatbackground-attachment等属性。今天接着和大家一起来探讨其另外三个子属性,即 background-positionbackground-clipbackground-origin。感兴趣的同学请继续往下阅读!

图解CSS: CSS 背景(Part1)

背景(background)是 CSS 中最常见也是最基础的一个属性,它自 CSS 1.0 版本就开始有了。最早的时候我们可以通过 background 给一个元素盒子的背景层设置背景颜色(background-color)、背景图像(background-image)。如果是背景图像的话,还可以调整背景图像的位置(background-position)、设置背景图像的平铺方式(background-repeat)以及背景图像在背景层的依附模式(background-attachment)。不过,随着 CSS 技术不断向前发展,CSS 为开发者提供了一些新特性用来控制背景图像,比如背景图像的大小(background-size)、背景图像的剪切(background-clip)、背景图像的定位区域(background-origin)以及给同一个元素盒子设置多个背景。除此之外,CSS 还为 background 的一些老属性新增了功能,比如 background-position可以指定四个值,通过方向设置背景图像的位置,background-repeat 多了几种不同的平铺方式。另外,CSS 还可以使用 background-blend-mode 属性来设置不同的混合模式,从而改变背景图像的效果。

图解CSS:CSS溢出(Part2)

第一部分主要和大家聊了CSS溢出的概念和理论相关的,在第一部分主要以实例,问题排查和常见溢出问题三个部分展开。在构建 Web 页面或应用的时候,总是避免不了给容器设置一个具有约束性的尺寸,有的时候,因为容器没有足够的空间来容纳内容,从而造成内容溢出容器,严重的会打破 Web 布局,干扰页面的美观。为了让这些现象能不干扰 Web 布局,所以需要CSS溢出特性。除此之外,我们在构建一些Web组件和实现一些UI效果,也需要依赖CSS溢出特性。那么接下来,我们来看一些溢出相关的案例。

图解CSS:CSS溢出(Part1)

溢出是CSS中的另一个重要的概念。从 图解CSS系列 的《CSS 盒模型》和《元素尺寸的设置》中可以得知,Web上的内容都是放置在一个具有一定大小的盒子中。在某些情况下,盒子大小是有限制的,有可能内容会超出这些盒子,在 CSS 中,这种现象被称为 溢出。而且 W3C 的CSS工作小组专门为溢出划为一个独立的模块。在这一章中,将和大家一起探讨 CSS 溢出模块相关的话题。比如,什么是溢出?什么情况下会导致溢出?如何使用CSS来控制溢出等等。

CSS 比较函数构建响应式UI

在 CSS 中说起函数,我想很多人首先想到是 calc() 数学运算函数,其实在 CSS 中有很多种不同类型的函数,有些“CSS函数”可以在CSS中用于动态计算,比如 calc()函数,计数器函数 counter()counters()CSS比较函数 min()max()clamp()。尤其是 calc()min()max()clamp() 这几个函数,在现代Web开发中所起的作用越来越大,使用的场景越来越多,带来的灵活性和扩展性越来越强。那么在这篇文章中,我们主要和大家一起来探讨 CSS 比较函数在实际开发中能用在哪些地方?又是如何帮助前端构建响应式UI?感兴趣的同学请继续往下阅读。

CSS 的父选择器:has()

W3C 的 Selectors Level 4 新增了很多强大的 CSS 选择器。早在 2018 年年底就在《初探CSS 选择器Level 4》一文中和大家一起探讨了这些选择器。在这些新选择器中,最为有意思的是“逻辑组合选择器”,即 “任意匹配伪类选择器:is()、否定(匹配无)伪类选择器:not()、选择器权生调整伪类选择器:where()和关系性(父选择器)伪类选择器:has() 。尤其是关系性伪类选择器:has(),它和 CSS 容器查询在近十多年来一直成为 Web 开发者期待的 CSS 功能之一。在这篇文章中,我将和大家一起来探讨什么是关系性伪类选择器(又称父选择器)以及它是如何工作的,并且将会通过一些示例来阐述该选择器可以在哪里,最重要的是我们现在如何使用它。

下一代响应式Web设计:组件驱动式Web设计

自从著名设计师 Ethan Marcotte(@beep)在 A List Apart 上发表了一篇名为《 Responsive Web Design 》的文章之后,响应式网页设计(RWD,即 Responsive Web Design)的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来,CSS 也发生了巨大的变化,新增了很多新的特性,近两年尤其如此(详细请参阅《2022 年的 CSS》一文)。这些变化,对于响应式Web设计的开发也有较大的改变。Una Kravets(@Una)大神,在2021的Google I/O 大会上的分享,提出 新的响应式:组件驱动式 Web 设计。 Web 生态即将进入响应式 Web 设计的新时代,并转变我们对其含义的看法,也为会Web设计带来新的变化。组件式驱动 Web 设计(或开发)也被称为是下一代响应式 Web 设计(或开发)。如果你对这方面话题感兴趣的话,请继续往下阅读。

页面

返回顶部