CSS学习

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset; 

• h-shadow 它是必需的，代表水平方向的阴影。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。

• v-shadow 它是必需的，代表垂直方向的阴影。值为正数时，阴影在元素的下侧；值为负数时，阴影在元素的上侧。

• blur 它是可选的，代表阴影的模糊半径。值越大，越模糊。

• spread 它是可选的，代表阴影的大小（扩散半径）。值为正数时，阴影在原来的基础上放大；值为负数时，阴影在原来的基础上缩小。

• color 它是可选的，代表阴影的颜色。不设置颜色时默认黑色。

• inset 它是可选的，代表阴影的投影方式。如果设置了则从外层的阴影（开始时）改变阴影内侧阴影。

块级格式化上下文

Block Formatting Context，也就是常说的BFC，它是Web页面的可视化CSS渲染区域的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 BFC的布局规则如下：

1. 内部的盒子会在垂直方向，一个一个地放置

2. BFC是页面上的一个隔离的独立容器

3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠

4. 计算BFC的高度时，浮动元素也要参与计算

5. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此

6. BFC的区域不会与float重叠

创建了BFC的元素中的所有内容都会被包含在该BFC中。 BFC对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用同一个BFC内的元素。浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在他前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。

下列方式会创建BFC：

1. 根元素或包含根元素的元素，即body根元素

2. 浮动元素，即float属性值不为none（元素的position为absolute或fixed）

3. 行内块元素（元素的display为inline-block）

4. 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）

5. 表格标题（元素的display为table-caption，HTML表格标题默认为该值）

6. 匿名表格单元格元素(或者元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table)

7. overflow的值不为visible的元素

8. display值为flow-root`的元素

9. contain值为layout、content或strict`的元素

10. 弹性元素(display为flex或inline-flex元素的直接子元素)

11. 网格元素(display为grid或inline-grid元素的直接子元素)

12. 多列容器（元素的colunm-count或column-width不为auto，包括column-count为1）

13. column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

line-height（行高）介绍

1、行高指的是文字占有的实际高度

2、通过line-height来设置行高

3、行高可以直接指定一个大小（px em）

4、也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数

5、行高会在字体框的上下平均分配

6、可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

7、行高经常还用来设置文字的行间距        行间距 = 行高 + 字体大小  

全屏滚动

全屏滚动的原理就是每次滚动滚轮，屏幕移动的距离就刚好是一个屏幕的距离，利用css的高度百分比实现这个效果，因为设定百分比的值是需要更具父元素设置的所以需要给html，body都设置为高度百分百，然后一层一层的设置，用js控制鼠标滚轮事件。

实现全屏滚动通常使用以下 CSS 属性：

1. overflow: hidden;: 用于隐藏网页内容的溢出部分，以便只显示一个屏幕大小的内容。
2. height: 100vh;: 设置每个滚动屏的高度为视口的高度，确保内容完全填充整个屏幕。
3. scroll-snap-type: y mandatory;: 指定滚动行为为垂直滚动，并且每一屏为一个滚动定位点。
4. scroll-snap-align: start;: 定义每个滚动屏对齐方式为顶部对齐。
5. scroll-behavior: smooth;: 添加平滑滚动效果，使滚动过程更加流畅。

精灵图

精灵图（Sprite Sheet）是将多个小图像（精灵）合并到一个大图像文件中的技术。它被广泛应用于游戏开发和Web动画中，可以提高性能和资源管理效率。

使用精灵图的目的是减少网络请求次数，通过加载一个大的图像文件，而不是多个小的图像文件，从而减少响应时间和带宽。在加载完整个精灵图后，可以通过调整背景图像的位置来显示不同的精灵。

精灵图通常使用CSS的background-position属性来控制显示的精灵位置。通过修改背景图像的位置值，可以在HTML元素上显示不同的精灵。

要使用精灵图，通常需要以下步骤：

1. 创建精灵图：将多个小的图像合并到一个大的图像文件中，并记录每个精灵图的位置和尺寸。可以使用图片编辑器或专门的精灵图生成工具来创建精灵图。

2. 定义精灵样式：在CSS中，为显示精灵的元素定义样式，并设置背景图片为精灵图。使用background-position属性来指定具体的精灵图位置。

3. 显示不同的精灵：通过修改元素的样式，修改background-position的值来显示不同的精灵。可以通过修改元素的类名或使用JavaScript来改变精灵位置。

通过使用精灵图，可以减少网络请求，提高载入速度，并且在动画和交互效果中实现平滑的图像切换。