CSS再学习 ｜ 青训营笔记

前端雪饼
61 阅读1分钟

这是我参与「第五届青训营」伴学笔记活动创作的第2天

重要知识点

语法

选择器 （属性 ： 属性值） = 声明

用法

外链 嵌入 内联

css如何工作

浏览器加载解析HTML（解析时加载css，解析css，渲染到DOM上）结构并创建DOM树，展示页面

image.png

属性选择器

通过属性值选择

image.png

image.png 以#开头，以jpg结尾

image.png

伪类选择器

image.png

选择器组合

image.png

选择器组

image.png

字体

你设置的 字体有可能有些浏览器没有，所以一般可以设置多个

image.png 会在性能上带来开销

image.png

em（倍数）和百分比都是根据其父级元素px大小来确定的 空格和换行的属性

image.png

特异度

用于表示选择器优先级

image.png

继承

让原本不能继承的属性变得可以继承 image.png

初始值

image.png

css求值过程

image.png

image.png

image.png 渲染阶段才能决定的值放到formatting

布局

image.png

文档流

高度设置auto不显示的原因 父元素auto,子元素百分比形成循环依赖

image.png

image.png

image.png

理解比如一张图片它可以和文字放一行，但是 不可以拆成两行

行级排版上下文

image.png 比如div里面只有文字就创建了IFC

块级排版上下文

image.png

image.png

新的排版上下文

image.png

新的排版上下文

image.png

image.png fr相当于份

image.png

image.png

个人总结

这三小节课，带我们从头到尾理解了一遍css，令我映像最深刻的就是css的工作流程，原来几行的代码居然要经过如此一番波折才能被浏览器渲染出来，令人叹为观止

avatar
文章
阅读
粉丝