在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。在这篇文章中，将带领大家了解Jake Archibald在今年年初提出的新的CSS属性object-view-box。

解决业务代码的 !important 问题。为什么业务代码需要用 !important 解决问题？因为 css 优先级由文件申明顺序有关，而现在大量业务使用动态插入 css 的方案

表单自动填充是个好功能，因为可以省去用户自己输入的麻烦。比方说一个 name 属性值是 email 的输入框，聚焦点击后，可能就出现下图所示的邮箱列表：

Flexbox（弹性盒子）是 CSS3 中引入的一种强大且兼容性好的布局方法。使用 flexbox，可以很容易地处理好页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。

虽然我们生活在一个宽带无处不在、4/5G 几乎全覆盖的时代，但网站加载缓慢还是常态，就算我们打开一个以文本为中心的新闻网站，都可能需要至少 30 秒才能开始阅读。毕竟在内容膨胀时代，一张照片就能轻易超过 1MB 大小

在使用mouseout​时还需要考虑 dom​ 嵌套结构，因为这些事件在父级 -> 子级的过程中仍然会触发，总之，细节会非常多，很容易误触发。

以上几个方案都可以实现一定程度上的换肤效果,但是如果是一些基础性的换肤,比如网站的背景样式,某个按钮的样式,某块内容区域的样式等等这种局部的换肤,我们能不能直接用css来实现呢?答案是可以的,接下来我们就来看纯看css如何实现网站换肤

虽然开发工具早已经从 preprocessor 进化到了 styled component 甚至是 functional css，但在我看来新的工具并没有让我们的样式代码写的更好，只是更快——也可能会让代码坏的更快。工具的繁荣并没有让那些导致代码难以维护的根本问题烟消云散

随着企业数字化转型的深入，越来越多的业务应用系统被部署到互联网平台上，这吸引了网络犯罪团伙的强烈关注，以Web攻击为代表的应用层安全威胁开始凸显。通过利用网站系统和Web服务程序的安全漏洞

响应式的概念覆盖了自适应，但响应式包含的东西更多，响应式的布局可以根据屏幕的大小自动调整页面的展示方式；自适应有一个致命缺点：如果屏幕尺寸太小

过去CSS 有 4 个你必须知道的识别视窗口的单位，并且它们能够很好地处理每个可以想象的用例。然而，随着时间的推移和时代的变化，这 4 种视口单位现在不足以解决所有用例。

我们知道，简单的class名称容易造成css命名重复，比如你定义一个class；如果别人刚好也定义了一个className：.main，你的float:left就会影响到它。