css
文章平均质量分 91
伊泽瑞尔灬
静静写点东西,和大家一起学习。
展开
-
2023还不知道原子化样式你就out了
原子化样式的目标是通过将样式拆分为独立的、可复用的部分,实现更灵活、可维护和可扩展的样式代码。:原子化样式使样式表更具可读性。通过将样式属性拆分为单独的类,并根据需要组合这些类,可以快速创建各种样式组合,从而实现高度可重用性和灵活性。请注意,上述示例使用的类名是基于 Tailwind CSS 的命名规则,但其他 CSS 框架或自定义样式也可以采用类似的原子化样式的设计思想。: Atomic CSS 是一种以原子化类名为基础的 CSS 方法论,它通过将样式属性拆分成单个类名,从而提供了灵活的样式组合和复用。原创 2023-05-26 17:29:17 · 417 阅读 · 0 评论 -
px/em/rem的关系与区别
本文讲解px,em,rem之间的关系,理解了3者的关系,方便我们做不同设备间的适配。原创 2020-05-25 09:29:07 · 503 阅读 · 0 评论 -
你知道css的盒模型吗?
这是一个面试高频问题。理解css盒模型,看这篇文章就够了。本文通过代码结合图解来讲解css的几种盒模型。原创 2020-05-13 09:19:05 · 176 阅读 · 0 评论 -
你知道雪碧图吗?有哪些优缺点?
这道题实际上考的是前端性能优化的一个点。本文讲解用雪碧图来优化网站。原创 2020-05-10 21:16:31 · 524 阅读 · 0 评论 -
你知道css3的focus-within选择器吗?
介绍一个神器的伪类选择器focus-within,这个在开发中很少用到,但是它的功能强大,用好了,可以减少很多逻辑判断。原创 2020-05-09 21:33:32 · 493 阅读 · 0 评论 -
如何用css绘制三角形?
首先,我们知道用边框实现一个三角形很简单,直接上代码上图。<div class="content"> <div class="up"></div></div>.triangleTest { .content div { width: 0; height: 0; ...原创 2020-05-04 20:06:02 · 236 阅读 · 0 评论 -
css3如何实现动画?
这是一个考验面试者对css的基础知识。css实现动画主要有3种方式,第一种是:transition实现渐变动画,第二种是:transform转变动画,第三种是:animation实现自定义动画,下面具体讲一下3种动画的实现方式。transition渐变动画我们先看一下transition的属性:property:填写需要变化的css属性如:width,line-height,font...原创 2020-05-04 13:18:52 · 1460 阅读 · 0 评论 -
css选择器详解,带实例
前端css选择器种类繁多,今天做了一下整理,不过该文章只适合前端小萌新,老油条请绕道。1. 常见选择器元素选择器a,p,div,li,ul{ color:red;}/*页面上所有的a,p,li,ul都会将字体颜色设置为红色,不过优先级最低*/id选择器<p id="test">我会红</p><style> #test{ colo...原创 2018-12-01 15:21:58 · 420 阅读 · 0 评论