你需要知道的30个CSS知识点（第一章）

灰太狼 2021-02-04 14:59 562阅读 0赞

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

![format_png][]

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

![format_png 1][]

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

![format_png 2][]

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

![format_png 3][]

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

![format_png 4][]

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

![format_png 5][]

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

![format_png 6][]

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

![format_png 7][]

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

![format_png 8][]

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

![format_png 9][]

[format_png]: /images/1612450727914.jpg
[format_png 1]: /images/1612450708665.jpg
[format_png 2]: /images/1612450677985.jpg
[format_png 3]: /images/1612450658995.jpg
[format_png 4]: /images/1612450641146.jpg
[format_png 5]: /images/1612450626202.jpg
[format_png 6]: /images/1612450609065.jpg
[format_png 7]: /images/1612450590299.jpg
[format_png 8]: /images/1612450573376.jpg
[format_png 9]: /images/1612450526941.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，562人围观）

还没有评论，来说两句吧...

相关阅读

相关 14个你需要知道的实用CSS技巧

让我们学习一些实用的 CSS 技巧，以提升我们的工作效率。这些 CSS 技巧将帮助我们开发人员快速高效地构建项目。现在，让我们开始吧。 1.CSS :in-range 和

r囧r小猫/ 2024年03月25日 07:40/ 0 赞/ 59 阅读

相关【转载】你未必知道的49个CSS知识点

原文链接： [https://juejin.im/post/5d3eca78e51d4561cb5dde12][https_juejin.im_post_5d3eca78e5

桃扇骨/ 2023年08月17日 17:16/ 0 赞/ 86 阅读

相关前端你需要了解和知道的知识

1 . use strict严格模式是用来干什么的？严格模式和普通模式的区别 1 . 为什么用严格模式消除Javascript语法的一些不合理、不严谨之处，减少

太过爱你忘了你带给我的痛/ 2023年03月13日 09:05/ 0 赞/ 142 阅读

相关【CSS】11 个 Sass 中常用的颜色函数，你需要知道一下

![02e6a6a7ac035c995c7a5a955d3de19a.png][] 今天我们来看一下 Sass 中的颜色函数，颜色函数可以分为三部分，分别是颜色设置、颜色获取

迈不过友情╰/ 2022年08月30日 00:54/ 0 赞/ 208 阅读

相关 css3基础知识第一章语法

CSS 层叠样式表 (Cascading Style Sheets) CSS 规则由两个主要的部分构成：选择器，声明选择器：标签选择器：直接用标签类选择器

短命女/ 2022年08月10日 06:17/ 0 赞/ 192 阅读

相关 HTML 你最该知道的几个知识点

1.超级文本标记语言（HyperText Markup Language）； 2.什么是“超文本”？ “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元

墨蓝/ 2022年06月10日 08:58/ 0 赞/ 169 阅读

相关你需要知道的30个CSS知识点

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

红太狼/ 2021年02月04日 15:15/ 0 赞/ 632 阅读

相关你需要知道的30个CSS知识点（第三章）

21.【角向渐变】新的渐变：角向渐变。可以用来实现饼图 22.【背景位置百分比】 background-position百分比的正确理解方式：图片自身的百分比位置与容...

红太狼/ 2021年02月04日 15:12/ 0 赞/ 607 阅读

相关你需要知道的30个CSS知识点（第二章）

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

灰太狼/ 2021年02月04日 15:05/ 0 赞/ 652 阅读

相关你需要知道的30个CSS知识点（第一章）

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

灰太狼/ 2021年02月04日 14:59/ 0 赞/ 563 阅读