跳到主要内容位置

One doc tagged with "css"

查看所有标签

2分钟掌握网页文档流、布局和定位

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

3分钟掌握CSS Multi-column Layout 布局

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

CSS Claymorphism 泥陶态简介

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

CSS Grid 布局设置跨行、跨列和堆叠顺序

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

CSS Snap Scroll 滚动贴合特效实现

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

CSS 容器查询 Container Queries 最新特性介绍

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

CSS 常用样式属性

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

CSS 设置渐变阴影

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

CSS 过渡和动画属性

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

JS DOM 和 CSS 选择器入门教程

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

什么是 CSS BFC

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

使用 2 行 CSS 代码居中元素

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

使用 Gap 属性给 CSS Flex 布局设置间距

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

使用纯 CSS 自定义滚动条样式

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

利用 CSS conic-gradient 制作饼图和色盘

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

利用 CSS Counter 计数器添加章节序号

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