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

 

本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。

需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。另外这里,老姚谢谢各位一如既往的支持。

 

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

 

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

 

03.【BFC应用】BFC应用之阻止外边距合并(margin collapsing)

 

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

 

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

 

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

 

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

 

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

 

09.【层叠上下文】层叠上下文:小辈就是小辈,再厉害也只是个小辈

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

48【outline】outline属性的妙用

 

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

希望有所帮助。

 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月28日

热门专题

综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
卓越综合高中|卓越综合高中
卓越综合高中
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
外贸网站建设|外贸网站建设,英文网站制作,英文网站设计,美国主机空间,外贸建站平台,多语言网站制作
外贸网站建设
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
安徽中源管业有限公司|安徽中源管业有限公司,安徽中源管业有限公司介绍,安徽中源管业有限公司电话,安徽中源管业有限公司地址,安徽中源管业有限公司厂家,安徽中源管业有限公司电力管,安徽中源管业有限公司管材
安徽中源管业有限公司

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部