css 百分比 怎么固定正方形_49 张 GIF 图中学习 49 个 CSS 知识点
作者:老姚《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif
本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有 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布局检测器
希望这些知识点对你有所帮助。
也欢迎阅读本人的《JS正则迷你书》: https://github.com/qdlaoyao/js-regex-mini-book
最后
如果你想进【大前端交流群】,关注公众号点击“交流加群”添加机器人自动拉你入群。关注我第一时间接收最新干货。
css 百分比 怎么固定正方形_49 张 GIF 图中学习 49 个 CSS 知识点相关推荐
- css 百分比 怎么固定正方形_css样式写出三角形,宽高自适应的正方形,扇形!...
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <! 实现它的原理那就要弄明白border属性, border是一个复合属性 borde ...
- css 百分比 怎么固定正方形_你未必知道的49个CSS知识点
本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜). 鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读. 需要说明的是,顺序仍是按当时发 ...
- css 百分比 怎么固定正方形_web前端入门到实战:一次搞懂CSS字体单位:px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
- 从多张曝光图像中学习一个深度单图像对比度增强器
文章目录 一.引出问题 二.多曝光数据集 三.网络结构 1. 分量增强网络 2. 整体增强网络 四.实验结果 1. 实验设置 2. 与SICE方法比较 3. 与MEF相比 4. 失败案例 五.总结 一 ...
- css文件无法应用,无法在dash应用程序中加载静态css文件
我已经构建了一个单页的dash应用程序,当作为单个文件运行时,它可以按预期运行,但是当我试图将它作为一个完整的应用程序运行时,CSS无法正确加载.在 下面是我的文件夹结构 当我通过manage.py加 ...
- CSS 使用 a 标签的 mailto 属性在网页中链接 Email 地址(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- 前端还在切图?学完这些css,再也不用切图了!
标题开个玩笑,实际上CSS3有许多亮眼的特性,比如阴影shadow.动画animation.形变transform.渐变gradient.滤镜filter等,合理运用这些特性,可以实现许多高大上的效果 ...
- html图片轮播怎么写,用js和CSS写图片切换效果(轮播图)
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
- CSS百分比实现高度占位自适应
[CSS黑科技2]CSS百分比实现高度占位自适应(margin/padding) |导语在很多场景下,我们都需要给容器设定宽高比,实现自适应占位,巧用margin/padding可以让我们实现我们的需 ...
最新文章
- Go 1.16 的这个新变化需要适应下:go get 和 go install 的变化
- 微信小程序setData()方法的使用
- mysql 30天销量_mysql查询今天,昨天,近7天,近30天,本月,上一月数据方法
- 为什么watch机制不是银弹?
- selenium2与python自动化4-css元素定位
- hashmap是散列表吗_一篇文章教你读懂哈希表-HashMap
- .NetCore(四) 在Nginx部署
- 将10000H-1000FH这段空间当做栈,初始状态栈是空的,设置AX=001AH,BX=001BH,利用栈,交换AX和BX的数据
- 丁香园在语义匹配任务上的探索与实践
- 麦克纳姆轮全向移动机器人速度空间分析
- C#基础7:类的定义
- for循环中的setTimeout()
- CF1047A Little C Loves 3 I
- VS2010快捷键设置
- IT程序员编程工具利器-辅助编程神器
- 虚幻4 配置打包安卓
- 渗透测试常用工具-amap服务枚举
- 文本分类上分利器: Bert微调trick大全
- 如何用proe/croe将三维文件转为二维CAD轴侧图
- 爬虫如何爬取猫眼电影TOP榜数据
热门文章
- Google Chrome 初试手记
- Android-JNI开发系列《二》-在jni层的线程中回调到java层
- VC 6.0 : Cannot open include file: 'streambuf': No such file or directory !!
- 基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达
- 解决Mac网速越来越慢(飞一般的感觉)
- repo一个新工程使用步骤
- Clojure 学习入门(12)- map/pmap
- ios ffmpeg(libfdk-aac) aac encode
- Android7 mediacodec SEI
- quatus_sh tcl获取帮助