css基础

• 盒模型
  CSS 盒模型就是把每个元素看作一个矩形盒子，由里到外依次是 content、padding、border、margin 四部分。分为标准盒模型和怪异盒模型。标准盒模型 width 只包含内容，怪异盒模型 width 包含内容、内边距和边框。开发中常用 box-sizing: border-box，方便布局计算。

margin 用于设置元素与外部元素的间距，不被背景覆盖，可居中、可负值；块级元素水平居中：margin: 0 auto

padding 用于设置元素内部内容与边框的间距，会被背景覆盖。

• css3新特性
  选择器更丰富（属性选择器、伪类）；
  增加了 transform、transition、animation 动画；
  支持 flex、grid 现代布局；
  还有 rgba、媒体查询等，让页面更美观、交互更流畅、布局更简单。

媒体查询是 CSS3 用于实现响应式布局的语法，可根据屏幕宽度、设备类型等条件动态应用样式。通过 @media 规则，能让同一页面在手机、平板、PC 上展示不同布局，是实现响应式开发的核心技术。

语法：

@media 媒体类型 and (条件) {

/* 满足条件时生效的样式 */

}
响应式设计是让同一页面在 PC、平板、手机等不同设备上自动适配布局的设计方案。

基本原理是：流式布局 (不用固定 px 宽度，改用 百分比、flex、grid 等相对单位)+ 弹性单位(使用 rem、em、vw/vh 等相对单位) + 媒体查询，使页面能够根据屏幕尺寸自动调整结构与样式，实现多端适配。
伪元素VS伪类
伪类使用单冒号，用于选中元素的状态或位置。不创建新元素，只是选中现有元素，如:hover鼠标悬浮、:nth-child()、:active 点击激活、:focus 聚焦
伪元素使用双冒号，用于创建虚拟元素，如::before、::after，相当于新增 DOM 节点，必须设置 content 才能显示。

• CSS 工程化
  CSS 工程化是针对大型项目中 CSS 全局污染、复用性差、维护困难等问题，通过工程手段系统化解决的方案。
  主要包括使用预处理器、CSS 模块化隔离、PostCSS 自动化处理、结合构建工具链（基于 webpack /vite 打包）、规范命名以及性能优化等，让 CSS 可维护、可扩展、可自动化，提升开发与协作效率。
• 优化和提高性能的方法
  压缩合并 CSS，避免 @import，防止阻塞渲染；
  简化选择器，减少层级嵌套，避免冗余样式；
  使用 transform、opacity 做动画，减少回流重绘；
  合理使用 GPU 加速，避免频繁操作布局属性；
  小图标使用字体图标或 SVG，使用 WebP 等现代图片格式

link VS @import

link 是 HTML 标签，@import 是 CSS 语法。

link 加载 CSS 时并行加载，@import 要等页面加载完才加载，易造成样式闪烁。

link 功能更丰富，可加载图标、预加载等，还能被 JS 操作；@import 只能引入 CSS 且必须写在 CSS 顶部。

实际开发优先使用 link。
回流与重绘

重绘：只改变颜色、背景等不影响布局的样式，只重新绘制这个元素，开销较小

回流：元素尺寸、位置、结构发生变化时，浏览器重新计算布局的过程，开销很大

触发回流：宽高、边距、定位、字体、DOM 增删

回流一定会触发重绘，重绘不一定触发回流。

实际开发中应尽量减少回流，比如批量修改样式、使用 transform 做动画（只触发合成层，不回流不重绘）
使用transform:translate改变位置性能更高，因为它由合成线程处理，不会触发回流和重绘，还能开启 GPU 加速；而修改 top/left 等定位属性会触发回流，重新计算布局，导致动画卡顿。

因此实现位移动画优先使用 transform，而非定位属性。

• BFC 是什么？触发条件、作用
  BFC 是块级格式化上下文，相当于一个独立布局结界，内部元素不会影响外部。
  触发：overflow: hidden、float、绝对定位/固定定位、display:inline-block/flex/grid
  作用：解决父元素高度塌陷（清除浮动）、解决 垂直方向 margin 塌陷、阻止元素被浮动元素覆盖

margin 塌陷：两个垂直相邻的块级元素，它们的上下 margin 会发生合并，最终间距取较大值，而不是相加。
兄弟元素

上面盒子的 margin-bottom 和下面盒子的 margin-top 重叠。
父子元素

子元素的 margin-top 会 "传递" 给父元素，导致父元素一起下移，子元素相对父元素位置不变。
清除浮动

原因：父元素高度为0时，浮动元素脱标，从而影响下面的元素布局、重叠、错位。

方法：父级开启 BFC ,如设置 overflow: hidden；单双伪元素；父元素浮动；额外标签<div style="clear:both;"></div>
clear 属性用于设置元素的左侧或右侧是否允许出现浮动元素。当设置 clear:both 时，该元素会向下移动，直到左右两侧都没有浮动元素为止，间接撑起父容器高度，从而解决浮动造成的高度塌陷问题

• li 之间有空隙/display:inline-block会显示间隙的原因
  标签之间的换行、缩进被浏览器解析为空白空格，从而产生间隙。
  解决方法：
  去掉标签间换行，把 li 写在同一行
  父元素设置 font-size:0
  父元素直接用 flex 布局
  li使用浮动
• 替换元素
  替换元素是内容与外观由外部资源或浏览器决定、不受 CSS 常规内容控制的元素，如 img、input、textarea 等。
  其尺寸计算优先级为：CSS 显式设置 > HTML 属性 > 固有尺寸 > 浏览器默认；单轴约束时自动等比缩放，配合 object-fit/object-position 可控制内容填充方式。

值	效果
fill（默认）	拉伸填满，可能变形
contain	等比缩放到完全容纳，留空
cover	等比缩放覆盖，超出裁剪
none	保持固有尺寸，可能溢出

非替换元素：div、p、span 等（内容由 HTML 文本 / CSS 生成）

• 水平垂直居中

//flex
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
//grid
.parent {
  display: grid;
  place-items: center;
}
//子绝父相+transform
.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
//绝对定位 + 上下左右 0 + margin: auto
.parent { position: relative; }
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}

文本垂直水平居中

line-height：盒子高度

text-align：center

• 两栏布局

//flex 布局
.wrap {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 1; /* 占满剩余空间 */
}

//grid 布局
.wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
}

//子绝父相+margin
.wrap {
  position: relative;
}
.left {
  position: absolute;
  width: 200px;
}
.right {
  margin-left: 200px;
}

//浮动+margin
.left {
  float: left;
  width: 200px;
}
.right {
  margin-left: 200px;
}

• 三栏布局(左右固定、中间自适应)

//Flex 布局
.container {
  display: flex;
}
.left { width: 200px; }
.right { width: 200px; }
.main { flex: 1; }

//Grid 布局
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

//子绝父相+margin
.container { position: relative; }
.left {
  position: absolute;
  left: 0;
  width: 200px;
}
.right {
  position: absolute;
  right: 0;
  width: 200px;
}
.main { margin: 0 200px; }

//  圣杯布局 padding + float + 负 margin
.container {
  padding: 0 200px;
}
.main, .left, .right { float: left; }
.main {
  width: 100%;//将 左右 挤到下一行
}
.left {
  width: 200px;
  margin-left: -100%; //回到上一行
  position: relative;
  left: -200px;
}
.right {
  width: 200px;
  margin-left: -200px;
  position: relative;
  right: -200px;
}

//双飞翼布局float + margin+ 负 margin
.main, .left, .right { float: left; }
.wrap { width: 100%; }
.main {
  margin: 0 200px;
}
.left {
  width: 200px;
  margin-left: -100%;
}
.right {
  width: 200px;
  margin-left: -200px;
}

//外层包裹避免相对定位
<div class="wrap"><div class="main"></div></div> 
<div class="left"></div>
<div class="right"></div>

• CSS 选择器权重
  !important > 行内样式 > ID 选择器 > 类 / 属性 / 伪类 > 标签 / 伪元素> 通配符

相同权重时，后面样式覆盖前面；

继承样式权重最低。

权重分四等，依次是：行内样式、ID、类 / 属性 / 伪类、元素 / 伪元素。

计算时从左向右逐位比较，左边等级高优先级就高，不进行十进制进位，不叠加进位。
可继承属性

文字、颜色、文本、列表样式，目的是统一全文样式。

不可继承属性

盒子模型（宽高、边距、边框）、背景、定位、布局等，避免子元素被父盒子影响。
a 标签默认不继承 color（浏览器自带样式覆盖）

h1~h6 不继承 font-size

background 绝对不继承

width、height、margin、padding 永远不继承

• 元素的层叠顺序
  背景/边框、负 z-index 定位元素、块级元素、浮动元素、行内 / 行内块元素、z-index:0/auto 的定位元素、正 z-index 定位元素。
  层叠只在同一层叠上下文内有效，同层级后面元素覆盖前面。
• display
  display 用于控制元素显示类型
  block 块级独占一行；
  inline 行内不换行不可设宽高；
  inline-block 行内块可设宽高；
  none 隐藏不占空间；
  flex 弹性布局，一维布局；
  grid 网格布局，二维布局。
• Flex
  Flex弹性布局，是 CSS3 提供的一种一维布局方案，通过给父元素设置 display:flex，可轻松控制子元素的排列方向、对齐方式、换行与自适应分配空间。
  所有布局属性分为两类：给父容器用、给子项用。
  容器：flex-direction主轴方向/justify-content主轴对齐方式/align-items交叉轴对齐/flex-wrap是否换行
  子项：flex: 1占满剩余空间/align-self单独控制自己的交叉轴对齐
• position
  有 static、relative、absolute、fixed、sticky。
  static 标准文档流，没有任何 "定位效果"
  relative 相对于自己原来的位置偏移，不脱标，子绝父相；
  absolute 绝对定位，脱标，以最近定位父级/整个文档为参考；
  fixed 相对于浏览器视口定位，滚动页面不会动，脱标；
  sticky 是 relative + fixed 的结合体，正常时像 relative，滚动到阈值时变为 fixed 固定在视口。常用于导航吸顶、表头固定等场景。

absolute 和 fixed 都脱离文档流、可定位、可设层级，都会让 float 失效。

区别是：absolute 相对于最近定位父级，会随滚动移动；fixed 相对于视口，滚动时位置固定不变。
display、float、position 优先级关系：

absolute/fixed ＞ float ＞ display。

当元素设置 absolute 或 fixed 时，float 会失效，display 会被强制转为块级；

设置 float 时，display 也会被转为块级；

最终布局表现由优先级高的属性决定。

• 布局单位
  绝对单位 px 固定大小单位，逻辑像素
  相对单位 em（相对于自身 font-size）、rem（相对于根元素 html 的 font-size，适合移动端适配）、vw/vh （相对视口，用于响应式）、%（相对于父元素）、fr （flex剩余空间分配比例）等。
• line-height
  line-height 表示一行文字的高度，包含文字本身高度 + 上下间距
  用于控制行间距和实现单行文字垂直居中。
  赋值方式有四种：
  纯数字(表示当前字体大小的倍数,子元素继承倍数)
  px、em (子元素继承计算后的值)
  百分比 (子元素继承计算后的值)
  其中纯数字是最推荐的方式，因为子元素继承倍数，会根据自身字体大小自动计算行高，布局更合理。
• 隐藏元素
  display: none 不占空间，触发回流 + 重绘，子元素无法显示，不会触发事件
  visibility: hidden 看不见，元素所占空间保留，触发重绘，子元素可显示，不会触发事件
  opacity: 0 透明，触发重绘，可以触发事件
  position: absolute; left: -9999px 移出可视区域
• 文本溢出隐藏
  单行文本溢出隐藏
  overflow: hidden;
  text-overflow: ellipsis; //省略号
  white-space: nowrap; //是否换行
  多行文本溢出隐藏
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示几行 */
  -webkit-box-orient: vertical;
• transition VS animation

transition 是过渡动画，需要 hover、click 等触发条件，只有开始和结束两帧，只能执行一次；

div {
  transition: all 0.3s ease;
}
div:hover {
  background: red;
}

animation 是关键帧动画，不需要触发可自动运行，配合 @keyframes 定义多段状态，支持循环、交替、反向等复杂控制。

div {
  animation: move 2s infinite;
}
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(300px); }
}

简单过渡用 transition，复杂自动动画用 animation。

• requestAnimationframe
  requestAnimationFrame 是浏览器提供的动画 API，会在浏览器每次刷新前执行回调，保证动画与刷新率同步，流畅不掉帧。
  它会在页面隐藏时自动暂停，节省性能；多个动画会被浏览器合并渲染，减少回流重绘。
  相比 setTimeout，它时机更精准、性能更好，是实现流畅动画的标准方案。

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
//取消
const handle = requestAnimationFrame(animate);
cancelAnimationFrame(handle);

• 预处理器/后处理器

  CSS 预处理器如 Sass/Less，能给 CSS 增加变量、嵌套、函数等编程特性，一种能扩展 CSS 语法的语言，最终会编译成普通 CSS。让样式更易复用和维护，提升开发效率。

  CSS 后处理器如 PostCSS，用于自动处理浏览器前缀、压缩代码、语法降级、移动端适配等，提高兼容性和加载性能。

  两者结合使用，可以让开发更快、代码更健壮、上线更高效。

• 如何判断元素是否到达可视区域

function isFullInView(el) {
//返回元素相对于视口的位置信息
  const rect = el.getBoundingClientRect();
  const windowHeight = window.innerHeight || document.documentElement.clientHeight;//视口高度
  return rect.top >= 0 && rect.bottom <= windowHeight;
}

//监听元素是否进入视口
//适合懒加载、无限滚动
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 进入可视区
    }
  });
});
observer.observe(element);

• 移动端适配

1.设置 viewport，保证宽度等于设备宽度，禁止用户缩放。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

2.选择适配方案：

rem 适配：通过 JS 动态设置 html 的 font-size，把 px 转为 rem；

vw 适配：直接按设计稿比例把 px 转成 vw，更简洁现代。

3.使用 PostCSS 插件（pxtorem）自动转换单位。

4.布局使用 flex /grid 做流式布局，结合媒体查询做细节兼容。

5.确保页面在不同设备上等比例还原设计稿。