前言： 这一篇我们主要探讨“定位”和 BFC 是怎样让“盒子”动起来的。 学习方法依然是：打开 JS Bin，拷贝代码运行查看效果，然后搞定每一行代码的前世今生。 “定位”就是通过设置 position 属性的值来脱离正常的文档流。 当你设置为绝对定位后，文档流上的其他元素就看…

《CSS揭秘》主要是介绍了使用CSS的技巧，通过47个案例来灵活的使用CSS进行实现，同时在实现过程中注重CSS代码的灵活性与健壮性。通过阅读这本书有利于我们编写高质量的CSS代码以及打破使用CSS时的固定思维，能够更加灵活的使用CSS。 《CSS揭秘》中的所有案例代码均上传到…

作为一名Web开发者，CSS是必备技能之一，我一直以为自己对CSS的掌握已经够用了，直到读Lea Verou的《CSS揭秘》时，我发现自己充其量就算个会打CS的选手，书中针对我们常见的网页设计难题从不同的角度提出了多种实用又优雅的解决方案，在这里强烈的推荐给每一位从事前端相关的…

现在越来越多的CSS框架，比如Bootstrap，flat UI等等。当我们使用这些UI框架时，由于审美不一样或某些爱好，我们或多或少会去修改一些样式，当然，直接修改源文件是一个方法，但这是一个笨方法，并不推荐。这时，我们就需要自己写一些样式去覆盖，有时你会发现无效或只是一部分…

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没…

阅前必看：本文总结了各种常见的布局实现,每个方法的优缺点分析往后在github上陆续补充。还有就是这篇文章没提到的其他布局，待本人后续想到或遇到定会在github上及时更新。 由于文章篇幅较长,排版有些混乱,希望别介意哈。掘金PC端是会自动生成目录的,为了方便移动端阅读，还特意…

github地址： https://github.com/sxzy/myCSS/issues/4 ，喜欢可以关注哦。 CSS中涉及到的百分数有很多，所以有时候多起来的话，概念也就多了，所以也会有些混淆的地方，这里就做一个简单的总结吧，用一张脑图汇总总结了一下。 百分数.png …

一、CSS写自适应大小的正方形代码：效果图：原理：元素的padding的百分比值四个值均根据当前元素的宽度来计算的padding只能取top或者bottom，自适应正方形其值要和宽一致，当然其他不同比

css权重很多人都听过，也了解一些，但是很多人对具体的规则或者说再深如一些关于css权重的问题，可能会不那么清楚。日常开发中，或多或少都会遇到css规则不生效的问题，为了让我们能够减少调试css规则的时间，深刻理解css权重，就十分关键了。如果喜欢的话可以点波赞/关注，支持一下…