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的布局规则如下:
内部的盒子会在垂直方向,一个一个地放置
BFC是页面上的一个隔离的独立容器
属于同一个BFC的两个相邻Box的上下margin会发生重叠
计算BFC的高度时,浮动元素也要参与计算
每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
BFC的区域不会与float重叠
创建了BFC的元素中的所有内容都会被包含在该BFC中。 BFC对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用同一个BFC内的元素。浮动不会影响其他BFC中元素的布局,而清除浮动只能清除同一BFC中在他前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。
下列方式会创建BFC:
根元素或包含根元素的元素,即body根元素
浮动元素,即
float
属性值不为none
(元素的position
为absolute
或fixed
)行内块元素(元素的
display
为inline-block
)表格单元格(元素的
display
为table-cell
,HTML表格单元格默认为该值)表格标题(元素的
display
为table-caption
,HTML表格标题默认为该值)匿名表格单元格元素(或者元素的
display
为table
、table-row
、table-row-group
、table-header-group
、table-footer-group
(分别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table)overflow
的值不为visible
的元素display
值为
flow-root`的元素contain
值为
layout、
content或
strict`的元素弹性元素(
display
为flex
或inline-flex
元素的直接子元素)网格元素(
display
为grid
或inline-grid
元素的直接子元素)多列容器(元素的
colunm-count
或column-width
不为auto
,包括column-count
为1)column-span
为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
line-height(行高)介绍
1、行高指的是文字占有的实际高度
2、通过line-height来设置行高
3、行高可以直接指定一个大小(px em)
4、也可以直接为行高设置一个整数。如果是一个整数的话,行高将会是字体的指定的倍数
5、行高会在字体框的上下平均分配
6、可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中
7、行高经常还用来设置文字的行间距 行间距 = 行高 + 字体大小
全屏滚动
全屏滚动的原理就是每次滚动滚轮,屏幕移动的距离就刚好是一个屏幕的距离,利用css的高度百分比实现这个效果,因为设定百分比的值是需要更具父元素设置的所以需要给html,body都设置为高度百分百,然后一层一层的设置,用js控制鼠标滚轮事件。
实现全屏滚动通常使用以下 CSS 属性:
overflow: hidden;
: 用于隐藏网页内容的溢出部分,以便只显示一个屏幕大小的内容。height: 100vh;
: 设置每个滚动屏的高度为视口的高度,确保内容完全填充整个屏幕。scroll-snap-type: y mandatory;
: 指定滚动行为为垂直滚动,并且每一屏为一个滚动定位点。scroll-snap-align: start;
: 定义每个滚动屏对齐方式为顶部对齐。scroll-behavior: smooth;
: 添加平滑滚动效果,使滚动过程更加流畅。
精灵图
精灵图(Sprite Sheet)是将多个小图像(精灵)合并到一个大图像文件中的技术。它被广泛应用于游戏开发和Web动画中,可以提高性能和资源管理效率。
使用精灵图的目的是减少网络请求次数,通过加载一个大的图像文件,而不是多个小的图像文件,从而减少响应时间和带宽。在加载完整个精灵图后,可以通过调整背景图像的位置来显示不同的精灵。
精灵图通常使用CSS的background-position
属性来控制显示的精灵位置。通过修改背景图像的位置值,可以在HTML元素上显示不同的精灵。
要使用精灵图,通常需要以下步骤:
创建精灵图:将多个小的图像合并到一个大的图像文件中,并记录每个精灵图的位置和尺寸。可以使用图片编辑器或专门的精灵图生成工具来创建精灵图。
定义精灵样式:在CSS中,为显示精灵的元素定义样式,并设置背景图片为精灵图。使用
background-position
属性来指定具体的精灵图位置。显示不同的精灵:通过修改元素的样式,修改
background-position
的值来显示不同的精灵。可以通过修改元素的类名或使用JavaScript来改变精灵位置。
通过使用精灵图,可以减少网络请求,提高载入速度,并且在动画和交互效果中实现平滑的图像切换。