你未必知道的49个CSS知识点

最新推荐文章于 2025-04-13 00:14:51 发布
最新推荐文章于 2025-04-13 00:14:51 发布
阅读量112 收藏
点赞数
原文链接：https://my.oschina.net/jack088/blog/3089902
版权
本文深入探讨CSS布局的各种高级技巧，包括但不限于负边距的特殊效果、BFC的应用、flex布局的高级特性、输入框宽度控制、定位特性的巧妙运用、颜色对比度的重要性、动画方向的选择、逐帧动画的实现等，旨在帮助读者掌握CSS的精髓。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

01.【负边距】?负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

02.【shape-outside】❤不要自以为是了。你以为自己是方的，在别人眼里你却是圆的

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

03.【BFC应用】?BFC应用之阻止外边距合并（margin collapsing）

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

04.【BFC应用】?BFC应用之消除浮动的影响

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

05.【flex不为认知的特性之一】?flex布局下margin:auto的神奇用法

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

06.【flex不为认知的特性之二】?flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

07.【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外，其默认宽度取决于size特性的值

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

08.【定位特性】?绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

09.【层叠上下文】?层叠上下文：小辈就是小辈，再厉害也只是个小辈

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

10.【粘性定位】?position:sticky，粘性定位要起作用，需要设置最后滞留位置。chrome有bug，firefox完美

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

11.【相邻兄弟选择器】?相邻兄弟选择器之常用场景

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

12.【模态框】?要使模态框背景透明，用rgba是一种简单方式

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

13.【三角形】?css绘制三角形的原理

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

14.【table布局】?display:table实现多列等高布局

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

15.【颜色对比度】❣蓝底红字，由于颜色对比度比较低，故而看不清，因此不是好的配色方案?

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

16.【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

17.【动画方向】?动画方向可以选择alternate，去回交替进行

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

18.【线性渐变应用】?css绘制彩带的原理

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

19.【隐藏文本】?隐藏文字内容的两种办法

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

20.【居中】?实现居中的一种简单方式

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

21.【角向渐变】?新的渐变：角向渐变。可以用来实现饼图

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

22.【背景位置百分比】?background-position百分比的正确理解方式：图片自身的百分比位置与容器同样的百分比位置重合

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

23.【背景重复新值】?background-repeat新属性值：round和space。前者表示凑个整，后者表示留点缝

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

24.【背景附着】?background-attachment指定背景如何附着在容器上，注意其属性值local和fixed的使用

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

25.【动画延时】?动画添加延迟时间可以使步调不一致

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

26.【outline使用】?可以使用outline来描边，不占地方，它甚至可以在里面

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

27【背景定位】?当固定背景不随元素滚动时，背景定位是相对于视口的

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

28【tab-size】?浏览器默认显示tab为8个空格，tab-size可以指定空格长度

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

29【动画暂停】?CSS动画其实是可以暂停的

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

30【object-fit】?图片在指定尺寸后，可以设置object-fit为contain或cover保持比例

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

31【鼠标状态】?按钮禁用时，不要忘了设置鼠标状态

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

32【背景虚化】?使用CSS滤镜实现背景虚化

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

33【fill-available】?设置宽度为fill-available，可以使inline-block像block那样填充整个空间

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

34【fit-content】?设置宽度为fit-content，可以使block像inline-block那样实现收缩宽度包裹内容的效果

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

35【自定义属性】?CSS自定义属性的简单使用

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

36【min-content/max-content】?可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

37【进度条】?使用渐变，一个div实现进度条

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

38【打印】?可以在打印网页时，设置page相关属性。比如page-break-before属性来表示是否需要另起新页

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

39【逐帧动画】?利用CSS精灵实现逐帧动画

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

40【resize】?普通元素也可以像textarea那样resize

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

41【面包屑】?使用before伪元素实现面包屑

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

42【sticky footer】?使用grid布局实现sticky footer

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

43【动画填充状态】?CSS可以设置动画开始前和结束时所保持的状态

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

44【动画负延迟】?CSS动画可以设置延迟时间为负数，表示动画仿佛开始前就已经运行过了那么长时间

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

45【过渡】?爱的魔力转圈圈

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

46【动画案例】?水波效果原理

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

47【动画案例】?CSS弹球动画效果的原理

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

48【outline】?outline属性的妙用

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

49【grid】?火狐浏览器grid布局检测器

640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

转载于:https://my.oschina.net/jack088/blog/3089902

chonglvpu2883
关注
Python使用os模块、Try语句、pathlib模块判断文件
Python学习笔记
09-02 1717
通常在读写文件之前，需要判断文件或目录是否存在，不然某些处理方法可能会使程序出错。所以最好在做任何操作之前，先判断文件是否存在。 这里将介绍三种判断文件或文件夹是否存在的方法，分别使用os模块、Try语句、pathlib模块。 1.使用os模块 os模块中的os.path.exists()方法用于检验文件是否存在。 判断文件是否存在 在学习过程中有什么不懂得可以加我的 python学习交流扣扣q...
Python判断文件或目录是否存在（exists）、判断是否为目录（文件夹）、删除、创建目录（文件夹），创建临时文件tempfile
qq_39839807的博客
02-06 1390
在 Python 中判断文件或目录（路径）是否存在是十分方便的，os.path.exists 就可以搞定，但需要进一步判断该路径是否是目录（文件夹），如果不存在，则创建目录。 代码示例： import os test_path = './test' # 判断路径是否存在 if os.path.exists(test_path): # 判断此路径是否为目录 if os.path.isdir(t...
python判断文件或者目录是否存在
年少的勇气已经用完，剩下的就是三思而后行
04-27 1345
OS import os if os.path.exists('filename.txt'): # 文件或目录存在时，做什么事 else: # 不存在时做什么事 if os.path.isfile('filename.txt'): # 是文件做什么事 if os.path.isdir('filename'): # 是目录做什么事 pathlib from pathlib import Path the_file = Path('filename.txt') if
python 正确检查文件是否存在
最新发布
qq_37746712的博客
04-13 955
raise FileNotFoundError(f"路径 {file_path} 不存在")print(f"路径 {file_path} 不存在或不是文件")print(f"路径 {file_path} 不是文件")print(f"文件 {file_path} 不存在")print(f"文件 {file_path} 已存在")print(f"文件 {file_path} 不存在")print(f"路径 {file_path} 不存在")print(f"文件 {file_path} 有效")
python判断文件目录是否存在
weixin_43010385的博客
07-27 4586
目录1、使用os模块2、判断文件读写属性3、使用Try语句4、使用pathlib模块正文通常在读写文件之前，需要判断文件或目录是否存在，不然某些处理方法可能会使程序出错。所以最好在做任何操作之前，先判断文件是否存在。这里将介绍三种判断文件或文件夹是否存在的方法，分别使用os模块、Try语句、pathlib模块。回到顶部1、使用os模块 1.1 os.path.exists(path) 判断一个目录是否存在 os模块中的os.path.exists()方法用于检验文件是否存在。判断文件是否存在 import
Python判断目录是否存在_python 判断目录存在
m0_75279794的博客
04-05 1235
你的支持，我的动力；祝各位前程似锦，offer不断，步步高升！！！m: 67%;" />你的支持，我的动力；祝各位前程似锦，offer不断，步步高升！！！更多资料点击此处获qu！！
python判断目录或者文件是否存在
qq_29176323的博客
03-07 1080
python判断目录是否存在 示例 import os def check_dir(dir): if not os.path.exists(dir): os.makedirs(dir) def main(): # os.getcwd() 获取当前py文件的绝对路径 _dir = os.path.join(os.getcwd(), "images", 'xxx') check_dir(_dir) if __name__ == '__main__':
c++判断是否为目录的示例分享
01-21
代码如下:#include<sys>#include<unistd>int is_dir(char *path){ struct stat buf;... 您可能感兴趣的文章:VC++获得当前进程运行目录的方法C++递归删除一个目录实例C++检查某个文件或目录是否存在的函数C/
Lua判断一个目录或文件是否存在的方法
09-22
下面将详细解释如何使用`io.open`以及如何创建一个自定义的`file_exists`函数来判断文件或目录是否存在。 一、使用`io.open` `io.open`函数是Lua中的标准库函数，用于打开一个文件以便读写。它接受两个参数：文件...
java判断ftp目录是否存在的方法
08-30
下面我们将详细讨论如何使用Java来判断FTP目录是否存在，以及相关的知识点。 首先，我们需要创建一个`FtpClient`实例并连接到FTP服务器。在示例代码中，这通过`openServer()`方法完成，它接收FTP服务器的IP地址作为...
shell脚本判断文件夹或目录是否存在，不存在则创建新文件夹或目录.sh
01-03
shell自动化脚本，自动判断文件夹（目录）是否存在，如不存在自动创建，可执行，下载可测试
Python判断文件或文件夹是否存在的三种方法
09-21
本文给大家介绍三种判断文件或文件夹是否存在的方法，分别使用os模块、Try语句、pathlib模块。感兴趣的朋友一起看看吧
python 中判断文件、目录是否存在的方法
snow_love_xia的博客
03-26 1576
使用pathlib需要先使用文件路径来创建path对象。此路径可以是文件名或目录路径。所以，在处理上传文件功能时，一定要先判断目录是否存在，不存在就创建目录，然后再调用。可以在程序中直接使用open()方法来检查文件是否存在和可读写。目录，那么就需要调用该方法，创建多层目录。判断是否是目录登方法可使用。存储的文件夹是个多级的，比如我要存到。目录下，但是我的项目目前只有一个。方法用来判断是否是文件，函数保存文件到服务器。
python判断文件和文件夹是否存在、创建文件夹
heitdf
02-20 8万+
>>> import os >>> os.path.exists('d:/assist') True >>> os.path.exists('d:/assist/getTeacherList.py') True >>> os.path.isfile('d:/assist') False >>> os.path.isfile('d:/assist/getTe
Python 判断文件/目录是否存在
ramblman2013的博客
10-18 492
Python 判断文件/目录是否存在 1、使用 os 模块的 os.path.exists() 方法来检测文件是否存在： import os.path os.path.isfile(fname) 2、如果你要确定他是文件还是目录，从 Python 3.4 开始可以使用 pathlib 模块提供的面向对象的方法 (Python 2.7 为 pathlib2 模块): from pathlib imp...
Python判断文件或目录是否存在
Pert的博客
11-02 919
Python 操作文件时，我们一般要先判断指定的文件或目录是否存在，不然容易产生异常。 例如我们可以使用 os 模块的 os.path.exists() 方法来检测文件是否存在： import os.path os.path.isfile(fname) 如果你要确定他是文件还是目录，从 Python 3.4 开始可以使用 pathlib 模块提供的面向对象的方法 (Python 2.7 为 pathlib2 模块): from pathlib import Path my_file = Path("/p
Python判断文件/目录是否存在
Ma_tx
06-07 581
1、将str类型转换为path,使用pathlib中的模块进行检查 from pathlib import Path rott='/tmp/f' root=Path(rott) #判断文件是否存在： if root.is_file(): #判断目录是否存在 if root.is_dir(): #判断文件或者目录是否存在： if root.exists(): 2、使用os.path.exists()检查 import os.path os.path.isfile(fname) #用于检查文件是
python判断文件和文件夹是否存在
热门推荐
可克技术
03-29 8万+
python判断文件和文件夹是否存在2009-07-02 10:49import os os.path.isfile('test.txt') #如果不存在就返回False os.path.exists(directory) #如果目录不存在就返回False
Python 判断目录是否存在并创建
03-26
<think>好的，用户想知道如何用Python判断目录是否存在并创建它。首先，我需要回忆一下Python中处理文件和目录的模块，应该是os或者pathlib。记得os模块有os.path.exists和os.makedirs函数，可以检查路径是否存在以及创建目录。而pathlib是Python 3.4之后引入的，用起来更面向对象，可能更简洁。 接下来，用户可能需要两种方法的示例，所以我要分别写os和pathlib的实现。比如，用os的话，先检查路径是否存在，如果不存在则创建。这里要注意，os.makedirs可以创建多级目录，而exist_ok参数在Python 3.2之后支持，避免目录已存在时的异常。 然后是pathlib的方法，Path对象的mkdir方法也有parents和exist_ok参数，设置parents=True可以创建父目录，exist_ok=True避免异常。这样代码会更简洁。 另外，用户可能关心异常处理，比如权限问题或者其他错误，但用户的问题没有提到需要处理异常，所以可能暂时不需要深入。但最好还是提一下，比如在os.makedirs时如果目录被其他进程创建了，可能会有异常，但使用exist_ok=True就可以忽略。 还要注意路径字符串的正确性，比如使用正斜杠或反斜杠，在Windows下可能需要转义，但用Python的raw字符串或者双反斜杠处理。不过使用os.path.join或者pathlib可以自动处理路径分隔符，这样更安全。 现在检查是否有相关的引用内容。用户提供的引用中，引用[2]提到了shutil.rmtree删除目录，可能相关，但这里的问题是关于创建目录。引用[4]提到了批量处理脚本，可能涉及目录操作，但具体没有直接相关的信息。所以可能不需要引用这些内容，但如果有必要的话可以看看。比如，引用[2]中的错误可能是因为尝试删除文件而不是目录，所以确保用户创建的是目录而不是文件，但用户的问题主要是判断存在并创建，可能不需要处理删除的情况。 总结下来，步骤应该是：导入模块，检查路径是否存在，不存在则创建。给出两种方法，并说明推荐pathlib因为更现代。同时提到exist_ok参数的重要性，避免报错。可能还要提到跨平台兼容性，因为os和pathlib都能处理不同系统的路径。 最后生成相关问题，比如如何递归创建多级目录，检查是文件还是目录，处理权限问题，或者如何遍历目录。这些都与目录操作相关，能帮助用户进一步学习。</think>在Python中判断目录是否存在并创建，可以通过`os`模块或`pathlib`模块实现。以下是具体方法： --- ### 方法1：使用`os`模块 通过`os.path.exists()`检查目录是否存在，若不存在则用`os.makedirs()`创建： ```python import os dir_path = "./my_directory" if not os.path.exists(dir_path): os.makedirs(dir_path) print(f"目录 {dir_path} 创建成功") else: print(f"目录 {dir_path} 已存在") ``` **注意**： - `os.makedirs()`支持递归创建多级目录，例如`dir_path = "./a/b/c"`。 - 添加`exist_ok=True`参数可避免目录已存在时抛出异常： ```python os.makedirs(dir_path, exist_ok=True) ``` --- ### 方法2：使用`pathlib`模块（推荐） `pathlib`提供更简洁的面向对象路径操作： ```python from pathlib import Path dir_path = Path("./my_directory") dir_path.mkdir(parents=True, exist_ok=True) print(f"目录 {dir_path} 已存在或创建成功") ``` **参数说明**： - `parents=True`：自动创建父目录。 - `exist_ok=True`：目录存在时不报错。 --- ### 关键区别 | 功能 | `os`模块 | `pathlib`模块 | |--------------------|-----------------------|----------------------| | 路径操作 | 字符串形式 | 面向对象 | | 跨平台兼容性 | 需手动处理路径分隔符 | 自动适配操作系统 | | 递归创建目录 | 需手动拆分路径层级 | 通过`parents=True`实现 | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值