:-)

主题

盒子模型 ？

一个盒子由四个部分组成：content、padding、border、margin

什么是BFC？ 怎么触发BFC，BFC有什么应用场景？

块格式化上下文（Block Formatting Context，BFC）是一个独立的渲染区域，用于定义块级元素的布局规则。在BFC内部，块级盒模型（block-level box）的布局彼此独立，不受到外部元素的影响，同样，外部元素也不会影响到BFC内部的元素。

触发条件：

  • 根元素，即 <html>
  • 浮动元素：float 值为 left 、right
  • overflow 值不为 visible，即为 auto、scroll、hidden
  • display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • 绝对定位元素：position 值为 absolute、fixed

应用：

  • 左列浮动（定宽或不定宽都可以），给右列开启 BFC（浮动盒的区域不会和 BFC 重叠）
  • 防止外边距（margin）重叠
  • 父子元素的外边距重叠
em/px/rem/vh/vw 这些单位有什么区别 ？
  • px：绝对单位，页面按精确像素展示
  • em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算
  • rem：相对单位，可理解为root em, 相对根节点 html 的字体大小来计算
  • vh、vw：主要用于页面窗口大小布局，在页面布局上更加方便简单
有哪些方式可以隐藏页面元素？有什么区别 ?
  • display: none - 元素不可见，不占据空间，无法响应点击事件
  • visibility: hidden - 元素不可见，占据页面空间，无法响应点击事件
  • opacity: 0 - 元素不可见，占据页面空间，可以响应点击事件
  • position: absolute - 元素不可见，不影响页面布局
  • clip-path(clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); - 元素不可见，占据页面空间，无法响应点击事件
box-sizing 属性值有什么用？

用来控制元素的盒子模型的解析模式，默认为 content-box。

  • context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
  • border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽
CSS 模块化的理解

  • BEM 命名规范: 块（block）、元素（element）、修饰符（modifier）

  • CSS Modules: 引入我们的 CSS 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式。在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。

  • CSS In JS: emotion

position

MDN - position

  • static: 静态定位, 默认值
  • relative：相对定位，相对于其正常位置进行定位
  • absolute：相对于第一个非 static 祖先元素进行定位
  • fixed: 相对于浏览器窗口进行定位
  • sticky: 相对定位和固定定位的混合, 元素在跨越特定阈值前为相对定位，之后为固定定位
怎么实现样式隔离 ？
  • 作用域样式（Scoped Styles）
  • CSS Modules
  • 命名约定 BEM
  • CSS-in-JS（emotion）
选择器优先级 ?

!important > style > id > .class 、 [type="text"]、:hover > div、::after > 通配选择器

怎么使用 CSS 如何画一个三角形
css
#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
CSS 哪些属性可以继承

  1. 字体属性：

    • font-family
    • font-size
    • font-weight
    • font-style
    • font-variant
    • font-stretch
    • font（这是一个简写属性，用于设置上述所有字体属性）

  2. 文本属性：

    • text-indent
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
    • word-spacing
    • white-space
    • direction
    • vertical-align（注意，它仅对inline、table-cell和inline-block元素有效）

  3. 颜色属性：

    • color

  4. 列表属性：

    • list-style
    • list-style-type
    • list-style-position
    • list-style-image

  5. 表格布局属性：

    • caption-side
    • empty-cells
    • table-layout

  6. 其他属性：

    • cursor
    • visibility
CSS 提高页面性能？
  • 资源压缩
  • 不要使用 @import
  • 内联首屏关键CSS
  • 减少使用昂贵的属性（box-shadow/ border-radius/ filter/ :nth-child）
  • 异步加载CSS
  • 合理使用选择器
animation、transition、transform 有什么区别 ？
  • animation 属性用于创建复杂的动画序列
  • transition 属性用于在状态变化时平滑过渡
  • transform 属性用于对元素进行变形
怎么做移动端的样式适配 ？

  • 响应式设计（Responsive Design）：使用 CSS 媒体查询（Media Queries）来根据设备的特征（如屏幕宽度、高度、方向等）应用不同的样式。通过设置百分比宽度、最大宽度或相对单位（比如 rem）来确保元素相对于其容器的大小进行自适应。（媒体查询，百分比，vw/vh，rem）。

  • 弹性布局（Flexbox）和网格布局（Grid）

  • 移动端优先（Mobile-first）：首先定义移动端的样式，然后使用媒体查询逐渐添加更大屏幕上的样式，以确保基本功能在小屏幕上也能正常工作。

如何实现单行或多行文本溢出的省略样式？
css
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行
p {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
如何使用 CSS 完成视差滚动效果？
css
section {
  height: 100vh;
}

.g-img {
  background-image: url(...);
  background-attachment: fixed; /** 关键 */
  background-size: cover;
  background-position: center center;
}


.box {
  perspective: 1px;
  transform-style: preserve-3d; 
  transform: translateZ(-1px);
}
说说对 CSS 工程化的理解
  • 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
  • 编码优化：怎样写出更好的 CSS？
  • 构建：如何处理我的 CSS，才能让它的打包结果最优？
  • 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

预处理器：Less、 Sass 等；重要的工程化插件： PostCss；Webpack loader 等 。

CSS预编语言的理解，以及它们之间的区别?

CSS预编语言是一种基于 CSS 的扩展语言，可以更加方便和高效地编写 CSS 代码。其主要作用是为 CSS 提供了变量、函数、嵌套、继承、混合等功能，以及更加易于维护和组织的代码结构。

优点：结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。less 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 less 代码一同编译。

常见的css预编语言有Sass、Less和Stylus等，它们之间的区别如下：

  • 语法不同: Sass 和 Less 使用类似于 CSS 的语法规则，而 Stylus 则使用了更加简洁和灵活的缩进式语法。
  • 变量定义方式不同：Sass 使用$符号来定义变量，Less使用@符号，Stylus 则直接使用变量名即可。
  • 操作符和函数库不同：Sass 和 Less 支持常见的操作符和函数库，例如运算符、颜色处理、字符串处理等，而 Stylus 的函数库更加强大，支持更多的特性和功能。
  • 编译方式不同：Sass 和 Less 都需要通过编译器进行编译，可以将预编译的代码转换成标准的 CSS 代码。而 Stylus 则可以直接在浏览器中解析和执行，可以动态调整样式和布局。
z-index 属性在什么情况下会失效？
  • 父元素 position 为 relative 时，子元素的 z-index 失效
  • 元素没有设置 position 属性为非 static 属性
  • 元素在设置 z-index 的同时还设置了 float 浮动
前端实现动画有哪些方式？
  • CSS3的 transition 属性
  • CSS3的 animation 属性
  • 原生 js 动画
  • 使用 canvas 绘制动画
  • SVG 动画
  • 使用 gif 图片
CSS 动画和 js 实现的动画分别有哪些优缺点？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms。

CSS 动画: 优点：

  • 浏览器可以对动画进行优化
  • 代码相对简单, 性能调优方向固定
  • 对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而 JS 则需要撰写额外代码

缺点：

  • 运行过程控制较弱, 无法附加事件绑定回调函数
  • 代码冗长，想用 CSS 实现稍微复杂一点动画, 最后 CSS 代码都会变得非常笨重

js动画： 优点：

  • 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
  • 动画效果比 CSS3 动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
  • CSS3 有兼容性问题，而JS大多时候没有兼容性问题

缺点：

  • 代码的复杂度高于 CSS 动画
  • js 在浏览器的主线程中运行，而主线程中还有其它需要运行的 JavaScript 脚本、样式计算、布局、绘制任务等, 对其干扰导致线程可能出现阻塞，从而造成丢帧的情况
js和 CSS 是如何影响 DOM 树构建的？
  • js 会阻塞 DOM 生成
  • CSS 又会阻塞 js 的执行
分析比较 opacity:0、visibility:hidden、display:none 优劣和适用场景

结构：

  • display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
  • visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
  • opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承:

  • display: none 和 opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
  • visibility: hidden：是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible; 可以让子孙节点显示。

性能:

  • display:none : 修改元素会造成文档回流, 读屏器不会读取display: none元素内容，性能消耗较大
  • visibility:hidden : 修改元素只会造成本元素的重绘, 性能消耗较少读屏器读取 visibility:hidden 元素内容
  • opacity: 0 ：修改元素会造成重绘，性能消耗较少
CSS 优化、提高性能的方法有哪些？
  • 避免过度约束
  • 避免后代选择符
  • 避免链式选择符
  • 使用紧凑的语法
  • 避免不必要的命名空间
  • 避免不必要的重复
  • 最好使用表示语义的名字
  • 避免 !important，可以选择其他选择器
  • 尽可能的精简规则，你可以合并不同类里的重复规则
为什么要初始化 CSS 样式？

浏览器的兼容问题，不同浏览器对标签的默认值不同，会造成页面在不同浏览器的显示存在差异。

硬件加速的原理是什么？

硬件加速就是依赖 GPU 实现图形绘制加速。软硬件加速的区别主要是图形的绘制究竟是 GPU 来处理还是 CPU，如果是 GPU，就认为是硬件加速绘制，反之，则为软件绘制。

常用的硬件加速方法有：

  • translate3d、translateZ
  • opacity
  • will-change
  • <video>
  • <iframe>
  • <canvas>
  • <webgl>
  • flash
CSS 匹配规则？
  • CSS样式匹配规则： 从右到左进行匹配，从底层向上查找
  • CSS文件匹配顺序： 匹配 CSS 文件越往后定义的规则
link 和 import 有什么区别？
  • link 属于 HTML 标签，而 @import 是 CSS 提供的
  • link 同时加载； @import 会等到页面被加载完再加载
  • @import 只在 IE5 以上才能识别，而 link 无兼容问题
  • link 方式的样式的权重高于 @import 的权重
为什么会出现浮动？什么时候需要清除浮动？ 清除浮动的方式有哪些？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素（内联元素）会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

  • 父级 div 定义 height
  • 最后一个浮动元素后加空 div 标签 并添加样式clear:both
  • 包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto
  • 父级 div 定义 zoom
flex

容器：

  • flex-direction、flex-wrap、flex-flow、justify-content（水平）、align-items（垂直）、align-content。

项目：

  • flex-grow、flex-shrink、flex-basic、flex、order、align-self
多列布局/瀑布流 ？

CSS3 引入了多列布局，可以实现瀑布流效果。通过设置容器的column-count和column-gap属性，可以指定列数和列间距。然后，将需要展示的元素作为容器的子元素，它们会自动按照多列进行排列。

示例代码：

html
<style>
  .container {
    column-count: 3;
    column-gap: 20px;
  }

  .item {
    break-inside: avoid; /* 防止元素被拆分到不同列 */
    margin-bottom: 20px; /* 元素之间的间距 */
  }
</style>

<body>
  <div class="container">
    <div class="item">...</div>
    <div class="item">...</div>
  </div>
</body>
垂直居中
  • flex
css
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh;
}

.item {
  margin: auto; /* 第二种方法 */
}
  • grid
css
.container {
  display: grid;
  align-items: center; /* 垂直居中 */
  justify-items: center; /* 水平居中， 注意写法 */  
  height: 100vh; 
}

.item {
  margin: auto; /* 第二种方法 */
}
  • position, transform
css
.container {
  position: relative;
  height: 100vh;  
}

.box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
  • table
css
.container {
  display: table;
  width: 100%;
  height: 100vh;
}

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;  /* 如果需要水平居中 */
}
  • line-height
css
.center {
  height: 100px;
  line-height: 100px;
}
  • line-height, vertical-align
css
.container {
 height: 300px; 
 line-height: 300px;
} 

.box { 
 vertical-align: middle;
}

Powered by VitePress.

Copyright © qzjiang | qizhi.jiang@outlook.com