前端开发

CSS定位五种方式中，static为默认定位，元素遵循文档流；relative使元素相对自身原位置偏移但仍占位；absolute让元素脱离文档流并相对于最近非static祖先定位；fixed使元素脱离文档流并相对于视口固定；sticky则在滚动到特定位置时由relative变为fixed效果。常用r…

CSS伪元素通过::before、::after等选择器，在不修改HTML结构的前提下，为元素添加生成内容或样式化特定部分，如首行、首字母、选中状态等。核心是content属性必须设置，否则伪元素不生效；默认为inline，常需调整display以控制布局；结合position可精确定位。常见应用包…

设置CSS背景图片需使用background-image属性，并通过background-repeat、background-size和background-position控制平铺、大小和位置；推荐使用简写属性合并设置，如background: #f0f0f0 url(‘image.j…

CSS伪类是用于选择元素特定状态或位置的%ignore_a_1%，如:hover、:focus、:first-child等，它们不改变DOM结构即可动态应用样式。伪类与伪元素不同：伪类针对已有元素的状态或位置（如a:hover），而伪元素则创建虚拟内容（如::before、::after）。常用伪类…

CSS函数是动态指令，可执行计算、变换或引用值，如calc()用于布局计算、var()管理变量、transform实现动画、gradient创建渐变、min/max/clamp控制响应式范围。它们让CSS具备“操作”能力，提升灵活性与维护性。相比静态的传统属性值，函数能动态响应上下文，支持数学运算、…

CSS渐变主要是通过 linear-gradient() 和 radial-gradient() 这两个CSS函数来实现的，它们让颜色能够在元素的背景上平滑过渡，从而创造出丰富多样的视觉层次感和动态效果。这不仅仅是简单的颜色填充，更是一种艺术性的表达，能让网页设计瞬间活起来。 CSS渐变效果的制作，…

CSS变换通过transform属性实现元素在2D或3D空间中的移动、旋转、缩放和倾斜，不影响文档流且性能优越。核心函数包括translate()、rotate()、scale()和skew()，可组合使用并配合transform-origin设置变换基点。结合transition或animatio…

答案是使用@font-face规则引入自定义字体，需关注格式兼容性、性能优化与版权问题。通过定义font-family和src指定字体文件，优先提供WOFF2与WOFF格式以兼顾性能与兼容；利用font-display: swap避免文本不可见，结合子集化、预加载和CDN提升加载速度；注意浏览器对E…

CSS盒模型由内容、内边距、边框和外边距组成，box-sizing属性决定宽高是否包含内边距和边框；推荐使用border-box避免布局溢出，配合开发者工具调试可精准控制元素尺寸。 CSS盒模型是理解网页布局基石，它把每个HTML元素都看作一个矩形的盒子。这个盒子由内容（content）、内边距（p…

清除浮动的核心是解决父元素高度塌陷和后续元素错位问题。当子元素浮动后脱离文档流，父元素无法感知其高度，导致高度为零；同时后续非浮动元素可能侵入浮动区域，造成布局混乱。为解决此问题，常用方法包括：使用clear属性在浮动元素后插入块级元素并设置clear: both，但需额外HTML标签；父元素设置o…