One doc tagged with "css"

文档流是 HTML 元素在网页上的排列方式。HTML 元素分为块级元素和行内元素。块级元素在浏览器中会占满容器的宽度，后面的块级元素会在新的一行进行排列，例如 div 和 p 元素都是块级元素。行内元素的宽度是根据内容宽度来决定的，后面如果有剩余空间，会被其它文本或者行内元素占据。

CSS 的 multi-column 布局可以像报纸一样，把内容分割成多个列进行展示，与 Grid 或 Flex 布局不同的是，multi-column 布局不会让子元素脱离正常的文档流，在列中，元素还是按顺序进行排列的。接下来我们来看一下它的使用方法。

5 个技巧助你成为 CSS 大师！

CSS 正变得越来越强大，新加入的选择器能够让代码变得更容易维护、复用和阅读，有的甚至能实现类似于父元素选择器的效果。本期我们先来看一下 :where() 选择器的用法。

CSS 的定位通过 position 属性设置，它有 static, relative, absolute, fixed, sticky 这几种。

我们知道 CSS background 是用来设置元素背景的，但是它的使用上会有很多细节需要注意，否则就会出错。CSS background 是一系列属性的合集，通过这一个属性，可以对背景进行多种操作，我们接下来看一些它的用法。

Claymorphism（这里称它为泥陶态） 是结合 3D 设计流行风格而兴起的新形态。设计趋势由拟物风格发展为扁平风格时，去掉了一切表示深度和层叠的效果，虽然视觉上简化了，但不容易表现空间关系。

CSS Flex 布局 2分钟动画快速掌握。

CSS Grid 布局十分强大，除了规整的布局外，还能实现复杂的不规则布局，这个视频通过一个页面示例来教你如何实现它！

CSS Grid 布局 2分钟动画快速掌握。

CSS Grid 布局里的单元格可以像 Excel 中的一样，设置跨行和跨列，并且有多种方式，另外如果有重叠的单元格，还可以调整堆叠顺序。在介绍设置跨行和跨列之前，我们先看一下 Grid 布局的编号系统

CSS 的定位通过 position 属性设置，它有 static, relative, absolute, fixed, sticky 这几种。

网页开发发展到现在，特效是越来越多，我们经常可以看到有的网站上边的内容，它们会在鼠标滚动的时候自动贴合到浏览器的顶部或者底部，以前实现这种特效使用的是 JavaScript，现在我们可以使用 CSS 原生属性来设置，并且使用这种方式无论在桌面端还是移动端浏览器上，都能达到操作系统级的滚动贴合效果。

响应性网站可以随意缩放，但是图片、视频或者其它容器，容易缩放着缩放着，比例就不对了，这期视频我们看一下如何保持图片、视频等的纵横比。

SS Container Queries 是最新的响应式设计方式，通过它，可以方便的对通用的组件，进行响应式设计, 根据容器的尺寸去调整它内部元素的排列，而不是基于浏览器的宽度。

CSS 对于页面元素的美化，都有特定的套路，我们需要熟记一些 CSS 常用的属性才能快速并且优雅的实现复杂的样式。这个视频就给大家介绍一下 CSS 经常用到的一些样式属性。

这期视频分享一个 CSS 小技巧，设置渐变阴影。大体思路是：给要设置渐变阴影的元素，创建一个...

自从 CSS 支持动画属性之后，网站应用的用户体验变得更加丰富了。通过动画视觉效果可以引导用户的关注焦点，获得流畅的心理感受并且更容易理解网站的功能。另外使用 CSS 动画属性，比使用 JavaScript 性能更好，浏览器可以减少不可见的选项卡的动画的执行速度。CSS 中实现动画效果有两种方式，一种是使用 `transition` 过渡属性，另一种是使用 `@keyframes` 定义关键帧动画。我们先来看一下 transition 属性。

选择器（Selector）用于选取 HTML 元素，既可以用于，在 CSS 中，给对应的元素添加样式，也在 JavaScript 中操作 HTML DOM。由于选择器的用途广泛且重要，所以这个视频整理了常用的选择器的语法规则和效果。

CSS BFC 是面试时经常考到的题，那么它到底是个什么玩意呢？

在 CSS 中，最方便的居中方式就是使用 flex 布局或 grid 布局，利用 align 和 justify 分别设置垂直和水平方向上居中对齐，这样需要 3 行代码才能实现。有没有办法使用 2 行代码就实现呢？答案是有的。

我们知道css grid 布局有 gap 属性，可以让行和列之间有同样的空隙，但是有的时候我们并不需要使用 grid 布局，而是只想对一行，或者是一列元素，调整它的间距，如果在 flex 下也能使用 gap 就好了。

遮罩是前端开发中常见的样式表现，但是有时候遮罩过于遮罩...就导致后面的元素点击不了了，这期视频我们看一下如何用纯 CSS 的方式解决这个问题，一行代码搞定！

使用纯 CSS 设置滚动条样式。无论你是在工作中遇到这个需求，还是想给自己的网站添加个性化元素，这个视频都可以帮到你。

在 css 里面设置渐变常用的有两种方式，一个是 linear-gradient 线性渐变，还有一个 radial-gradient 辐射渐变。线性渐变是从一条直线方向上，把一个颜色过渡到另一个颜色，辐射渐变是从一个区域的中心开始，向外扩散，从一个颜色过渡到另一个颜色。CSS 里边还有一个不太常用的渐变： conic-gradient，圆锥渐变。

我们在写 markdown 或者博客这种以内容为主的网页的时候，经常会有给标题加上序号的需求，就跟写书一样，在一级标题前加上第 1 章、第 2 章等，二级标题加上 1.1，1.2 之类的序号，三级标题则为 1.1.1、1.1.2