前端常见面试题：HTML+CSS

发布于：2024-04-17 ⋅ 阅读:(23) ⋅ 点赞:(0)

在这里插入图片描述

1. title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别：

  • title标签用于定义整个HTML文档的标题，它显示在浏览器窗口的标题栏或者标签页上。每个HTML文档只应该有一个title标签，它对搜索引擎优化（SEO）非常重要。
  • h1标签用于定义最重要的标题，通常是页面的主标题。页面可以有多个h1标签，尽管从结构化和SEO的角度来看，通常推荐页面只有一个主要的h1标签。

b与strong的区别：

  • b标签用于将文本加粗，不带有特别的语义含义，仅仅是为了视觉上的强调。
  • strong标签也是用来将文本加粗，但它具有语义重要性，表示文本非常重要或紧急。搜索引擎可能会给予strong标签内的文本更多的关注。

i与em的区别：

  • i标签用于以斜体显示文本，通常用于技术术语、外来语、船只名称等，主要用于表现形式上的变化，没有特定的语义。
  • em标签用于表示强调，会以斜体显示文本。与i标签不同，em标签具有语义重要性，表示文本应该被理解为具有强调的意味，这种强调可能影响内容的理解。
2. 块状元素和行内元素有哪些区别

块状元素和行内元素主要在布局行为上存在区别：

  • 块状元素（Block elements）通常显示为新的一行，并且会尽可能占据其父容器的全部宽度，即使其内容并不足以填满整个宽度。块级元素可以设置宽度和高度，它的宽高属性通常被用来精确地控制布局。例如，div, p, section 和 form 都是典型的块状元素。
  • 行内元素（Inline elements）不会打断文本流，即不会开始新的一行，它们出现在句子中就像文字一样。行内元素通常不可以设置宽度和高度，它们的大小直接由内容决定。例如，span, a, img 和 strong 是常见的行内元素。
3. 介绍一下前端的css盒模型？盒子模型的构造？

CSS盒模型为页面上的每个元素生成一个矩形盒子，并决定其大小、位置和与其他元素的关系。这个盒子包含了元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。

盒模型分为2种类型：标注盒模型 box-sizing: content-box 、IE盒模型 box-sizing: border-box;。

4. background-size: cover和contain区别

CSS属性 background-size 允许你控制背景图片的尺寸，其中 cover 和 contain 是两种设置模式：

  • cover 模式会确保背景图片完全覆盖背景区域。图片将被等比例缩放，直至完全覆盖容器的全部面积，这可能会导致图片的某些部分被裁剪掉。
  • contain 模式则确保图片完整显示在背景区域内，图片将被等比例缩放，直至其最长的边符合容器的相应尺寸。这通常会导致背景不完全被图片覆盖，周围留有空白。
5. 外部文件和内联样式哪个优先级更高

CSS的优先级（Cascading Order）是由多个因素决定的。当比较内联样式和外部样式时：

  • 内联样式（在元素的 style 属性中直接写入的样式）拥有最高的优先级，除非有更具体的选择器使用了 !important 声明。
  • 外部文件或内部样式表中的样式的优先级较低，它们的优先级取决于选择器的具体性和规则定义的顺序。
6. 什么是margin重叠问题？如何解决？

Margin重叠（或称折叠）是块级元素在垂直方向上的外边距可能会合并成一个单一外边距的现象，这通常发生在兄弟元素或父子元素之间。解决方法：

  • 在父元素（BFC）上设置 overflow: hidden, overflow: auto, 或任何非 visible 的 overflow 值，这可以阻止子元素的外边距与父元素外边距的合并。
  • 使用边框（border）或内边距（padding）来物理隔离元素间的外边距，从而阻止它们重叠。
7. css中的定位方式都有哪些？

CSS提供了多种定位策略来控制元素的布局和位置：

  • 静态定位（position: static）是默认的定位方式，元素按照正常文档流排列。
  • 相对定位（position: relative）允许你将元素相对于其在文档流中的初始位置进行偏移。
  • 绝对定位（position: absolute）使元素的位置相对于最近的已定位的父元素进行定位，脱离了正常的文档流。
  • 固定定位（position: fixed）将元素的位置相对于浏览器窗口进行定位，即使滚动页面也不会移动。
  • 粘性定位（position: sticky）是相对和固定定位的混合体，它根据用户的滚动位置在相对和固定定位之间切换。
8. 绝对定位设置top：50%是相当于谁来计算的？

在使用 position: absolute 时，top: 50% 的参照物是元素的最近的已定位的祖先元素。这意味着元素将相对于该祖先元素的高度移动到50%的位置，这通常用于垂直居中元素。

9. transform的属性

CSS中的 transform 属性允许你对元素进行变形，如旋转、缩放、移动或倾斜。常见的 transform 函数包括：

  • rotate(): 旋转元素，例如 rotate(45deg) 会将元素顺时针旋转45度。
  • scale(): 缩放元素，scale(2) 会使元素宽高放大两倍。
  • translate(): 移动元素，如 translate(100px, 50px) 会使元素向右移动100px，向下移动50px。
  • skew(): 倾斜元素，例如 skew(30deg, 20deg) 会在X轴倾斜30度，在Y轴倾斜20度。
10. animation怎么使用？

通过指定动画名称和关键帧来使用。例如：

@keyframes myAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: myAnimation 2s infinite;
}

animation 是CSS中控制动画的一个强大属性，它允许你设置动画序列的时间、速度曲线、持续时间等。基本语法包括：

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}
  • name: 动画关键帧的名称。
  • duration: 完成动画所需的时间。
  • timing-function: 动画的速度曲线。
  • delay: 动画开始前的延迟。
  • iteration-count: 动画的重复次数。
  • direction: 动画是否应该反向播放。
  • fill-mode: 指定在动画执行之前和之后如何应用样式。
11. 怎么设置渐变的属性？

CSS渐变可以通过 background-image 设置，渐变类型包括线性渐变（linear-gradient()）和径向渐变（radial-gradient()）。例如：

background-image: linear-gradient(to right, red, blue);

这创建一个从左到右的红到蓝的线性渐变效果。

12. BFC实现原理

块格式化上下文（Block Formatting Context, BFC）是Web页面中的一个独立渲染区域，它决定了块盒子的布局并与外界隔离。创建BFC的方式有多种，包括使用 overflow 不为 visible 的属性值、浮动元素、绝对定位元素等。BFC可以用来清除浮动带来的影响，防止相邻元素的外边距折叠。

13. 如何清除浮动

清除浮动是为了解决父元素高度塌陷的问题，常用的技术有使用额外元素或伪元素清除浮动。伪元素方法是最流行的，通常称为 “clearfix”：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

这段CSS会在使用 clearfix 类的元素后添加一个不可见的伪元素，该元素执行清除操作，从而确保父元素包含其浮动子元素。

14. css flex 的各个属性值

Flexbox 是一个用于在页面上布置元素的强大工具，它允许灵活的布局方式，不受容器尺寸的限制。以下是Flexbox的核心属性：

  1. 容器属性（父元素） :

    • display: 设置为 flex 启用 flex 布局。
    • flex-direction: 设置主轴的方向（如 row, column）。
    • flex-wrap: 设置元素是否换行。
    • justify-content: 设置主轴上的对齐方式。
    • align-items: 设置交叉轴上的对齐方式。
    • align-content: 多行/列对齐方式。

  2. 项目属性（子元素） :

    • flex-grow: 设置项目的放大比例。
    • flex-shrink: 设置项目的缩小比例。
    • flex-basis: 设置项目在分配多余空间之前的默认大小。
    • align-self: 允许单个项目有与其他项目不一样的对齐方式。
15. 使用flex 实现一个九宫格

一个简单的九宫格可以使用以下Flexbox CSS来实现：

.container {
    display: flex;
    flex-wrap: wrap;
    width: 300px; /* 容器宽度 */
}
.item {
    flex: 0 0 33.33%; /* 每个子元素占据行宽的三分之一 */
    height: 100px; /* 高度可以自定义 */
    box-sizing: border-box;
    border: 1px solid #ccc; /* 可选，为了更好的视觉效果 */
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
16. 说一说 flex 布局，有了解 Grid 么

Flexbox 主要用于一维布局，即在单个方向（行或列）上。而 Grid 布局是为更复杂的二维布局设计的，可以同时处理行和列的布局。Grid 布局提供了更为复杂和灵活的布局能力，适合用于更大规模的页面布局设计。

17. less 与 sass 区别，技术选型时如何取舍；
  • LESS 和 SASS 都是CSS预处理器，它们允许使用变量、嵌套规则、混入（Mixins）、函数等功能来编写更动态的CSS。
  • SASS 提供更多的功能和配置选项，是更成熟的选择。它有两种语法：原始的缩进语法（.sass）和类CSS语法（.scss）。
  • LESS 使用JavaScript实现，可能更容易为JavaScript开发者接受。
  • 技术选型时考虑项目需求、团队熟悉度和现有项目基础。
18. css 如何实现让一个元素旋转并横向移动，如果只用一个 css 属性；

若只使用一个CSS属性，可以利用 transform 来实现：

.element {
    transform: rotate(45deg) translateX(100px);
}
19. 水平垂直居中有几种方式
  1. 使用Flexbox（灵活且现代的方式）

Flexbox提供了一个非常简单的方式来居中子元素：

.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    height: 100vh;           /* 或者任意高度 */
}
  1. 使用Grid（适用于更复杂的布局）

Grid布局同样提供了一个简洁的方式来实现居中：

.container {
    display: grid;
    place-items: center; /* 同时设置水平和垂直居中 */
    height: 100vh;
}
  1. 使用定位和Transform（适用于所有浏览器）

利用绝对定位与CSS的 transform 属性可以实现跨浏览器的居中：

.container {
    position: relative;
    height: 100vh;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 向左和向上偏移自身宽高的50% */
}
  1. 使用定位和负边距（较老的方法）

通过绝对定位和负边距也可以实现居中，但需要知道子元素的尺寸：

.container {
    position: relative;
    height: 300px;
}

.centered {
    width: 100px;          /* 必须指定宽高 */
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 负边距是宽高的一半 */
    margin-left: -50px;
}
  1. 使用表格布局（老式但有效）

使用 display: table 和 display: table-cell 也可以实现居中：

.container {
    display: table;
    width: 100%;
    height: 100vh;
}

.centered {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
  1. 使用行内块和文本对齐（适用于文本或行内元素）

如果要居中的元素是行内元素，可以使用文本对齐和垂直对齐：

.container {
    text-align: center;
    height: 100vh;
    line-height: 100vh; /* 确保容器高度与行高一致 */
}

.centered {
    display: inline-block;
    vertical-align: middle;
    line-height: normal; /* 重置行高 */
}
  1. 使用视口单位和CSS Calc（较新的技术）

可以利用视口单位（vw/vh）和calc函数动态计算位置：

.centered {
    width: 50vw;
    height: 50vh;
    position: absolute;
    top: calc(50% - 25vh);
    left: calc(50% - 25vw);
}
20. border画一个三角形

利用边框透明技术：

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red; /* 颜色和方向可调 */
}
21. canvas 绘制流程，canvas 里的图片跨域怎么处理；

Canvas 绘制流程和跨域问题处理

  • 绘制流程：首先创建canvas元素，然后使用JavaScript来绘制。
  • 跨域问题：若从不同源地址加载图片，需服务器支持CORS或使用代理。
22. 如何解决 1px 问题？

在高分辨率屏幕上，可以使用viewport的scale设置，或使用边框图片、背景图的手段来实现。

在高分辨率屏幕（如Retina显示屏）上，由于物理像素与设备独立像素的比率较高，通常称为设备像素比（Device Pixel Ratio, DPR），常规的1像素（1px）CSS尺寸可能看起来比预期更细。这是因为浏览器会将1 CSS像素渲染成多个物理像素。解决这一问题，即“1px问题”，可以通过以下几种方法来实现：

  1. 使用Viewport的缩放

通过设置视口的scale，可以调整CSS像素的实际大小。可以通过调整viewport元标签来设定，使得CSS的1像素与设备的1物理像素相等。

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">

这种方法将缩放整个视口，但可能会导致布局其他部分的显示效果不佳。

  1. 使用媒体查询根据设备像素比调整边框宽度

这种方法依赖于CSS的媒体查询来检测设备像素比，并相应地调整样式。例如，对于设备像素比为2的屏幕，可以将边框设置为0.5px，这样在屏幕上的实际显示效果会接近传统屏幕上的1px。

.border {
    border: 1px solid black;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    .border {
        border-width: 0.5px;
    }
}
  1. 使用伪元素实现单像素边框

可以使用CSS伪元素来创建视觉上的1px边框。这种方法利用了伪元素的绝对定位和scale变换。

.element {
    position: relative;
    height: 50px; /* 示例高度 */
    width: 50px;  /* 示例宽度 */
}

.element:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid black;
    transform-origin: 0 0;
    transform: scale(0.5);
    box-sizing: border-box;
}

这里使用transform: scale(0.5);在设备像素比为2的屏幕上创建视觉上的1px边框。

  1. 使用SVG

通过SVG画线也可以创建“1px”的线条，这种线条不受设备像素比影响。

<svg width="100%" height="1" viewBox="0 0 1 1" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="1" y2="0" stroke="black" stroke-width="0.5"/>
</svg>

在SVG中设置stroke-width为0.5可以在高DPR设备上实现更精确的1px效果。

23. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
  • 物理像素：显示屏上实际的像素点。
  • 逻辑像素：设备独立像素，CSS像素。
  • 像素密度：每英寸包含的像素数量，高密度屏幕可以显示更清晰的图像。

在移动端开发中使用 @2x, @3x 图片是为了适配不同密度的屏幕。

24. css文件在加载的过程种出现了阻塞会怎样加载html文档10ms、加载css10s会出现什么现象

当网页在加载过程中遇到 CSS 文件加载阻塞时，会出现以下一系列现象和行为，这些是由浏览器的渲染机制决定的：

  1. CSS 文件是渲染阻塞资源

CSS 文件被视为“渲染阻塞资源”，这意味着浏览器必须先加载并解析完所有的 CSS 文件才能正确渲染页面。CSS 文件的加载和解析直接影响到 DOM 的渲染过程。

  1. HTML 文档的加载
  • HTML文档加载（10ms） ：假设HTML文档在10毫秒内快速加载完毕，浏览器将开始解析HTML文档并构建DOM树。
  • 遇到外部CSS文件：在构建DOM树的过程中，一旦遇到外部链接的CSS文件，浏览器会立即发起对该CSS文件的请求。
  1. CSS 文件加载延迟（10s）
  • CSS加载阻塞：如果CSS文件需要10秒钟才能加载完成，浏览器会在这期间暂停DOM的渲染。这是因为CSS可能会影响DOM元素的样式，浏览器需要确保它拥有所有相关的样式信息，才能准确渲染每个元素。
  • 渲染等待：在CSS文件加载和解析过程中，用户将看到一个空白页面。即使HTML已经被加载和解析，没有CSS，浏览器不会继续渲染页面内容。
  1. 完成加载后的渲染
  • CSS文件加载完成：一旦CSS文件加载并解析完成，浏览器就会继续渲染过程，结合DOM树和CSSOM树来渲染页面。
  • 页面显示：此时，用户开始看到完整渲染的页面。如果CSS加载时间很长，这将显著影响用户体验，因为用户在等待期间只能看到空白页面。

用户体验影响：长时间的CSS加载会导致页面渲染阻塞，从而影响用户体验。用户在等待页面加载的过程中只能看到空白屏幕，这可能导致用户流失。

优化策略：

  • 优化CSS文件大小：减少CSS文件的体积，例如通过压缩CSS、移除未使用的规则。
  • 使用非阻塞加载技术：利用异步加载或延迟加载CSS的技术，比如使用<link rel="preload" as="style" onload="this.rel='stylesheet'">来预加载CSS。
  • 关键CSS内联：将影响首屏显示的关键CSS规则内联在HTML中，以确保即使外部CSS文件尚未加载，页面也能尽快展现。
25. 移动端高清方案如何解决 ?

解决移动端高清显示方案通常涉及以下几个主要策略：

  1. 视网膜图像或高分辨率图像：设计图像时，可以创建图像的高分辨率版本，通常是标准分辨率的两倍或更多。在设备上，根据设备的屏幕分辨率（如设备像素比DPR）动态选择合适的图像版本。
  2. 适用矢量图形 (SVG) ：对于图标和某些图形，使用矢量图形（SVG）而不是位图图形（如PNG或JPG），因为矢量图形可以无损地缩放到任何大小，从而在高分辨率设备上保持清晰。
  3. CSS媒体查询和响应式设计：使用CSS媒体查询来根据屏幕的特性（如分辨率和设备像素比）调整样式，这包括图像大小、字体大小和界面元素的布局。
  4. 字体图标和Web字体：使用字体图标和Web字体而不是图像图标，因为它们可以无损放大，适应高分辨率显示。
  5. 前端框架和库的支持：使用支持高清显示的前端框架和库，例如Bootstrap、Foundation等，这些框架和库提供了内置的高清支持方案。
  6. 客户端和服务器端的适应性图像解决方案：使用如srcset属性的HTML5标准，允许浏览器根据设备的屏幕特征加载合适的图像。服务器端可以使用图像服务来动态生成和提供适合每个设备的图像版本。

这些策略可以单独使用或结合使用

26. 移动端响应式布局怎么实现的?

通过媒体查询、百分比布局和rem单位来实现，以及现代框架如Bootstrap或Flexbox、Grid布局的帮助。

27. 为什么说用 css 实现动画比 js 动画性能好？

使用CSS实现动画通常比使用JavaScript实现动画具有更好的性能，主要基于以下几个原因：

  1. 硬件加速：CSS动画可以利用GPU加速，而JavaScript动画通常只能使用CPU。特别是涉及 transform 和 opacity 属性的动画。当使用这些属性时，浏览器可以将动画的渲染工作从CPU转移到更加专门化的GPU，这可以显著提升动画的渲染效率和流畅度。GPU对于处理图形和动画特别有效，因为它能并行处理大量数据，从而加快渲染速度。
  2. 主线程减负：CSS动画通常不会影响主线程的性能，因为它们由浏览器直接在合成阶段处理，而JavaScript动画执行可能会与其他JavaScript任务竞争主线程资源。
  3. 浏览器优化：现代浏览器针对CSS动画有内置的优化措施。例如，浏览器可以自动最小化对动画影响的计算量，通过合成层（compositing layers）来优化动画元素的处理。浏览器还可以在不需要时跳过某些计算步骤，如不在视口内的动画。这种优化自动发生，不需要开发者手动干预。
  4. 帧率控制：CSS动画允许浏览器控制动画的帧率，通常是尽可能接近显示器的刷新率（大多数显示器为60Hz，即60fps）。这使得动画看起来更平滑，而且浏览器可以智能地调整动画的性能以匹配硬件能力。
  5. 简洁性和易维护性：CSS动画通常更简单、代码更少，并且更易于维护。
28. 什么是合成层?

合成层（Compositing Layers）是浏览器渲染页面的一种技术，它将页面分解成多个层次，每个层可以独立进行渲染和处理。这种技术允许浏览器利用GPU进行硬件加速，尤其在处理动画和页面交互时，可以显著提升性能和用户体验。

合成层的工作原理：在浏览器渲染页面时，通常遵循以下步骤：

  1. 解析HTML形成DOM树。
  2. 解析CSS生成CSSOM树。
  3. 布局（Layout） ：计算出所有元素的位置和大小。
  4. 绘制（Paint） ：将元素的内容渲染到图层（Layers）。
  5. 合成（Composite） ：将多个图层合并成最终在屏幕上显示的图像。

在不使用合成层的传统渲染流程中，任何对元素的更改通常都需要重新布局和重绘整个页面或大部分页面。这可能非常耗费性能。

创建合成层的情况：不是所有元素都自动获得一个合成层。某些CSS属性可以触发合成层的创建，例如：

  • 使用CSS属性 transform 和 opacity 进行动画处理时。
  • 使用 will-change 属性提示浏览器该元素将有复杂变化。
  • 应用 position: fixed 或 position: sticky。
  • 启用3D转换，如 translateZ() 或 perspective()。

合成层的优点：

  • 性能提升：允许浏览器利用GPU进行渲染，尤其在动画和页面交互中，可以减少延迟和卡顿。
  • 减少重绘和重排：合成层的元素可以独立于页面的其余部分进行处理，这意味着对这些元素的更改不会引起广泛的布局计算或重绘。
  • 平滑的动画和过渡：因为合成层可以高效地利用硬件加速。

合成层的潜在问题：

虽然合成层带来了许多优势，但滥用或不当使用也可能导致问题：

  • 内存使用：每个合成层都需要单独的图形资源，这可能会增加GPU的内存使用。
  • 过度优化：过多地强制使用合成层可能导致性能下降，因为浏览器需要管理更多的层次结构。
29. 移动端一个元素拖动，如何实现和优化？
30. 尽可能多实现pdd app导航布局实现（就是类似4等分div并列排布）

使用flex布局可以轻松实现：

.nav {
    display: flex;
}
.nav-item {
    flex: 1;
}

<div class="nav">
    <div class="nav-item">首页</div>
    <div class="nav-item">发现</div>
    <div class="nav-item">消息</div>
    <div class="nav-item">我的</div>
</div>

CSS渐进增强和优雅降级之间的区别

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布