深入CSS|青训营

49 阅读1分钟

1、CSS 选择器的特异度 Specificity

屏幕截图 2023-08-04 141146.png

优先级: 在1中 id选择器有1个 #nav,类与伪类共有2个(.list和:link),元素与伪元素共有2个(li和a)。 在2中 id选择器有0个,类与伪类共有2个(.hd和:links),元素与伪元素共有2个(ul和a)。

2、CSS 继承

inherit 显式继承 屏幕截图 2023-08-04 141402.png

屏幕截图 2023-08-04 141513.png

3、CSS 求值过程解析

屏幕截图 2023-08-04 141849.png

4、CSS 布局方式及相关技术

布局 Layout: 确定内容的大小和位置的算法 依据元素、容器、兄弟节点和内容等信息来计算

屏幕截图 2023-08-08 210544.png

屏幕截图 2023-08-08 210657.png

屏幕截图 2023-08-08 210722.png

屏幕截图 2023-08-08 210800.png

屏幕截图 2023-08-08 210813.png

屏幕截图 2023-08-08 210828.png

屏幕截图 2023-08-08 210849.png

屏幕截图 2023-08-08 210907.png

屏幕截图 2023-08-08 211131.png

屏幕截图 2023-08-08 211221.png

屏幕截图 2023-08-08 211334.png

屏幕截图 2023-08-08 211415.png

屏幕截图 2023-08-08 211457.png 布局相关技术:

  • 常规流 行级、块级、表格布局、FlexBox、Grid布局 margin collapse 盒子间距问题100px

  • 浮动

  • 绝对定位