常规布局常规流块级盒子：开机格式化上下文内联盒子：内联格式化上下文 BFC： block formatting context

外边距塌陷

合并计算 margin:xx margin:xx 解决办法：不相邻，添加元素。

内联

line box ![[Pasted image 20230426190555.png]] line -height 参与高度计算。

vertical-align:baseline
//
vertical-align:middle
//图片未知改变。图片中线相比baseline上移半个x的高度
//line-height 利用行高，文字居中。

弹性盒子

Grid

元素课占据一个或多个单元格二维布局父元素：定义网格子元素：规定当前元素的位置。

Flex vs Grid

Flex	Grid
一维	二维
基于内容	基于布局
兼容性好	2017年之后的浏览器普遍支持
大面积建议用Grid 也要具体情况具体分析。

定位 Position

realitive absolute fixed

层叠上下文 The Stacking Context

形成条件

css3之前 position:relative or absolute ；&&z-indext != auto position:fixed or sticky

之后 flex or grid child elements ;&& z-index != auto apacity <1 transform != none will-change != 通用值 ....

顺序 stacking order

重要！ ![[Pasted image 20230507220337.png]] z-index越大，元素越高，但也要受到父元素的限制特殊的： positioned && z-index = 0 | auto 这两者情况不相同（

动画

transform-style 变形了 transition 过渡更平滑真实阶跃（逐帧动画

animation 动画，可以实现更复杂效果 animation-* mdn animation - CSS：层叠样式表 | MDN (mozilla.org)

动画性能

布局 => 绘制 =>合成

响应式设计

媒体查询 @media

Tips

层叠覆盖原则 min- max- 择其一
设备多样化，如何选择断点
断点增加会增加复杂度，应该尽量减少

设备像素

dpi(dots per inch) ppi(pixels per inch) $PPI= X/width=\sqrt{X^2+Y^2}/diag$

CSS像素

参考像素/一个视角单位，（类似位似or相似？ ![[Pasted image 20230507225955.png]] 为了不同设备上有相对一致的阅读体验 设备像素比(dpr) $DPR = \frac{设备像素}{CSS像素}$

View Port

initial-scale = 1 视口宽与屏幕一致 1/dpr 真实的物理像素

相对长度

em 用于非font-size rem

生态

css不可维护性高

语言增强

![[Pasted image 20230507234525.png]]

工程架构

如何解决样式（全局）污染

理解CSS