![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 72
瑶琴AI前端
你好,我是程序员瑶琴,好记性不如烂笔头,专注于前端开发领域,致力于分享前端完整学习路线和内容。
展开
-
作为一个前端居然不会用 flex 布局
如果项目只有一根轴线(一行),该轴线不起作用flex-start:交叉轴的起点对齐(整体与上端对齐)flex-end:与交叉轴的终点对齐(整体与底端对齐)center:与交叉轴的中点对齐(整体与中线对齐)space-between:与交叉轴两端对齐,轴线之间的间隔平均分布space-around:每根轴线两侧的间隔都相等stretch(默认值):轴线占满整个交叉轴。原创 2024-06-25 09:55:54 · 977 阅读 · 0 评论 -
看这篇就够了:一文梳理 CSS3 动画animation的用法
动画在网页设计和开发中扮演着重要角色,使用 CSS3 中的动画可以让网页有更加酷炫的效果,并吸引到用户的眼球,今天瑶琴带大家来学习或复习 CSS3 中 动画animation 的使用。原创 2024-05-15 10:37:51 · 624 阅读 · 0 评论 -
一文掌握 CSS3 transform 3D转换(附代码示例)
CSS3中的 transform 属性不仅支持 2D 转换,还支持 3D转换,transform 3D 转换能让网页实现更加酷炫的效果,能够在三维空间中操作元素,跟 2D 转换一样,有平移、旋转、缩放、倾斜 4 种转换方式。今天瑶琴带大家来学习或复习这个知识点。transform 属性有 2D 和 3D 两种转换,本篇介绍 transform 3D转换 的属性。原创 2024-05-13 09:49:10 · 754 阅读 · 0 评论 -
前端小白轻松掌握 CSS3 过渡transtion(示例拿来即用)
CSS3 过渡(transition)是一种用于平滑地控制元素状态变化的属性,使状态变化更加流畅和可视化。它通常用于制作动画效果或响应用户交互。平时的网页制作中很常用,今天瑶琴带大家来学习或复习这个知识点。原创 2024-05-14 09:41:40 · 393 阅读 · 0 评论 -
前端小白一文掌握 CSS3 2D转换transform
CSS3 中的转化 transform 属性是 CSS 内容中很重要的一个知识点,用于对元素进行变换,包括平移、旋转、缩放、倾斜等。这些变换可以在不改变元素文档流位置的情况下改变元素的外观和位置,让网页能显示更加酷炫的效果。以上就是 CSS3 中关于转换 transform2D 的知识点,上面的示例,初学者可以粘贴到 HTML 文件中并在浏览器中运行,以查看不同的转换效果。平移指移动元素的位置,可以沿着水平(X轴)和垂直(Y轴)方向进行。,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。原创 2024-05-12 11:58:43 · 419 阅读 · 0 评论 -
小白巧用这些选择器,开发网页更加高效
CSS3 引入了许多新的选择器,这些选择器增强了样式控制的能力,使得选择元素更加精确和灵活,今天瑶琴带大家来学习或复习这些选择器。新的 CSS3 选择器使得样式选择更加灵活,避免了之前只能用层层嵌套才能选择到内层元素,这块的内容需要每个初学者都要了解和会使用。:选择具有与文档URL中片段标识符匹配的id的元素。:选择紧跟在指定元素之后的同级元素。:选择父元素的倒数第n个子元素。选择紧接在另一个元素之后的元素。:选择父元素的第n个子元素。:选择父元素的第一个子元素。根据元素的属性值选择元素。原创 2024-05-11 15:28:48 · 203 阅读 · 0 评论 -
前端初学者必备:CSS3 圆角和边框的实用指南
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius:这些属性允许你分别为元素的每个角设置不同的圆角半径。CSS3 中的圆角与边框是网页开发中一定会用到的 css 属性,这在现代、美观的界面中非常有用,那如何使用这些属性来创建具有圆角和自定义边框的元素,今天瑶琴带大家来学习或复习这些两个知识点。:border-radius:此属性用于设置元素的四个角的圆角半径。原创 2024-05-10 09:56:26 · 373 阅读 · 0 评论 -
一文彻底讲透 CSS 定位(示例拿来即用)
CSS 中关于定位的内容对于小白来说需要实操会理解的更深刻,新手很容易混淆,上面关于定位的代码示例可以在编辑器中尝试。绝对定位允许元素相对于最近的已定位祖先元素进行偏移,或者如果没有已定位的祖先元素,则相对于文档的初始包含块进行偏移。在这个示例中,.container 使用相对定位,并包含一个.box,.box 也使用相对定位,通过top和left属性相对于其原始位置进行偏移。在这个示例中,.fixed-box 使用固定定位,元素会固定在浏览器视窗的指定位置,即使页面滚动也不会改变位置。原创 2024-05-09 09:26:05 · 859 阅读 · 0 评论 -
小白干货:一文梳理css文字样式
常见取值包括 none(无装饰)、underline(下划线)、overline(上划线)和 line-through(删除线)。可以取值为 left(左对齐)、right(右对齐)、center(居中对齐)或 justify(两端对齐)。可以取值为 normal(默认)、italic(斜体)或 oblique(倾斜)。:定义当文字溢出容器时的处理方式,常见取值为 ellipsis(省略号)。CSS 的文字样式是每个页面中都会用到的,今天瑶琴带大家学习文字样式的属性和属性值,这也是初学者必须要掌握的内容。原创 2024-05-08 10:52:45 · 433 阅读 · 0 评论 -
一次讲透 CSS 背景样式
background-size:定义背景图像的大小。background-position:定义背景图像的位置。background-image:定义元素的背景图像。可以指定图像的URL。CSS 的背景样式属性用于控制元素的背景,包括颜色、图像、平铺方式等,今天瑶琴带大家学习文字样式的属性和属性值,这也是初学者必须要掌握的内容。background: [背景颜色] [背景图像] [背景重复方式] [背景位置] / [背景大小] [背景附着方式];background-repeat:定义背景图像的平铺方式。原创 2024-05-07 14:46:08 · 649 阅读 · 0 评论 -
一文彻底讲透 CSS 盒模型
文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 CSS 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。在默认情况下,CSS 设置的宽度和高度属性(如 width 和 height)指的是内容区域的宽度和高度。通俗的解释 CSS 盒模型,因为css盒模型像一个盒子,把网页中的各种 html 元素包起来,将 html 元素进行封装,以便于网页布局与排版。在怪异模式下,它们设置的是整个盒子(包括边框和内边距)的宽度和高度。原创 2024-05-06 13:55:46 · 477 阅读 · 0 评论 -
CSS 选择器知识点总结
但是记得不可滥用!选择器是 CSS 中的关键部分,允许你精确地定位和样式化特定的元素或元素组。这篇文章的内容是 CSS 的选择器,这是写页面样式的第一步,知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。:没有特定性或源代码顺序的概念,但需要注意的是某些样式属性具有继承性,例如字体属性,它们可以从父元素继承到子元素。这些是 CSS 的常用选择器,将这些选择器组合起来使用,或者是嵌套使用可以改变选择器的权重。a:内联样式(在元素的 style 属性中定义的样式)的数量(权重值最高,值为1000)。原创 2024-05-05 10:55:46 · 1022 阅读 · 0 评论 -
小白入门 CSS 语法规则
文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 CSS 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。通过理解这些基本概念,可以从编写简单的样式规则开始,逐渐构建更复杂的样式,从而美化和布局网页。某些样式属性会被子元素继承,这意味着如果你在父元素上设置了某个属性,子元素通常会继承该属性。,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。的基本语法和规则,对于初学者来说,了解这些规则是有必要的。原创 2024-05-05 10:44:22 · 615 阅读 · 4 评论 -
最全 CSS 学习指南
在现在的工程化项目中,CSS 的内容不止于上面列出的,比如 CSS3,以及 sass、less,这些是怎么在项目中运用的,后面都会带大家详细学习到。学习常见的 CSS 属性和属性值,如颜色、字体、边框、背景、宽度、高度、间距等。学习如何添加背景颜色、图像、渐变和边框样式到元素中,以及如何控制它们的属性。学习如何控制元素的位置和布局,包括浮动、定位、弹性布局、网格布局等技术。学习如何设置文本的字体、大小、行高、颜色以及文字效果,如下划线、斜体等。,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。原创 2024-05-03 21:35:17 · 467 阅读 · 0 评论 -
前端初学者的 CSS 入门
CSS 是层叠样式表(Cascading Style Sheets)的缩写,是一种用于控制网页或文档的外观和布局的标记语言。从这篇文章开始,瑶琴带着大家一起学习 CSS 的知识,如果把 HTML 比喻成一棵树的枝干,那么 CSS 就是枝干上的树叶和花果,让这颗树活了起来。总之,CSS 是前端开发的关键部分,用于控制网页的外观和布局。通过学习和掌握 CSS,你能够创建精美且功能强大的网页,提供出色的用户体验。最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。原创 2024-05-03 21:31:05 · 783 阅读 · 0 评论