团队叫我准备一个关于 CSS 的技术分享

[mythjava]

不用特别深入 我应该在哪几个方面进行准备呢

我想到了几个方面

• css 选择器
• css 动画
• grid 布局

各位还有什么好的点子呢

[BeijingBaby]

这也太浅了？
面向后端技术么？

[shervinchen]

你这也太水了。。。给个方向吧，可以谈谈现代 CSS 方案下的主题系统，讲讲实现和设计思路

[heyjei]

既然不用特别深入，就说明是面向初级用户。

讲选择器和布局吧，特别是选择器的优先级的问题（这个特别适合出一个思考题）

布局讲 flex 布局，为啥你选则 grid 布局，这个不常用吧，一般用最多的还是 flex 布局

[ReggieLee]

原子 css\css in js\web compoments 下的 css

[murmur]

flex 布局比较好，ie 都可以用

[xujiahui]

要不推广 tailwindcss 吧

[fengfuliu]

分享一些可以实现比较酷的效果，业务还可能用到的 css 吧 filter mix-blend-mode clip 之类的

[ypzhou]

看下张老师的 https://www.zhangxinxu.com/wordpress/category/js/

[zxCoder]

flex 布局

[murmur]

tailwind 简直是工程化的灾难，这东西单人用还可以，多人用你怎么能保证每个人对尺寸样式牢记于心

[ration]

讲布局，块元素，行内元素，margin ，padding ，border ，float 之类的，再讲讲比较流行的布局，比如 grid 之类的

[henryhu]

css 框架选择

[jjwjiang]

看团队水平

都还处于原始人阶段的话大力推荐 flex 和 grid ，flex 可以解决 80%以上以前 CSS 的疑难杂症，包括不仅限于什么居中对齐自适应等等……

现在写 css 还不用 flex 布局简直是犯罪

[wu67]

还是得讲基础. 这玩意, 往深往浅讲都行. 浅的可以讲布局, 面向公司的设计、产品、和老板. 深的可以讲讲 flex 以及容易过大、过小时的伸缩计算 /设置, 这玩意就算是前端也能蒙圈.
如果讲 ui 框架什么的, 推广使用倒是还行, 当课程讲, 不太可能, 有几个人就能衍生出几种写法

[Leviathann]

@murmur 这个都有提示的把，装插件会自动提示一个 tailwind utility 对应的实际 css 是什么

[waiaan]

找《 css 的秘密花园》这本书，把里面的东西讲讲就差不多了。

[abear]

animate 和 tailwindcss 啥的比较优秀的库；普通的太普通了。推广推广，让他们看源码。😂

[jqtmviyu]

tailwindcss

[hellojay]

tailwindcss 不要太爽了

[devwolf]

平时有总结到一些小技巧吗，单独拎出来讲而不是挑大的方面？

比如：
=======================
Q1：如何在多列的时候，实现 hover 图片中心放大？
A1：
父元素 position: relative;overflow: hidden;子元素丢一个 visibility: hidden;的 img 拷贝版去占位。

另一份 img 子元素用来实现展示与放大的效果——
首先用 position: absolute;定位叠在上面。
top: 50%;left: 50%;使该图片偏移，
transform: scale(1.02) translate(-50%, -50%) 让图片偏移回去以及微调大小
hover 后 transform: scale(1.1) translate(-46%, -46%);改变图片大小以及微调偏移。（微调偏移，是为了在 flex 实现的多列布局里，仍然维持中心放大的效果）
hover 前后补上 transition: transform 1s ease-in-out;

核心：absolute 定位改偏移，再用 translate 平移回来，这个我跟 leader 学来的技巧。也有用 right:calc(50.5% + (1920px / 2) - 540px) 这样基于中轴的绝对定位技巧(来实现一些……“相对静止”那种效果)。

=========================
Q2: 实现渐变的 border
A1： https://jsrun.net/XfQKp/edit
ps：这个我之前有存 demo


这样的？