[2分钟学个CSS小技巧] 用 CSS 实现一个宽高等比自适应容器
不知道怎么起个标题能更加清楚的说清楚我的意图,那就打个比方吧:比如我们在手机端上方一张宽度 100% 的图片,我们如果不设置图片的高度,那么这个图片会根据图片的原始尺寸等比缩放。今天我们要讲的就是实现这么一个类似于图片等比缩放的容器。 实现...
不知道怎么起个标题能更加清楚的说清楚我的意图,那就打个比方吧:比如我们在手机端上方一张宽度 100% 的图片,我们如果不设置图片的高度,那么这个图片会根据图片的原始尺寸等比缩放。今天我们要讲的就是实现这么一个类似于图片等比缩放的容器。 实现...
我已经使用CSS多年了,但直到最近我还没有深入研究过关于 CSS 选择器的主题。 为什么我需要学习 CSS 选择器呢? 我们现在知道了所有的内部选择器了吗? 问题是(至少对我来说是这样)随着时间的推移,很容易习惯在每个项目上使用相同的习惯的...
小编注:了解创建隐式网格线和隐式轨迹的原因和方式对于使用网格布局至关重要。 Grid(网格) 布局最终使我们能够在CSS中定义网格,并将网格项放置到网格单元格中。这本身就很棒,但事实上我们不需要指定每个网格轨道,也不必手动放置每一个网格项。...
本文从 flex 项中子元素文本截断 text-overflow:ellipsis 失效这个小 “bug” 说起,并且给你一个完美的解决方案。但是更重要的是帮助你理解 flexbox 布局中 flex 项的宽度计算原理。 问题 有个小伙伴问...
本文最后更新于 2018年11月15日。推荐姊妹篇:CSS Grid 布局完全指南(图解 Grid 详细教程) 背景 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块( W3C 候选推荐,截止到2017年10月)旨在提供一个更有效...
本文最后更新于 2018年11月20日。推荐姊妹篇:Flexbox 布局完全指南(图解 Flexbox 布局详细教程) CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一...
JavaScript 的 ES2015 改变了一切。ES2015 规范带来了很多重大特性 。 modules(模块)的原生支持,以及不断发展的函数式编程模式,新的 JavaScript 感觉上完全是一种不同的语言。随着 ES2016、ES2...
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:https://co...
在本教程中,我们将使用 CSS自定义属性(也称为CSS变量)来为简单的HTML页面实现主题切换。 我们将创建暗黑和明亮的示例主题,然后编写JavaScript 以在用户单击按钮时在两者之间切换。 如果你以前没接触过,请先阅读CSS变量(自定...
注:在《A Practical Guide to CSS Variables (Custom Properties)》基础上增加了很多说明示例及需要注意的点。 像 Sass 和 Less 这样的预处理器有助于保持CSS代码的组织和可...
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂