最近研究各大网站的font-family字体设置，发现每个网站的默认值都不相同，甚至一些大网站也犯了很明显的错误，说明字体还是有很大学问的，值的我们好好研究。 不同的操作系统、不同浏览器下内嵌的默认字体是不同的，错误的字体设置会导致页面在不同环境渲染的混乱，选择一套合适的字体是…

有没有经常遇到一些样式每次写都要用百度呢？我收集了一些我平时经常要用到的但又总是记不住的样式。有错误的地方欢迎指正。转载请注明出处。一、设置input的placeholder的字体样式设置input聚

在前端的开发的过程中，和前端合作最紧密的职位应该就是设计师了。在业务流程中，设计师将自己的交互稿、视觉稿以 1px 以内误差的期望交给开发者。但在这个过程中有几个不方便的地方： 设计稿可拆解为布局、图案、文字、颜色等。其中布局、文字以及颜色这三者的样式编码需要花费前端开发者大量…

以下技巧的具体原理和解释请支持张老师的《CSS世界》，在这里不做展开。 一部分没录入的技巧原因是部分属性将被标准废弃，如：clip。还有一部分是因为个人觉得兼容性不好，而且CSS3的一些特性可以弥补，比如text-align:justify;，完全可以用flex布局实现。 应网…

关于以下内容，我们假设结构层的变更是不允许的。 我们也尽量不去添加额外的HTML,以做到样式层与结构层的分离，如若实在没有其他的可能性，才退而求其次来增加额外的HTML。 制作一个自适应的椭圆是形状篇中最简单的图形了，简直不能再简单了。 众所周知，制作与圆相关的图形，用到的属性…

animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在项目中引用。 如果想要设置其他的延时和加速效果，请在自己的代码中进行设置。

周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 …

译者： 国内大家都去搞 JS 去了，可以看到我们有可以与 REACT 抗衡的 VUE。却显见有类似 CSS-in-js, OOCSS，BEM，Atomic CSS ... 的 CSS 解决方案出现？这是为什么呢？ 随着 Facebook 和 Twitter 最近的产品技术方案的…

如果两个或多个元素很接近，那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时，用户可以根据它们之间的空间大小来决定它们之间的关系。没有间距，用户将很难浏览页面并知道哪些内容相关而哪些内容无关。 在本文中，我将介绍有关CSS中的间距，实现此间距的不同方法以及何时使…