css固定图片大小 vue_你需要知道的30个CSS知识点(第一章)

本文介绍了CSS中的30个重要知识点,包括负边距、shape-outside、BFC应用、flex布局的特殊用法、input的宽度、定位特性、层叠上下文和粘性定位等。通过这些知识点的学习,帮助开发者提升CSS技能,解决实际开发中遇到的问题。
摘要由CSDN通过智能技术生成

各位小伙伴在进阶的时候总会遇到一些问题和瓶颈,业务代码写多了没有方向感,不知道该从那里入手去提升,对此我整理了一些资料,包括但不限于HTML/CSS/javaScript/Vue等多个知识点高级进阶干货需要的可以免费分享给大家,有需要者请进群点击进入1045267283

你需要知道的30个CSS知识点(第二章)

你需要知道的30个CSS知识点(目 录)

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

e673c9e4b30158a190adc63ba898f98b.gif

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

3b46d814d3b6e197b45249ce369920dc.gif

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

cdaef6f8a96c782e76c04d1882137148.gif

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

031714f23559364e9c12a9d3b98b5df9.gif

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

00d3f20212aea3295e34cc4b190216d0.gif

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

e263ddc7cad3a1746fb762918998c3bf.gif

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

c79c2119ffcc364014c92f3835275eb0.gif


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

be63000166ec0d5d25b7eb444f92e0b6.gif

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

e5afcf3ffd535e2eaa897a0695bce298.gif

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

a7a725e489caa901c889055ae6e8dc40.gif

相关CSS知识点:灵活运用CSS开发技巧

在此小编再次感谢大家对我的支持,需要更多相关资料,视频请加群点击进入1045267283

a5b52eb45161df11818d9efc308176b7.png

8f202c3a0be850003e8097c666c7c993.png

710b0d978ea486ddb52ead42237b1acb.png

48a208293b2062afd373fecd90462731.png

64d5a933ef79dd24a07cea483eb525b2.png

242786ce0cbc75d99579888841c4a1d7.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值