区别

background-size: cover 和 contain 的核心区别在于图片适应容器的方式。cover 会等比缩放图片以覆盖整个容器，可能裁剪图片；而 contain 会等比缩放以完整显示图片，可能留白。1. cover 常用于全屏背景、卡片封面等需要视觉冲击的场景，优点是填满容器，缺点是可…

content-box是box-sizing的默认值，设置元素的宽高仅指内容区域的大小，不包括padding和border，例如width:200px;height:100px;padding:10px;border:5px时，实际总宽为230px，因为padding和border会额外增加尺寸；而…

控制文本换行主要依靠word-break、overflow-wrap和white-space三个css属性。1.word-break控制单词内部换行，break-all允许在任何字符间断开（中英文均打断），keep-all仅在空格或连字符处换行（中文不打断）；2.overflow-wrap（原wor…

rpx和px在css中的主要区别在于使用场景和适用性：1. rpx是小程序特有的响应式单位，基于屏幕宽度计算，适用于需要在不同设备上保持一致ui的小程序开发；2. px是传统的绝对像素单位，适用于需要在web或其他平台上运行的项目。 在CSS中，rpx和px都是用来指定元素尺寸的单位，但在使用场景和…

ease与linear的核心区别在于动画节奏：1.ease先快后慢，自然流畅，适合按钮悬停、菜单展开等ui交互；2.linear匀速进行，机械精准，适合进度条、轮播图等需严格节奏的场景。ease模拟现实运动变化，有缓冲感；linear则无加速减速过程，视觉上更生硬。选择时优先尝试ease以获得更好的…

display: none和visibility: hidden的主要区别在于元素是否占位及脱离文档流。1. display: none使元素完全不显示且不占位，脱离文档流，适用于动态控制展示或布局变化大的场景；2. visibility: hidden仅隐藏元素但仍占位，保留文档流位置，适用于保留…

object-fit的fill和cover区别在于图片适配方式：1. fill会拉伸图片填满容器，可能导致变形；2. cover保持图片比例并裁剪多余部分。fill适用于不介意变形且需完全填充的场景，cover适合要求图片不变形且可接受裁剪的情况。选择时结合具体需求，并可配合object-posit…

css添加外边框的核心是border属性，1. 使用border简写属性可快速设置宽度、样式和颜色；2. 也可分开设置border-width、border-style、border-color以更灵活控制；3. 可单独指定某一边的边框如border-top、border-right等；4. 边框样…

单冒号（:）用于伪类，双冒号（::）用于伪元素。1. 伪类如:hover、:focus用于定义元素状态，提升用户体验。2. 伪元素如::before、::after用于添加装饰内容，实现复杂布局。3. 为兼容旧版浏览器，可同时使用单双冒号定义伪元素，但需考虑性能优化。 在CSS中，单冒号（:）和双冒…

css中的单位主要分为绝对单位和相对单位两类。1. 绝对单位包括像素（px）、点（pt）、厘米（cm）等，具有固定尺寸。2. 相对单位包括百分比（%）、em、rem、vw/vh等，基于其他值或视口尺寸。使用相对单位如em和rem能提高网页的可维护性和响应性，但需注意基准值设置和设备兼容性。 CSS中…