上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 在布局中，对于每块功能的 DOM 结构，我们一般使用一个带有 wrapper 类元素把它包裹起来，让代码或者网页内容更易于阅读。...为什么页面上 wrapper 有必要的 通过多加一层 wrapper 布局，有很多好处： 使内容更具可读性。 没有多加一层 wrapper，文本和图像之类的内容就可以拉伸以占据整个屏幕宽度。...在每个项目中，我都准备了一组用于margin和padding的实用工具类，在必要时使用它们，考虑下图。 ?...important; } 这样，wrapper 的 CSS保持原样，并且使用附加的 CSS 类添加了间距。 现在，你可能会问，为什么可以在一个页面上添加多个wrapper？...通过利用 CSS 变量，我们可以创建一个更现代的wrapper，它拥有极大的灵活性。
，还有就是伪元素到底是什么，我们应该怎么优雅的使用，那为什么写伪类呢？...因为我发现竟然有人把伪类和伪元素一直看成一种东西，这个我是接受不了的，所以一起说一下。...伪类介绍 首先介绍一下什么是伪类：伪类其实我们经常用的到，只是我们自己不会刻意的说这个是伪类这样的一个东西，我下面简单的举个例子就明白了怎么回事 <!...那么上面:这个符号连接的就是伪类，帮助我们做一些样式用的，本质是一个css 伪元素介绍 首先要明白的是伪元素是html标签本身的属性，和css没有关系，只是我们使用css样式将这个东西展现了出来，这是一点...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
在本文中，通过熟悉的示例来解释什么是 BFC。然后说明 display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。...块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。...float示例 如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。 ?... I am text 带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。 ?...带有 float 类的项 我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。 .text { overflow: auto; } ?
每个属性都有一个小节，解释了它的作用、语法和用法示例。 文章还包含了一些有关CSS开发的最佳实践建议，例如使用外部样式表、避免滥用!important规则和选择器的性能考虑等。...对于这个演示，我使用了一个SVG波浪图像，我是通过这个网站获取的。...Other possible values are above | left | right */ -webkit-box-reflect: below 20px; } 此外，我希望它淡化一点...Masks 可以在CSS中使用图像遮罩。...地址：https://www.w3schools.com/cssref/css3_pr_filter.php Backdrop effects 我们可以使用backdrop-filter为图像背后的区域添加漂亮的滤镜效果
这类情况包括下列几种情况: 1、半透明图像、背景图像、或者 border-image(比如老式的金质像框); 2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip...从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？ ? 可以很明显的看出区别，为什么会这样呢？...在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分... 我是内容 </div...总结 这些CSS都是非常实用的，有兴趣的可以收藏起来，没准以后能用上。然后drop-shadow就不用去纠结IE能不能用了，因为我们已经放弃它了。
在本文中，通过熟悉的示例来解释什么是 BFC。然后说明 display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。...块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。...如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。 ?... I am text 带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。 ?...理解浏览器如何布置网页是非常基础的。 虽然有时看起来无关紧要，但是这些小知识可以加快创建和调试 CSS 布局所需的时间。 你的点赞是我持续分享好东西的动力，欢迎点赞！
我已经使用CSS多年了，但直到最近我才深入研究了一下CSS选择器。 我为什么要这样做呢？...所以我就对CSS选择器进行了深入的回顾，并且遇到了一些有趣的，对我来说是新的或者以前不知道的一些用法。 我还发现了一些很酷的新选择器，将来可用但尚未被广泛支持。 组合选择器 让我们从熟悉的领域开始。...一个实用的例子，突出显示没有 alt 属性的图像。 此属性是可访问性所必需的，因此对于SEO而言，确保所有图像元素都包含此属性非常重要。...例如，你可能想知道为什么 里只有“And so on…”这段文本是蓝色的，实际上 里文本都本应该是蓝色的，只是其他元素被不同的选择器覆盖了颜色，才造成只有一段文本是蓝色...(https://www.w3.org/Style/CSS/specs.en.html) Can I Use (https://caniuse.com) 结语 我希望这篇文章对你有用，我也会继续探索CSS
究其原因 为什么子组件的字体颜色不是黑色确是白色? ?...这时候渲染出样式为黑色，然后接着向上寻找发现了.parent .component发现存在这个CSS规则，所以这时候颜色变成了白色 如何变成正确的颜色 问题找到了，是因为样式覆盖了，那么如何解决这个问题了...这里我们采用了CSS Modules方案。 什么是CSS Modules? 把CSS划分模块，自动为类名后面生成一个hash值保证类名全局唯一。...child 配置完成之后发现样式类名变成了hash值，这样即保证了类名的唯一不会存在覆盖的问题 ?...最后 文章首发于：为什么我的样式不起作用？ 参考：浏览器渲染原理与过程 参考：CSS选择器从右向左的匹配规则 DEMO地址
3.在CSS中定义实用工具来干你的CSS 我们将’utilities’定义为一个CSS类，实际上它只用来做一件特定的事情，而不是封装整个元素。...实用程序背后的理念是，你认为你可能会不止一次地使用它们。如果它是一次性样式，或者如果你认为组合样式会经常使用，那么可能它作为CSS类将可以更好地工作。...这真的是BEM最棒的地方，也是为什么我建议使用它的原因。 6.只使用!inportant作为最后的手段 在一个类上放上!...这对于移动设备也是一个痛苦的根源。例如，如果你希望手机屏幕显示某些内容，则必须使用另一个!important类来重写.hide类以显示它。 我一直找不到使用!...最后，我要向你建议的最重要的事情是，你得关注你为前端编写的代码，掌握它，并持之以恒地改进它（统计提高自己！）。 我相信这是长期可维护的应用程序与难以处理的应用程序之间最大的区别因素之一。
所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？ 在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们开始吧。...在我知道::marker伪元素之前，如果要重置小圆圈列表样式，我们一般使用伪类::before或::after伪元素： ul { list-style: none; padding: 0...object-fit属性是相当神奇且有用的。 当我第一次了解它时，它改变了很多事情，使我作为前端开发人员的生活更加轻松。 最近，我正在研究显示徽标网格的部分。...通过使用object-fit:contain，我可以控制徽标的width和height，并强制将图像包含在定义的宽度和高度中。??...} 通过定义width和height，强制限定图像的大小，这是一个巨大的好处。
/home 本文探讨了为什么人们在CSS方面表现不佳。...但对其他人来说，CSS 更像是把手伸进《沙丘》中的痛苦之箱，而某个产品经理却拿着匕首抵着他们的脖子，让他们不敢把手抽出来。 有几个原因可以解释为什么科技公司在 CSS 方面一直举步维艰。...就是这张卡片看起来如何）转移到标记中的类名上，而不是在我们的CSS中添加新的类名。...你永远不会用到每一种颜色，如果你提供了这样的选项，你最终会得到一些缺乏足够对比度的颜色组合。 这就是为什么我使用单独的标记层来定义上下文。...我们可以使用 width >= 图像 当设计师在大屏幕和小屏幕之间采用完全不同的设计时，我有点抓狂。我会尽我所能让它发挥作用。 在这里，我们的图像会从一个小圆圈变成大屏幕上的全尺寸图像。
作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？...在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们开始吧。 在CSS网格中使用Place-Items 我们只需使用两行 CSS 代码就可以将元素水平和垂直居中。...object-fit 属性 object-fit属性是相当神奇且有用的。 当我第一次了解它时，它改变了很多事情，使我作为前端开发人员的生活更加轻松。 最近，我正在研究显示徽标网格的部分。...通过使用object-fit:contain，我可以控制徽标的width和height，并强制将图像包含在定义的宽度和高度中。??...} 通过定义width和height，强制限定图像的大小，这是一个巨大的好处。
它简单到只有一个CSS文件，但提供了一整套功能强大的组件框架。让人直呼NB! 接下来，让我们一起来看看！ 简介 先来看看官方得介绍。...重点在responsive(响应式的)。 Bulma是一个现代的、轻量级的、易自定义的 CSS UI 框架。它采用Flexbox布局，使构建响应式网页设计变得简单快捷。...="column">5 ps:就是纯粹的html，加上class类名就好！...基本覆盖了常用UI框架下的全部组件！ 表单 表格 进度条 目录 导航 还有诸如面包屑、下拉菜单、卡片、骨架、图片、弹窗... 太多了！我就不一一展示了。...它是一个移动优先的框架，同时也能轻松搭建适配不同屏幕的界面。 开发者只需要在 HTML 代码上调用CSS类即可。
由于我不是这方面的专家，所以我不会去深入探讨它的利弊。我只是希望能帮助你了解它的大致内容。...它通过 Utility-First 的理念来解决 CSS 的一些缺点，通过抽象出一组类名 -> 原子功能的集合，来避免你为每个 div 都写一个专有的 class，然后整个网站重复写很多重复的样式。...ssh 注：这里原作者没有深入介绍，为什么说是一套命名约定呢而不是生成一些定死的 CSS 呢？...我看到一些用户反馈说，Tailwind 提供的类名能覆盖他们 90% - 95% 的需求。这个覆盖面似乎已经足够广了，并不需要经常写一次性的 CSS 了。...此时，你可能想知道为什么要使用原子 CSS 而不是 Tailwind CSS?强制执行原子 CSS 规则的一个规则，一个类名，有什么好处?你最终会得到更大的 html 标签和更烦人的命名约定吗?
由于我不是这方面的专家，所以我不会去深入探讨它的利弊。我只是希望能帮助你了解它的大致内容。...它通过 Utility-First 的理念来解决 CSS 的一些缺点，通过抽象出一组类名 -> 原子功能的集合，来避免你为每个 div 都写一个专有的 class，然后整个网站重复写很多重复的样式。...通过一个配置文件，你可以为你的网站生成一套专属的实用工具 CSS。 ssh 注：这里原作者没有深入介绍，为什么说是一套命名约定呢而不是生成一些定死的 CSS 呢？...我看到一些用户反馈说，Tailwind 提供的类名能覆盖他们 90% - 95% 的需求。这个覆盖面似乎已经足够广了，并不需要经常写一次性的 CSS 了。...此时，你可能想知道为什么要使用原子 CSS 而不是 Tailwind CSS?强制执行原子 CSS 规则的一个规则，一个类名，有什么好处?你最终会得到更大的 html 标签和更烦人的命名约定吗?
但问题是，lang 属性不是应用在 元素上，而是应用在它的父类上。...CSS属性 好了，选择器已经涵盖了。让我们来谈谈我们希望应用到与这些选择器相匹配的元素的样式。...预定义的计数器样式可以使用 list-style-type 属性，它涵盖了从 afar 到 urdu 的174个数字系统。你可以在MDN中查看完整的列表。...实现，因为为什么不）。...然而，通过了解每种技术背后的机制、它的优点和缺点，并了解我们为什么选择某种方式来做事情，我们需要做出明智的决定，以确定哪种方法最适合我们的环境。
以下是你应该讨厌 Tailwind CSS 的主要原因： 它失去了 HTML 和 CSS 的语义 它在你的 HTML 中大量添加类 它不具有可扩展性和可重用性 它生成的 CSS 文件庞大，影响性能 它只适合那些不想理解和学习...Used Link Reader 以下是文章的翻译和润色： 为什么讨厌 Tailwind CSS 的前六大原因 Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架，声称可以帮助你更快...它使你的 HTML 充斥着大量的类 Tailwind CSS 的主要批评之一是它迫使你编写充斥着数十个实用程序类的 HTML，使其难以阅读和维护。...2 px-4 rounded"> 点击我 与此相比，在纯 CSS 中，你可以使用单个类名并在单独的文件中定义样式： 点击我...Tailwind CSS 附带了数千个实用程序类，涵盖了几乎所有可能的样式变体。然而，这些类中的大多数在你的项目中从未使用过，它们只是为你的 CSS 文件增加了不必要的膨胀。
Bootstrap不仅对网页开发的新手有帮助。通过阅读本书，你也将见证Bootstrap如何成为专业程序员的福音。 Bootstrap，它为什么而存在？...想象一下，你设计了一个网站，它拥有引人注目的导航条、时髦的按钮、漂亮的排版、文本和图像的占位符、大的图片滚动条…然而，你不是一个前端开发专家。...所有必要的CSS类和JavaScript代码，都已经包含在Bootstrap包内。例如，在链接元素() 上使用btn类，它将看起来像一个按钮，使用btn-primary可以把链接显示成暗蓝色按钮。...它完全重写了Bootstrap程序库，并成为了一个响应性的框架。它的组件兼容各种设备，包括移动设备、平板电脑和桌面设备，以及许多新的CSS和JavaScript插件。...使用CSS自定义Bootstrap 这种类型的定制通常被称为覆盖默认的CSS。我们实际上用我们自己的自定义值覆盖了一些Bootstrap的CSS属性。
在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。...它允许我们裁剪或调整被替换的HTML元素，就像一个 或 问题 在下面的例子中，我们有一个需要裁剪的图像。请注意，我们只想要该图像的特定部分。...我处理的图像大小为 1194 × 1194 px. img { aspect-ratio: 1; width: 300px; } 使用上述CSS，图片的渲染尺寸将是 300×300px。...: img { aspect-ratio: 1; width: 300px; object-view-box: inset(25% 20% 15% 0%); } 以下是上述内容的背后的样子...根据我的测试，过渡或动画不能与object-view-box工作。 我们也可以用一个负的 inset 值来缩小。 想象一下，这对于能够缩放图像是多么有用，而不需要用一个额外的元素来包装它。
最近在开发个人博客的时候，在网上学到了一种CSS特效---毛玻璃 感觉还是比较实用下面将这种特效分享给大家。...如下图，我的后台登录界面表单部分就是毛玻璃效果 有时候这种特效很有用，可以达到一种朦胧的效果，接下来我们来看看如何实现它 图片 首先定义布局 <!...background-repeat:no-repeat; background-attachment:fixed; } background-attachment:fixed用于固定背景图像...，想实现毛玻璃效果必须添加这个属性 效果如下： 图片 接下来添加毛玻璃特效 通过伪类元素实现 .box::before{ content:''; position:absolute;...，设置因为毛玻璃效果覆盖了box的其他元素，我们改变下z-index属性即可 优化一下 input, button{ z-index:1; color:white; position
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
