摘要:谈到 <fieldset> 与 <legend>,大部分人肯定会比较陌生,在 HTML 标签中,属于比较少用的那一批。 我最早知道这两个标签,是在早年学习 reset.css 或者 normalize.css 时,在这些重置统一代码默认样式的 CSS 中看到的。最近因为研究边框,遇到了这两个标签,发 阅读全文
posted @ 2021-01-25 10:20 ChokCoco 阅读(152) 评论(4) 推荐(3) 编辑
摘要:今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框。 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样。 border 属性 谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图 阅读全文
posted @ 2021-01-18 10:41 ChokCoco 阅读(2819) 评论(36) 推荐(95) 编辑
摘要:这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; will-change: height; &.up { height: 0; } &.down { 阅读全文
posted @ 2021-01-13 10:17 ChokCoco 阅读(723) 评论(4) 推荐(5) 编辑
摘要:一个很有意思的题目。如何不使用 overflow: hidden 实现 overflow: hidden? CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。 控制 overflow: 阅读全文
posted @ 2021-01-11 10:44 ChokCoco 阅读(417) 评论(0) 推荐(2) 编辑
摘要:在上篇文章 -- 一行 CSS 代码的魅力 的最后,提到了两种快速实现水平垂直居中的方式。 当然,CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利弊。 嗯哼?也就是: 那么多 阅读全文
posted @ 2021-01-08 11:51 ChokCoco 阅读(461) 评论(1) 推荐(7) 编辑
摘要:之前在知乎看到一个很有意思的讨论 一行代码可以做什么? 那么,一行 CSS 代码又能不能搞点事情呢? CSS Battle 首先,这让我想到了,年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是: 官方给出一张图形,在给定的 400 x 300 的画布上,能够用越短的代码实现它 阅读全文
posted @ 2021-01-06 10:46 ChokCoco 阅读(1597) 评论(8) 推荐(14) 编辑
摘要:开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现一条阴影: 对于两侧的列在滚动的过程中,静止不动,吸附在边界的问题,通常 CSS 使用 positi 阅读全文
posted @ 2021-01-04 10:26 ChokCoco 阅读(1977) 评论(8) 推荐(19) 编辑
摘要:CSS 的 position 值中,有一个非常有用的值 -- position: sticky,通常会被用于各种吸顶,吸底,吸边的效果中。 如果你对 sticky 还不太熟悉,可以先看看我的这篇文章:使用 position:sticky 实现粘性布局,当然,这篇文章里面有稍微探讨 position: 阅读全文
posted @ 2020-12-23 18:50 ChokCoco 阅读(573) 评论(1) 推荐(2) 编辑
摘要:本文将介绍一个不太实用的小技巧,使用 tabindex 配合 :focus-within 巧妙实现父选择器。 CSS 中是否存在父选择器? 这是一个非常经典的问题,到目前为止,CSS 没有真正意义上被广泛实现的父选择器,这和浏览器的渲染机制有关。 如果你对 CSS 中是否存在父选择器有疑惑,可以去看 阅读全文
posted @ 2020-10-30 10:30 ChokCoco 阅读(482) 评论(4) 推荐(3) 编辑
摘要:在日常布局当中,肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 但是,有的时候,由于场景的限制,可能会出现在一些无法使用超出打点省略的方法的场景,譬如在导航栏中: 这种情况下,在容器定宽但是文本又溢出且不能换行的情况下,我们就需要寻求另外的解决方案。 hover 时弹出框提 阅读全文
posted @ 2020-07-27 15:20 ChokCoco 阅读(3014) 评论(6) 推荐(16) 编辑