![](https://img-blog.csdnimg.cn/20210610145548891.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS 笔记
文章平均质量分 80
CSS 各种使用教程,教会你各种骚操作玩法
一颗不甘坠落的流星
前端专栏博主,目标是归纳前端所需要各种技术的使用,不是在补充、就是在重写博客的路上,一步步完善中。
展开
-
【CSS】间隔 gap 属性(适用于网格、弹性、多列布局)
CSS 中间隔 gap 属性(适用于网格、弹性、多列布局)原创 2024-04-19 16:11:20 · 1554 阅读 · 0 评论 -
【CSS】min 和 max 函数(设置最大最小值)
ccs 之 min 和 max 函数,可用来动态设置最大最小值原创 2023-11-21 12:00:44 · 2576 阅读 · 0 评论 -
【CSS】各百分比透明度 opacity 对应的 16 进制颜色值(例如:#FFFFFF80)
CSS 各百分比透明度 opacity 对应的 16 进制颜色值(例如:#FFFFFF80)原创 2023-11-20 18:11:29 · 1559 阅读 · 0 评论 -
【CSS】禁用元素鼠标事件(例如实现元素禁用效果)
禁用元素鼠标事件:如禁用按钮点击事件、a标签跳转事件、甚至可以是div元素的各种鼠标事件原创 2023-08-15 10:28:23 · 1029 阅读 · 0 评论 -
【CSS】var 函数(可使用变量)
CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色。原创 2023-07-20 11:19:23 · 998 阅读 · 0 评论 -
【CSS】calc 函数(动态计算长度值)
文章目录基本用法基本用法calc() 函数用于动态计算长度值。需要注意的是: 1. 运算符前后都需要保留一个空格,例如: width: calc(100% - 10px);2. 任何长度值都可以使用calc()函数进行计算;3. calc()函数支持 "+", "-", "*", "/" 运算;4. calc()函数使用标准的数学运算优先级规则;示例:<!DOCTYPE html><html><head><meta charset=原创 2022-04-24 09:43:45 · 1098 阅读 · 0 评论 -
【CSS】选择器汇总
文章目录一、选择器权重二、基础选择器2.1、通配符(*)2.2、标签选择器(h1)2.3、 id选择器(#)2.4、class选择器(.)三、层级选择器3.1、群组选择器(E,F)3.1、包含选择器(E F)3.1、子元素选择器(E>F)3.1、相邻兄弟选择器(E+F)3.1、 通用选择器(E~F)三、 属性选择器3.1、 [attribute]选择器3.2、 [attribute=value]选择器3.3、 [attribute~=value]选择器3.4、 [attribute|=value]选择原创 2022-04-02 16:22:25 · 1772 阅读 · 0 评论 -
【CSS】float 浮动 和 clear 清除浮动
文章目录1. float (浮动)2. clear(清除浮动)2.1 非浮动元素使用2.2 在浮动元素使用2.3 万能清除浮动法1. float (浮动)float 属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。浮动元素会从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。float 语法:/* 默认为 none 属性值 */{ float : left / right / none / inherit;}参数说明:-原创 2021-12-30 16:45:33 · 997 阅读 · 0 评论 -
【CSS】position 定位 和 z-index 层级
position概述相对定位:relative绝对定位:absolute固定定位:fixed粘性定位:sticky概述position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。语法: position:static/absolute/relative/fixed/sticky;说明:static(默认值):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父原创 2021-12-28 19:48:27 · 2636 阅读 · 0 评论 -
【CSS3】多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。使用媒体查询是一种流行的技术,可以向台式机、笔记本电脑、平板电脑和手机(例如 iPhone 和 Android 手机)提供定制的样式表。原创 2021-01-23 17:20:24 · 577 阅读 · 0 评论 -
【CSS3】column 多列用法
css column 多列的使用用法及解析原创 2021-01-23 17:08:42 · 371 阅读 · 0 评论 -
【CSS】grid 网格用法
css grid 网格布局使用用法及解析原创 2021-01-07 20:24:41 · 494 阅读 · 0 评论 -
【CSS3】flex 弹性盒用法
弹性布局flex是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。原创 2021-01-04 20:02:03 · 1058 阅读 · 0 评论 -
【CSS】实现元素水平垂直居中布局(七种方法)
css水平垂直居中六大方法原创 2021-01-03 20:44:36 · 1968 阅读 · 0 评论 -
【CSS3】2D 和 3D 转换用法
转换就是可以对元素进行移动、缩放、转动、拉长或拉伸,本文列举了 2d 和 3d 转换方法的教程和案例原创 2021-01-03 15:24:34 · 1150 阅读 · 0 评论 -
【CSS3】渐变、过渡和动画用法
css 渐变、过渡、动画属性解析及使用方法和案例原创 2020-12-30 21:12:19 · 3185 阅读 · 1 评论 -
【CSS】锚点链接的应用
1. position定位属性语法:position:static/absolute/relative/fixed/sticky;说明:static(默认值):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。忽略任何top、bottom、left、right声明absolute(绝对定位):相对于父级元素的绝对定位,浮出、脱离文档流,不占据空间,就是我们所说的层,其位置相对于最近的以定位父元素而言的位置,若父元素都没有定位,则以原创 2020-12-26 10:17:49 · 454 阅读 · 2 评论 -
【CSS】各属性用法汇总(必备收藏)
本文汇聚了几十种 css 常用属性的使用方法教程案例,让你轻松搞定 css 设置原创 2020-12-18 09:23:34 · 5216 阅读 · 4 评论 -
【CSS】盒模型简解
标准盒模型和怪异盒模型的概念及其使用方法原创 2020-12-19 17:02:42 · 1556 阅读 · 0 评论 -
【CSS】长度单位值
视口(Viewport)=浏览器窗口的尺寸。如果视口宽50cm,则1vw=0.5cm。但是,如果已知输出介质,则可以使用它们,例如用于打印布局(printlayout)。绝对长度单位是固定的,用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。提示em和rem单元可用于创建完美的可扩展布局!不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。...原创 2020-12-24 13:24:48 · 267 阅读 · 0 评论 -
【CSS】基础属性使用
宽度、高度、颜色的用法原创 2020-12-24 13:19:42 · 353 阅读 · 0 评论 -
【CSS】基本介绍
1.css的介绍层叠样式表(英文全称:Casscading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以修饰静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化及个性设置。CSS 能够对网页中元素位置的排版进行像素级精准控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。2.css基础语法...原创 2020-12-17 16:03:43 · 428 阅读 · 1 评论