在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 这里的遮罩图…

关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。 最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖…

今天 github 上看见以前的朋友总结的一片前端知识点的文章汇总，感觉收集的很全面，分享给大家，希望能够给大家带来帮助。

网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 +float属性。针对于某些特殊布局就显得非常不方便，例如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以…

如今编程界有一种令人担忧的趋势——那些 “真正的” 程序员对 CSS 嗤之以鼻。 他们指出，这只是一种声明性语言，而不是一种功能齐全的编程语言。 啧啧啧，它甚至不是一种脚本语言。 这可能是实话，但这并不意味着 CSS 不强大。 它的强大体现在与传统语言不同的地方。 以 CSS …

无论你是一个想要学习CSS布局的新手，还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者，这篇指南都能帮你全面了解如今CSS布局发展的现状。 在过去的许多年中，正如翻天覆地的前端开发一般，CSS布局也产生了巨大的变化。现在我们有需要可选的CSS布局方式来开发…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

4. 完整代码：元素宽度已知，所有元素都在一个容器 本文由创宇前端作者授权发布，版权属于作者，创宇前端出品。文章链接：https://knownsec-fed.com/2018-12-13-css-lie-biao-xiang-bu-ju-ji-qiao/ 想要订阅更多来自知道…

此方法的原理说将左右两侧进行定位，让其脱离文档流。 中心区域自然流动到它们下面，再为其设置margin值 此方法最常见，三者相互关联，最稳健。 首先需要将中间部分放再最前面，外面用一层容器包裹。外层容器让其占满整个屏幕100%， 左中右三者都float: left。 将cent…