CSS 篇知识复习总结

CSS 知识复习总结一、基础学习CSS起源：CSS 由赖先生首先提出。CSS版本：CSS2.1 是使用最广泛的版本，尤其受到IE浏览器的支持。标准制定：CSS 标准的制定者是W3C（万维网联盟）。文档流（Normal Flow）：文档流是元素在页面中默认的排列方式。默认情况下，元素会按照其在HTML中的顺序，在文档流中从上到下、从左到右排列。脱离文档流的元素：使用 float: left; 或 float: right; 的元素会脱离文档流，向左或向右浮动。使用 position: absolute; 或 position: fixed; 的元素也会脱离文档流，进行绝对定位或固定定位。元素显示类型：块级元素（block）：占据一整行，可以设置宽度和高度。内联元素（inline）：不会占据一整行，只占据其内容所需的宽度，不能设置宽度和高度。内联块元素（inline-block）：结合了块级元素和内联元素的特点，可以设置宽度和高度，但不会占据一整行。margin合并：当两个垂直方向的块级元素相邻时，它们的外边距（margin）可能会合并为一个较大的外边距，这种现象称为margin合并。盒模型：标准盒模型：宽度和高度只包括内容区域，不包括边框（border）和内边距（padding）。IE盒模型（怪异盒模型）：宽度和高度包括内容、边框和内边距。overflow溢出问题：当内容超出元素设定的宽度或高度时，可以使用 overflow 属性来控制内容的显示方式，如 visible（默认，内容不会被剪裁，会呈现在元素框之外）、hidden（内容会被剪裁，且不会显示滚动条）、scroll（内容会被剪裁，且总是显示滚动条）、auto（如果内容被剪裁，则显示滚动条）。CSS基本单位：常用的CSS单位包括像素（px）、百分比（%）、em、rem等。CSS颜色相关：可以使用颜色名称（如red、blue）、十六进制值（如#FF0000）、RGB/RGBA（如rgb(255,0,0)）、HSL/HSLA等方式来定义颜色。二、定位学习background范围：background 的范围是 border 外边缘围成的区域。div层级关系：从下往上的层级关系依次是：background → border → 块级子元素 → 浮动元素（脱离文档流） → 内联子元素（文字等）。position取值：static：默认值，没有定位，元素出现在正常的文档流中。relative：相对定位，相对于其正常位置进行定位。absolute：绝对定位，相对于最近的已定位祖先元素进行定位。fixed：固定定位，相对于浏览器窗口进行定位。sticky：粘性定位，根据用户的滚动位置进行切换，在 relative 和 fixed 定位之间切换。三、布局学习固定宽度布局：元素具有固定的宽度，通常使用像素（px）作为单位。不固定宽度布局：元素宽度不固定，可以使用百分比（%）、flex、grid等布局方式来实现。响应式布局：根据不同屏幕尺寸和设备类型，自动调整页面布局和样式。常使用媒体查询（media queries）来实现。float布局：使用 float 属性来实现元素的左右浮动，常用于早期的网页布局。flex布局：flexbox 布局模型，用于在容器中分布、对齐和排列子元素，即使它们的大小未知或动态变化。具有更高的灵活性和适应性。grid布局：grid 布局模型，将页面划分为一个由行和列组成的网格，用于更精确地控制元素的布局。适用于复杂的二维布局。四、渲染及动画学习浏览器渲染原理：浏览器将HTML文档解析为DOM树，将CSS文档解析为CSSOM树。将DOM树和CSSOM树合并成RenderTree（渲染树）。根据RenderTree进行布局计算，绘制页面。渲染示意图“三棵树”：DOM：文档对象模型，表示HTML文档的结构。CSSOM：CSS对象模型，表示CSS文档的结构和样式。RenderTree：渲染树，表示页面中的可见元素及其样式。更新样式的三种方式：重排（Reflow）：重新计算元素的位置和几何属性。重绘（Repaint）：重新绘制元素的外观，但不改变其位置或几何属性。复合（Compositing）：将多个图层合并成一个图层，以提高渲染性能。transition练习：使用 transition 属性来实现元素的平滑过渡效果。可以指定过渡的属性、持续时间、过渡方式和延迟时间。animation练习：使用 @keyframes 规则来定义动画的关键帧。使用 animation 属性来应用动画，并指定动画的名称、持续时间、延迟时间、迭代次数、动画方向和动画填充模式等。CSS动画优化：尽量减少重排和重绘的次数。使用 transform 和 opacity 等属性来触发GPU加速。合理使用