深入CSS|青训营笔记

38 阅读1分钟

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

(我先顺着听吧)

QQ图片20230117223137.png 都选择了同一个元素

蓝色还是红色?

根据特异度来决定的 (越特殊选择性越高)

QQ图片20230117223431.png

QQ图片20230117223734.png 下面的选择器优先级就高

css某些属性会自动继承父元素的计算值,除非知道显示某个值

QQ图片20230117224238.png(我觉得很清楚了)

一般来说,和文字相关的可以继承,和模型相关(宽度) 的不能继承。

但我叛逆,想那些东西继承,就需要:

显示继承(inherit)

QQ图片20230117225301.png

一个元素不可继承,又没有设置属性

或者可继承,但一层层没有集成到

就会使用到:初始值

初始值(initial)

QQ图片20230117225612.png

一个元素具体怎么被计算出来的

CSS求值过程

QQ图片20230117225851.png

QQ图片20230117230401.png 最后才会得到实际值

继承的其实时计算值

布局(layout)

QQ图片20230117230902.png

布局相关技术

- 常规流
  • 行级
  • 块级
  • 表格布局
  • Flexbox
  • Grid布局

浮动

绝对定位

盒模型(布局时理解为盒子)

QQ图片20230117231411.png

QQ图片20230117231943.png

QQ图片20230117232027.png

QQ图片20230117232253.png

QQ图片20230117232253.png

QQ图片20230117232437.png

QQ图片20230117232609.png margin:auto浏览器会取平均值

margin collapse垂直边距取较大值 (待续)