前言：所有内容源于基思·J·格兰特的《深入解析css》叠层层叠指的就是这一系列规则。它决定了如何解决冲突。当声明冲突时，层叠会依据三种条件解决冲突：样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。选择器优先级：哪些选择器比另一些选择器更重要。源码顺序：样式在样式表里的声明顺序。1.样式来源浏览器默认样式：优先级低你自己引入的样式
!important声明：优先级高2.优先级行内样式
转载
2023-06-16 21:37:28
85阅读
什么是CSS？CSS是层叠样式表（cascading style sheets）CSS是给html化妆的。如何使用CSS？三种方式：内联方式内部样式外部样式 <!doctype html>
<html>
<head>
<title>如何使用CSS</title>
<meta charset="utf-8
转载
2024-04-22 12:00:42
72阅读
与以前的方法相比，CSS 网格使我们能够以更高的控制力、便捷性和速度来进行布局。
转载
2022-11-29 23:21:42
134阅读
徽章 1 定义徽章 通常使用标签，添加badge类来设计徽章。 徽章可以嵌在标题中，并通过标题样式来适配其大小，因为徽章的大小是使用em单位来设计的，所以有良好的弹性。 徽章还可以作为链接或按钮的一部分来提供计数器。 提示：徽章不仅仅只能在标题、链接和按钮中添加，可以根据场景在其他元素中添加，以实现 ...
转载
2021-08-07 12:16:00
530阅读
CSS过渡是一种简单而强大的工具，用于为网页添加动态效果和交互性。通过指定要过渡的属性、时间、延迟和速度曲线，你可以创建平滑、吸引人的过渡效果。同时，也要注意性能和可访问性方面的问题，以确保你的过渡效果在所有设备和浏览器上都能正常工作。
原创
2024-07-09 10:53:18
63阅读
CSS渐变是一种强大而灵活的功能，它允许你在网页设计中创建平滑的颜色过渡效果。通过掌握线性渐变和径向渐变的基本语法和用法，你可以创建出各种令人惊叹的视觉效果
原创
2024-07-03 11:45:35
52阅读
steps()函数为CSS动画提供了一种步进的方式，使得动画可以在离散的步骤之间变化，这在许多动画场景中都非常有用。通过合理地使用steps()函数，你可以创建出更加有趣和吸引人的动画效果。
原创
2024-07-09 10:53:11
62阅读
CSS 2D变换（CSS 2D Transformations）是CSS3引入的一组功能，允许你对HTML元素进行2D空间内的移动、旋转、缩放和倾斜
原创
2024-07-03 11:46:02
70阅读
关注并将「趣谈前端」设为星标每天按时推送技术干货/优秀开源/技术思维1. css 布局方式1.1 css 2.1 CSS2.1定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与...
转载
2022-01-11 16:13:14
248阅读
文章目录前言一、基础回顾第1章 层叠、优先级和继承1.1 层叠样式表的来源选择器的优先级源码顺序！important1.2 继承1.3 特殊值1.4 简写属性第2章 相对单位二、1.2.总结 前言我目前只读了几节的内容，感觉这本书写的非常好。可以帮我理清了css渲染的逻辑，所以就想精读一下，并写成博客。一、基础回顾第1章 层叠、优先级和继承1.1 层叠css的本质就是给页面对象施加效果的一系列规
转载
2023-07-10 18:29:47
207阅读
深入理解CSS溢出overflow 一、总结 一句话总结：overflow用于对溢出内容的处理。 1、overflow有哪5个常用参数，分别是什么意思？ visible | hidden | scroll | auto | inherit visible 元素的内容在元素框之外也可见 auto 如果
转载
2018-06-21 02:02:00
205阅读
在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具备破坏流的特性。
原创
2023-02-15 11:27:45
203阅读
1.CSS介绍
HTML学习完以后，以及可以使用HTML开发网页了，但是在呈现的效果上没有那么美观，所以接下来我们要学习CSS,CSS就是可以让我们页面变得更加美观，接下来我们开始学习CSS<br>
第一步：在IDEA中创建名为08_CSS-介绍.html的文件：<br>
第二步:编写如下代码，需要注意的是style标签中书写的是css样式，我们先照着写即可<br&
原创
2023-08-01 13:31:27
114阅读
本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。 CSS 动画介绍及语法 首先，我们来简单介绍一下 CSS 动画。 最新版本的 CSS 动画由规范 -- CSS Animations Level 1 定义。 CS
原创
2022-04-30 21:37:54
213阅读
CSS混合模式（也称为CSS Blend Modes）是一种强大的功能，它允许开发者在CSS中控制元素如何与它们的背景或其他元素混合。这些模式类似于图像编辑软件（如Photoshop）中的混合模式，使得开发者能够创建出复杂而富有表现力的视觉效果，而无需依赖额外的图像或复杂的JavaScript代码。
原创
2024-09-10 09:36:25
54阅读
前言 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具备破坏流的特性。 float设计的初衷 很多新手在布局的时候，总喜欢用float
转载
2020-06-01 12:01:00
159阅读
2评论
CSS定位是用来控制元素在页面上的位置和排列方式的技术。普通流、浮动流、定位流，其中定位流包括相对定位、绝
原创
精选
2023-10-15 12:33:28
469阅读
1. background-color用于设置元素的背景颜色。支持颜色关键字、RGB/RGBA值、十六进制值。 .box { background-color: #ffffff; /* 白色背景 */ background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 ...
CSS Grid 布局（网格布局）是 CSS 中一个非常强大和灵活的布局系统，它旨在通过创建行和列来简化复杂网页的设计。Grid 布局非常适合创建复杂的页面布局，如网页的头部、导航栏、内容区域和页脚等。下面将深入介绍 CSS Grid 布局的一些关键概念和用法。
原创
2024-07-09 10:52:39
84阅读
