CSS3
鹅厂前端开发设计师
再烂的东西,如果真的毫无价值,是会马上被历史所淹没的 每个领域都有沉淀下来对特定开发者在特定场景有用的东西 很赞同克军那句取其精华去其糟粕,何为精华,自己根据使用场景取舍 可能大多数同学看到那么多下划线中划线以及那么长我靠还有驼峰的名字,就会觉得混乱和不爽 不爽是一个很主观的词儿,他除了解决心理问题,没法解决生理问题 CSS这么多年并没有一个相对比较严谨的套路出来,宽松的写法导致团队成员写法各异,丢在页面都能跑…
从技术的角度来说就没区别，区别在于市场 浏览器是一个“可见的长远存在的垄断型产品”，所谓的“垄断”不是指某一家垄断浏览器市场，而是浏览器垄断Web访问这个世界 浏览器发展到现在，经历几轮大战，各公司已经达成了一种微妙的平衡状态，至少表面上非常友好地合力推进一个被他们称为“标准”的东西 就好像这个世界上有那么5个流氓搞了个什么机构，这5个流氓还非常强大，所以世界会是“整体和平”的。在这种情况下，很难有哪一…
在 Web 中均分列的布局效果很多，尤其是在移动端的开发当中，底部的菜单栏中的列大多都是均分的。 均分列又称为等分列或等列，它的最大特征就是列的宽度是相等的 ！以往 CSS 实现等分列都是通过百分比来计算，比如： 列数（--column）；列间距（--gap）。一般情况下，列宽就是： 列宽 = （容器宽度 - （列数 - 1）× 列间距）÷ 列数假设是一个三列，列间距为 0，那么每列的宽度将会是：.column { /** * 容器宽度 ➜ 100% * 列数…
自从 CSS Flexbox 和 CSS Grid 布局技术出现之后，在 CSS 中实现等高布局，应该是一件非常容易和简单的事情了。 如果使用 Flexbox 布局技术，实现起来就很简单： 
与布局相关的 CSS 代码： .cards { display: flex; flex-wr…
Card Title
Card Describe
这个问题是这样的：从你的角度出发，可能是想给大家讲一个体系的东西，有深度有广度，但这样有几个问题： 1. 没几次下来，你就没东西可以讲了 2. 你一次很难把东西讲得很透彻 3. 听众的接受度不好 4. 因为太笼统，听众在选择去还是不去听的时候，很纠结 5. 深浅度很难照顾不同的人群 这些问题我都深入思考过，因为我之前召集组织了整个苏宁前端的分享活动，我的组织形式是大小分享穿插，每周的是小分享，只讲一个小知识点，不一…
这种叫 视差滚动（Parallax Scrolling）。即多个元素以不同的层次堆叠在一起，并随鼠标滚轮滚动而进行位置移动，进而形成立体的运动效果。 [图片] [图片] 比如这个游戏画面里通过人物马里奥、前景、背景着三个部分的移动速率的不同来实现立体效果。类比网页也是如此。一个滚动视察的网站至少会有以下几层 ：背景层，内容层，贴图层。 [图片] 类似网站： http://nikebetterworld.com/ http://ianlunn.co.uk/plugins/jquery-parallax/ [图片] 类似Nike for a Better World 产品展示页面的视差滚动…
喜欢&深耕 CSS 十年，出版过关于 CSS 的书籍，来自阿里淘系的工程师大漠给大家分享一点，自己关于CSS 的理解和学习路径，欢迎分享交流。 ———————————————————————————————————————— 在前端社区中，大家常称我“大漠”。我个人比较喜欢CSS，在这个领域深耕了近十年，虽无大的成就，但有所小收获。个人平时比较宅，爱写写博客，看看电影，听听音乐等。 在2014年出版了一本有关于CSS方面的…
Footer 置底有一个专业术语： Sticky Footer。它的表现形式会像下图这样： [图片] 在 现代 Web 开发 中，要实现上图这样的 Web 布局 效果是件很轻易的事情了，因为你不要使用任何 CSS Hack 技术就可以实现。就目前而言，使用 CSS Flexbox 和 CSS Grid 布局技术就能实现。 假设你的 HTML 结构是： Header Content Main Content CSS Flexbox Layout对于 S…
【建议收藏】90%的前端都会踩的坑，你中了吗？(收录评论区的坑）
专为币圈人解答问题
评论区新增的坑 [图片] [图片] 1、父元素设置了border-radius，子元素应用了transform，并且父元素设置了overflow:hidden，但是却失效？// 给父元素设置 { position:relative; z-index:1; } 2、设置input 文本框的 placeholder 的颜色input::-webkit-input-placeholder{ color:rgba(144,147,153,1); } 3、如何设置body背景色，height:100%,不生效？同时设置html，body的高度 html,body{ height:100%； } 或 body{ height: 100vh; // 代表占屏幕1…
网上有好多的免费教程的，你自己可以看看的。html是web前端基础知识，您看一下您是否是需要这个。 [图片] [图片] 这是可以在线看的教程。 本套教程将前端学习的基础内容融汇为148节课，涵盖了HTML、CSS、HTML5和CSS3的核心技术点。通过对本教程的学习，可以帮助初学者快速上手，并完成大部分静态网页的开发。除此之外，课程涵盖 大量的CSS技巧、动画、交互效果，对传统浮动和定位的布局方式，以及CSS3中的弹性盒和响应式布局都有深入讲解。 这…
Flexbox 设计指南
Flexbox 是一个强大的新生 CSS 布局模块，完全脱离于传统的 web 开发实践。网上有很多相关的文章，大都关注于规范的细节，导致文章冗长，难懂，甚至有些晦涩。相反，对于设计师和开发者如何使用 flexbox 解决布局问题的讨论相当少：至此，这篇文章出现了。 从基础层面上来讲， flexbox 有三个特性是设计之根本。但也是在很长一段时间内单纯使用 CSS 很难或者不可能完成任务：对齐方式，排布和顺序。开始之前，需要先了解下面几个…
看完这篇8本书 + 15个免费自学网站，就不需要在看其他的了。 HTML【3】本书 + HTML【3】套视频 + HTML【5】个自学网站。 CSS【5】本书 + CSS【10】个自学网站 。 关于前端HTML&CSS所有的经典书籍和学习网站都这一篇文章了。记得点赞+收藏，以后绝对用得到 文末彩蛋整理了103本前端经典书籍的书单（其中32本是豆瓣评分8分+），是我花费一个月时间整理的，HTML 书籍一、《Head First HTML与CSS(第2版)》 豆瓣9.3分 [图片] HTML与CSS有两版…
目前为止，CSS Grid 布局是 唯一的一种二维 Web 布局技术，它相对于以往我们所接触的 Web 布局都要强大、灵活。正因为它非常强大，所以它所涉及到的知识点也是非常的多。 如果要学习 CSS Grid 布局技术的话，首先需要了解 CSS Grid 相关的技术术语： 坐标轴网格容器和网格项目网格线网格单元格网格轨道网格区域显式网格和隐式网格网格沟槽嵌套网格和子网格等等 对技术术语有了一定了解之后，就可以去了解它的基本属性的使用，分为 …
先上一张大图： [图片] 在这张图中涵盖了 CSS Flexbox 模块主要功能和知识点。简单地说，要掌握 CSS Flexbox 你需要掌握以下几个知识点： flex 和 inline-flex 的选择，虽然它们都可以改变元素的视觉盒模型格式，但两者还是有一定点差异。现在大部分同学都直 display: flex 梭哈了，其实我们应该根据视觉的模式来选择正确的姿势flex-direction ：决定 Flex 容器主轴方向flex-wrap ：决定是否换行，以及换行的方式Flex 项目在主轴和侧轴…
到目前为止，CSS 实现九宫格布局最简便的布局方法是 CSS Grid。当然除了 CSS Grid 之外，其他的 CSS 布局方法也是可以的，比如 CSS Flexbox布局。只不过，CSS Grid 之外的方法会稍微麻烦一些。 在我的小册中 ，刚好介绍了 CSS Flexbox 和 CSS Grid 两种布局技术是如何实现九宫布局的，也将九宫格布局列为经典布局之一。 [文章: 我的第一本小册：现代 Web 布局] 这里简单说一下，它们是如何实现的。 首先用下图来描述九宫格布局： [图片] 简…
路过 当下，纯CSS 搞不到系统时间。 但是可以用媒体查询 prefers-color-scheme 拿到系统主题颜色是暗还是亮，然后给对应样式。prefers-color-scheme - CSS（层叠样式表） | MDN 至于如何自动切换，就要本地靠系统设置了。 比如 Win10 下，“Windows设置 - 系统 - 显示 - 夜间模式设置”界面的“计划”设置区域开启“在指定时间内开启夜间模式”，选“从日落到日出”，或者自定时间。 或者 Mac 下 “系统偏好设置 - 通用 - 外观自…
tailwind 补全了组件化的最后一块拼图。tailwind 不是旁门左道，而是另一种思维方式。 在 React 出现之前，传统 html+css+js 的模式是纵向切分的，讲究的是表现和结构分离，也就是 html 是骨，css 是皮，js 是肌肉。没有皮和肌肉，骨架只是看起来丑一点，但是没有骨架，皮和肌肉是完全撑不起来的。业界最佳实践也是 html 中绝不可混有 js 和 css，否则就是过分耦合。
阅读全文
感谢邀请，尝试回答，如有不妥，勿喷，请拍正！ 从 W3C 的 CSS 2.0 规范上来说 Normal Flow 涵盖了三个部分的内容 BFC (Block Formatting Contexts) 、IFC (Inline Formatting Contexts) 和相对定位（Relative Positon）: [图片] 正如规范中所说，在未来的 CSS 中还会有其他的格式化上下文，比如 FFC（Flexbox Formating Contexts） 和 GFC (Grid Formatting Contexts) 等。 事实上， Normal Flow 和 *FC 等概念都是 CSS 中最基础，但又…
