前端常见面试题之html和css篇

最新推荐文章于 2024-08-09 20:45:54 发布
最新推荐文章于 2024-08-09 20:45:54 发布
阅读量1.2k 收藏 23
点赞数 24
分类专栏： 前端面试题 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieyucx/article/details/135061162
版权

文章目录

一、html

1. 如何理解html语义化

HTML语义化是指在编写HTML代码时，使用适当的标签来描述内容的含义和结构。

语义化的好处包括：

  1. 增强代码的可读性;
  2. 提高搜索引擎的理解能力;
  3. 方便开发者阅读和维护代码;
  4. 以及更好地支持无障碍访问等。

理解HTML语义化的关键在于正确使用HTML标签来表示内容的含义。以下是一些常见的HTML标签和它们的语义含义：

  1. <header> 标签用于表示页面或区块的头部，比如页面的标题或导航栏。

  2. <nav> 标签用于表示导航栏。

  3. <main> 标签用于表示页面的主要内容。

  4. <article> 标签用于表示独立的文章内容。

  5. <section> 标签用于表示页面或文章的分段内容。

  6. <aside> 标签用于表示与主要内容相关但不属于主要内容的附加信息。

  7. <footer> 标签用于表示页面或区块的底部，比如版权信息或联系方式。

  8. <h1> - <h6> 标签用于表示标题，其中 <h1> 表示最高级别的标题。

  9. <p> 标签用于表示段落。

  10. <ul> 和 <ol> 标签用于表示无序列表和有序列表。

  11. <li> 标签用于表示列表中的每一项。

  12. <a> 标签用于表示链接。

  13. <img> 标签用于表示图片。

  14. <table> 标签用于表示表格。

举例对比说明，假设有一个网页包含一个标题、一段文字内容和两张图片：

  1. 非语义化的HTML代码：
<div class="header">网页标题</div>
<div class="content">这是内容</div>
<div class="image"><img src="image1.jpg" alt="图片1"></div>
<div class="image"><img src="image2.jpg" alt="图片2"></div>

这段代码使用了一些无具体含义的<div>标签来表示页面的结构。这样的代码在没有样式的情况下很难理解页面结构，也不利于搜索引擎对页面内容的分析。

  1. 语义化的HTML代码：
<header>网页标题</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>这是内容</p>
  </article>
  <figure>
    <img src="image1.jpg" alt="图片1">
    <figcaption>图片1的描述</figcaption>
  </figure>
  <figure>
    <img src="image2.jpg" alt="图片2">
    <figcaption>图片2的描述</figcaption>
  </figure>
</main>

这段代码使用了具有明确含义的HTML标签来描述页面结构和内容。<header>表示网页的标题，<main>表示主要内容，<article>表示一篇文章等等。这样的代码清晰易读，有助于理解网页结构和内容。

通过对比可以看出，语义化的HTML代码更直观、易理解，也更便于网页的维护和SEO优化。

2. 说说块级元素和内联元素的区别

在HTML中，块级元素和内联元素是两种不同的元素类型。

块级元素（Block-level elements）：

  • 块级元素通常会在页面中生成一个独立的块，占据一行或者多行的空间。
  • 常见的块级元素有<div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>等。

内联元素（Inline elements）：

  • 内联元素不会在页面中生成一个独立的块，而是与其他元素在一行显示。
  • 常见的内联元素有<span>, <a>, <strong>, <em>, <img>, <input>, <br>等。

块级元素和内联元素的区别主要体现在以下几个方面：

  1. 显示方式：块级元素以块的形式显示，即自动换行且占据一整行或多行的宽度；内联元素则与其他元素在一行上显示，不会换行。
  2. 盒模型：块级元素可以设置宽度、高度、内外边距等样式属性，可以直接控制元素的盒模型；内联元素的宽度和高度由其内容决定，不能直接设置。
  3. 默认样式：块级元素的默认样式是display: block;，而内联元素的默认样式是display: inline;。
  4. 嵌套规则：块级元素可以包含其他块级元素和内联元素；内联元素不能包含块级元素，只能包含其他内联元素或者文本内容。

需要注意的是，可以通过CSS的属性display来改变元素的显示方式，将块级元素设置为内联元素或将内联元素设置为块级元素。

二、css

1. 盒模型的宽度offsetWidth如何计算

盒模型的宽度offsetWidth是指一个元素的整体宽度，包括内容区域的宽度(content)、内边距（padding）以及边框（border）。

在计算offsetWidth时，浏览器会将元素的内容区域宽度、内边距宽度和边框宽度都考虑在内。
举例说明：

假设有一个 div 元素，设置了如下样式：

div {
  width: 300px;
  padding: 10px;
  border: 1px solid black;
}

这个 div 元素的盒模型宽度可以这样计算：

  1. 内容宽度：指定的宽度为 300px。

  2. 内边距和边框宽度：左右两侧的内边距为 10px，上下两侧的内边距为 10px；四条边的边框宽度为 1px。

因此，盒模型的总宽度为 300px + 2 * 10px + 2 * 1px = 322px。

2. box-sizing:border-box有什么用

"box-sizing: border-box;"是一个用于 CSS 的属性，它指定了元素的盒子模型计算方式，并将CSS的宽度（width）和高度（height）的计算方式修改为包括边框（border）和内边距（padding）的计算。

举例来说，如果一个元素宽度被设置为200px并且应用了一些边框和内边距，如果没有使用"box-sizing: border-box;"属性，那么元素的实际宽度将会变大，以包括边框和内边距的大小。而如果使用了"box-sizing: border-box;"属性，元素的实际宽度将会保持为200px，并且边框和内边距将会减少自动适应。

下面是一个示例，展示了使用和不使用"box-sizing: border-box;"属性的区别：

HTML:

<div class="example"></div>

CSS:

.example {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  background-color: lightgray; 
  box-sizing: border-box;
}

在上述例子中，使用了"box-sizing: border-box;“属性，因此元素的实际宽度仍然为200px，包括边框和内边距。如果没有使用该属性，元素的实际宽度将会变为230px（宽度 + 左右边距 + 左右边框），因为默认的"box-sizing"属性值是"content-box”，即只包括内容。

这个属性特别有用的一个场景是当需要制作一个带有固定宽度的网格系统时，可以使用该属性确保每列总宽度都是固定的，而不会因为边框和内边距的存在而超出指定的宽度范围。

3. margin的纵向重叠问题

纵向重叠问题是指当相邻的元素都设置了上下边距（margin），并且上一个元素的下边距与下一个元素的上边距之和超过了一定的阈值（常为负数），则两者之间的垂直间距会取两个边距值中的较大者。

举一个具体的例子，假设有两个相邻的块级元素，分别是div1和div2，它们的CSS样式如下：

div1 {
  margin-bottom: 20px;
}

div2 {
  margin-top: 30px;
}

在正常情况下，div1和div2之间的垂直间距应该是20px+30px=50px。然而，因为它们的边距之和超过了一定的阈值，实际渲染结果会取两个边距值中的较大者，即30px，所以div1和div2之间的垂直间距为30px。

这种纵向重叠问题通常出现在嵌套的块级元素中，比如一个列表中的每个列表项（li）都设置了上下边距，而整个列表外又设置了上下边距。当边距值的和超过了阈值时，列表项之间会出现较大的垂直间距，而不是累加所有边距值的和。为了避免这个问题，可以使用其他的方式来实现元素之间的间距，如padding、border等。

4. 谈谈你对BFC的理解和应用

BFC是块格式化上下文（Block Formatting Context）的缩写，BFC可以看作是一个封闭的容器，容器内的元素布局不会影响到容器外的元素。

形成bfc的条件

条件描述
根元素根元素（html）默认就是一个 bfc
浮动元素浮动元素（float不为none）
绝对定位元素绝对定位元素（position为absolute和fixed）
display为inline-block、table-cell等display为inline-block、table-cell等
overflow不为visibleoverflow不为visible的块级元素

常见的bfc应用场景：

  1. 清除浮动：当容器内部有浮动元素时，容器的高度会塌陷，不会撑开容器。我们可以通过创建一个BFC来清除浮动，使得容器能够正常显示高度。可以通过给容器设置overflow: hidden或者display: table来创建BFC。

  2. 防止外边距合并：在正常流布局中，相邻的块级元素的垂直外边距会发生合并，导致元素之间的间距变大。但是在BFC中，相邻块级元素的垂直外边距不会合并。可以通过给元素创建BFC来防止外边距合并，可以通过设置float、position: absolute、overflow: hidden等属性来创建BFC。

  3. 实现多列布局：BFC可以实现多列布局，通过给容器设置column-count或者column-width属性，可以将容器内的内容按照多列进行布局。由于每一列都处于独立的BFC中，因此列与列之间的布局互不影响。

5. 清除浮动有哪些方式

清除浮动的方式有以下几种：

  1. 使用clearfix
    需要在浮动元素的父元素中添加clearfix类，然后通过该类设置clear:both属性来清除浮动。示例代码如下：
<div class="clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
  1. 使用空元素添加clear属性
    在浮动元素的父元素中添加一个空元素，然后使用clear属性来清除浮动。示例代码如下：
<div class="clear-float">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div style="clear: both;"></div>
</div>
  1. 使用overflow:hidden
    在浮动元素的父元素中设置overflow属性为hidden，可以使父元素自动包含浮动子元素，从而清除浮动。示例代码如下：
<div class="float-parent">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

.float-parent {
  overflow: hidden;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

6. 使用flex布局实现骰子3

效果如下：
在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>骰子三点布局</title>
    <style>
      .dice {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
      }

      .dot {
        width: 10px;
        height: 10px;
        background-color: #000;
        border-radius: 50%;
        margin: 2px;
      }

      .dot:nth-child(1) {
        align-self: flex-start;
      }

      .dot:nth-child(3) {
        align-self: flex-end;
      }
    </style>
  </head>
  <body>
    <div class="dice">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </body>
</html>

主要考察的是交叉轴的align-self属性。

7.position的absolute和relative定位问题

position:absolute使元素的位置相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（通常是浏览器窗口）进行定位。使用position:absolute时，可以使用top、bottom、left和right属性来指定元素相对于其定位父元素的偏移位置。绝对定位的元素会完全从正常的文档流中脱离，并且不保留其空间

position:relative则使元素相对于正常文档流进行定位。在使用position:relative时，可以使用top、bottom、left和right属性来指定元素相对于其原始位置的偏移。相对定位不会从元素在正常文档流中的位置中删除元素。相对定位的元素仍然占据其原始的空间，因此周围的元素不会发生布局变化

为什么常用“子绝父相”进行定位布局？

"子绝父相"是指子元素使用position:absolute进行定位，父元素使用position:relative进行定位的布局方式。这种方式常用于构建复杂的页面布局，具有一些优点：

  1. 父元素的position:relative会创建一个新的定位上下文，使得子元素相对于其定位，而不会影响其他元素的布局。
  2. 子元素的position:absolute允许完全自由的定位。可以通过指定top、bottom、left和right属性来控制子元素在父元素中的精确位置。
  3. 可以方便地创建重叠和层叠效果，使得布局更加灵活。

举个例子，假设我们有以下HTML代码：

<div class="parent">
  <div class="child"></div>
</div>

CSS代码如下：

.parent {
  position: relative;
  height: 200px;
  width: 200px;
  background-color: lightblue;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 50px;
  width: 50px;
  background-color: red;
}

在这个例子中，父元素（class=“parent”）被设置为position:relative，这意味着子元素（class=“child”）将相对于父元素进行定位。子元素使用position:absolute进行定位，并且设置top和left属性使其与父元素的左上角偏移50像素。

8. 水平居中的实现方式

  1. 使用text-align属性：可以在父元素上设置text-align属性为"center"，将其子元素水平居中对齐。
.parent {
  text-align: center;
}

.child {
  display: inline-block;
}
  1. 使用margin属性：通过设置子元素的左右margin值为"auto"，可以将其水平居中对齐。
.parent {
  width: 300px;
}

.child {
  margin-left: auto;
  margin-right: auto;
}
  1. 使用flexbox布局：使用flexbox布局可以轻松实现水平居中对齐。
.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* no additional styling needed */
}
  1. 使用grid布局：通过将子元素放置在父元素的中心单元格中，可以实现水平居中对齐。
.parent {
  display: grid;
  place-items: center;
}

.child {
  /* no additional styling needed */
}
  1. 使用绝对定位与transform属性：通过将子元素的左右偏移设置为50%并且使用transform属性的translateX(-50%)将其平移回来可以实现水平居中对齐。
.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

9.水平垂直居中的实现方式

  1. 使用绝对定位和transform属性：

    <div class="container">
  <div class="centered">
    <!-- 内容 -->
  </div>
</div>

.container {
  position: relative;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

    将父容器设置为相对定位，然后将子容器设置为绝对定位，通过设置left和top为50%，再使用transform属性将内容向左和向上平移50%的宽度和高度，从而实现水平垂直居中对齐。

  2. 使用Flexbox布局：

    <div class="container">
  <div class="centered">
    <!-- 内容 -->
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

    将父容器设置为Flex布局，并使用justify-content: center;和align-items: center;属性使内容在水平和垂直方向上都居中对齐。

  3. 设置容器的text-align属性为center，使文本在容器中水平居中
    根据目标元素的高度，调整line-height的值，使得目标元素在容器中垂直居中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>垂直居中</title>
    <style>
      .container {
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 1px solid black;
      }

      .target {
        border: 1px solid red;
        display: inline-block;
        line-height: normal;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="target">居中文本</div>
    </div>
  </body>
</html>
  1. 绝对定位加margin:auto实现
    可以使用绝对定位和margin:auto来实现水平垂直居中，可以按照以下步骤进行操作：
  • 父元素需要设置position: relative，用于作为相对定位的基准。
  • 子元素需要设置position: absolute，以便于进行绝对定位。
  • 子元素设置top: 0，left: 0，bottom: 0，right: 0，这样可以将子元素拉伸至父元素的边界。
  • 子元素设置margin: auto，让子元素在父元素中居中。

效果如下:
在这里插入图片描述
示例代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>margin:auto居中</title>
    <style>
      .parent {
        position: relative;
        width: 600px;
        height: 500px;
        background-color: lightgray;
      }

      .child {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 200px;
        height: 100px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">垂直水平居中</div>
    </div>
  </body>
</html>

10. line-height继承问题

1.当父元素的line-height属性设置为具体像素值50px时，子元素会继承父元素的line-height属性值。无论子元素的font-size属性值是多少，它的行高将始终是50px。

例如，假设父元素的line-height设置为50px，子元素的font-size设置为20px，那么子元素的行高也将是50px。

<div class="parent">
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS样式如下：

.parent {
  line-height: 50px;
}

.child {
  font-size: 20px;
}

2.当父元素的line-height属性设置为数值3时，子元素会继承该比例。具体取决于子元素的font-size属性值。

假设父元素的line-height属性值为3，子元素的font-size属性值为16px。那么子元素的行高计算如下：

  1. 子元素的行高计算公式是：line-height = 父元素的line-height * 子元素的font-size。
  2. 父元素的line-height属性值是3，子元素的font-size属性值是16px，所以子元素的行高计算公式是：line-height = 3 * 16px。
  3. 子元素的行高计算结果是48px。
    因此，子元素的行高为48px。这意味着子元素的文本内容将在每行之间保留48px的空白区域。

如下

<div class="parent">
  <p class="child">这是子元素</p>
</div>

CSS代码：

.parent {
  font-size: 20px;
  line-height: 3;
}

.child {
  font-size: 16px;
}

3.当父元素的line-height属性设置为百分比200%时，子元素会继承父元素的line-height属性计算后的结果。具体取决于父元素的font-size属性值。

<style>
    .parent {
        font-size: 20px;
        line-height: 200%;
    }
    .child {
        font-size: 16px;
    }
</style>

<div class="parent">
    <div class="child">子元素的文本内容。</div>
</div>

在上述代码中，父元素的line-height属性值设置为200%（即2倍的字体大小），父元素的font-size属性值为20px。子元素的font-size属性值为16px。

根据继承机制和计算规则：

  1. 父元素的line-height属性值会以父元素的font-size属性值为基准进行计算。即父元素的line-height计算结果为20px * 200% = 40px。
  2. 子元素会继承父元素的计算后的line-height属性值。因此，子元素的line-height属性值也为40px。

11. rem，em，px

在CSS中，rem、em和px都是用于指定元素大小的单位。

  1. rem（根元素相对单位）：rem单位是相对于根元素（即元素）的字体大小的单位。如果根元素的字体大小为16px，则1rem等于16px。rem单位的主要优势是能够根据根元素的字体大小进行自适应调整，适用于响应式设计。

  2. em（相对父元素单位）：em单位是相对于最近的父元素的字体大小的单位。如果父元素的字体大小为16px，则1em等于16px。em单位与rem单位不同之处在于，它是根据父元素的字体大小而不是根元素的字体大小进行计算的。因此，em单位也可以用于实现相对父元素的布局。

  3. px（像素单位）：px单位是像素单位，1px表示屏幕上的一个物理像素，不受其他因素影响。px单位是固定大小的单位，无法根据用户设置进行调整。由于设备显示的物理像素不同，使用px单位可能导致在不同设备上显示不一致的问题。

总结：

  • rem单位根据根元素的字体大小进行调整，适用于响应式设计。
  • em单位根据父元素的字体大小进行调整，适用于相对布局。
  • px单位是固定的像素单位，不受其他因素影响，适用于精确布局。

12. vw和vh

在CSS中，vw（Viewport Width）和vh（Viewport Height）是相对于视口大小的单位。

  • vw：1vw等于视口宽度的1%。例如，如果视口的宽度是1000px，那么1vw就等于10px。
  • vh：1vh等于视口高度的1%。例如，如果视口的高度是800px，那么1vh就等于8px。

vw 和 vh 单位的用途是根据设备的视口大小（即浏览器窗口大小）来调整元素的尺寸。这对于创建响应式布局非常有用，可以使元素在不同设备和窗口尺寸下保持一致的比例。

例如，如果你希望一个元素的宽度占据视口宽度的 50%，你可以使用以下代码：

.element {
  width: 50vw;
}

同样地，如果你希望一个元素的高度占据视口高度的 30%，你可以使用以下代码：

.element {
  height: 30vh;
}

通过使用 vw 和 vh 单位，你可以创建具有自适应性质的布局，使得网页在不同大小的屏幕上都能良好地展示。

jieyucx
关注
专栏目录
2024 前端高频面试题之 HTML/CSS 篇
Aybuai的博客
01-18 2377
使用float布局两侧使用 margin 负值，以便和中间内容横向重叠防止中间内容被两侧覆盖，一个用padding为两侧留白 一个用margin为两侧留白。
前端 html,css 经典面试题 16道 （20220322）
weixin_59519449的博客
03-22 4024
1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。 H5新特性有： 语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket 移除了： 1、显现层元素：basefont 、big、center、font、s、strike、tt、u 2、性能较差元素：fr...
HTML+CSS面试题整理（持续更新）
m0_69250830的博客
06-01 904
• 行内元素在同一行显示，不可以设置宽高，宽高由内容撑开，padding、margin 左右显示准确，上下显示不准确，margin:0 auto,不生效，可以给内联元素添加一个外层的盒子形成一个大的区域，给该盒子设置 text-align:center 的居中属性，添加浮动可以解决内联元素之间的间歇，也能将内联元素的元素类型转换为块元素，例如span b strong i em a u del img。会失效，内联元素设置定位转换成块元素。
第一章 面试题基础篇（HTML+CSS）
最新发布
欢迎来到我的博客！
08-09 1743
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/reset.css 是一个css文件，用来重置css样式的。normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。
前端面试题------HTML&CSS篇
weixin_34191734的博客
09-21 198
2019独角兽企业重金招聘Python工程师标准>>> ...
Web前端面试题——HTML/CSS部分理解题
热门推荐
u012194956的博客
09-14 2万+
1.盒子模型 （1）是什么：每个元素被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 （2）盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 （3）两种盒模型的区别：标准盒模型内容大小就是conten...
HTML CSS面试题
weixin_61151047的博客
09-08 478
一、盒模型 1、什么是盒子模型？ 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。 2、盒子模型有两种。 1、标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 2、怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了pad...
前端面试题题库（HTML + CSS）
weixin_53412458的博客
12-22 2043
关于前端HTML+CSS的一些面试题
前端开发面试题–htmlcss篇
01-20
面试题往往旨在考察候选人的理论理解、实际应用以及解决问题的能力。以下是对这些知识点的详细解释： 1. **盒子模型** - **标准盒模型**（默认值）：CSS中的`box-sizing: content-box`规定元素的宽度和高度只包含...
2023年前端面试题（含答案）之HTML+CSS篇（一）
qq_41838305的博客
03-13 716
为了帮助你获得面试官的青睐，顺利通过面试，跳槽进入大厂，走上人生巅峰，整理了一些前端面试，希望对在面试中或学习工作中的你有所帮助！
前端面试题，包含HTML，css，js
11-07
前端面试题涵盖HTML、CSS和JavaScript，这些都是前端开发者必须掌握的核心技术。以下是对这些知识点的详细解释： 1. **浏览器兼容性**：前端开发者需要确保他们的页面在多种浏览器上正常工作，包括基于不同内核的...
html与css面试题
水势年华的博客
12-25 403
1、什么是盒子模型？ 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 2、行内元素有哪些？块级元素有哪些？ 空(void)元素有...
各大互联网公司前端笔试面试题–HTML,CSS篇
逍遥绝情的博客
04-18 2011
1.每个HTML文件里开头都有个很重要的东西，DOCTYPE，知道这是干什么的吗？ 答案：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面） 2.div+css的布局较table布局有什么优点？ 改版的时候更方便 只要改css文件。 页面加载速度更快、结构化清晰
前端HTML CSS基础面试题
微风的博客
11-21 530
## html5的新特性 1.自定义属性 data-id 2.语义化标签 3.音频，视频 4.画布 Canvas 5.地理API 6.本地离线存储 7.表单控件 data time email url search number ## CSS3新特性 1.文字阴影(text-shadow) 2.边框:圆角(border-radius) 边框阴影: box-shadow; 3.盒子模型: box-sizing; 4.背景:background-size background-origin 5.渐变：l.
前端面试题总结 — html 和 css 篇
qq_41914185的博客
08-30 895
语义化标签；display属性值；隐藏元素；元素居中；响应式布局；盒子模型；flex；z-index；重绘；回流（重排）；transform；css优化
前端面试题---html/css
weixin_44501366的博客
10-07 1259
!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li
前端面试题之html css篇
WY_ALA的博客
03-28 2438
当我们对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础的盒模型，将所有的元素表示为一个个的矩形的盒子一个盒子有四个部分组成，content（实际内容，显示文本和图像）、padding（内边距）、border（边框）、margin（外边距）盒模型有两种：分别是标准盒模型和怪异盒模型(IE盒模型)标准盒模型的总宽度：width=margin(左右)+padding(左右)+border(左右)+content(内容)怪异盒模型的总宽度。
前端面试经典题目合集（HTML+CSS）（一）
Bidding
07-15 4287
1、浏览器页面有哪三层构成，分别是什么，作用是什么? 参考答案 构成：结构层、表示层、行为层  分别是：HTML、CSS、JavaScript  作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。 2、HTML5的优点与缺点？ 参考答案 优点： a、网络标准统一、HTML5本身是由W3C
html css面试题
weixin_65607135的博客
09-02 1158
外边距是调整盒子在页面中的位置的，它的属性有：margin-left，margin-top，margin-right，margin-bottom，分别对应的是左，上，右，下，例如margin-left：50px；在我们的页面布局当中，我们会经常使用浮动，浮动是很重要的，因为在布局中我们经常使用块元素，而块元素的特点是独占一行 ，所以我们在水平布局上无法布局，那么浮动就可以解决无法在水平方向上的布局的困扰，设置浮动的元素会脱离文档流。那么1em=20px，2em=40px；Important;
2014年BAT及互联网公司前端面试题：HTML与CSS篇
"这篇资源主要包含了2014年BAT（百度、阿里巴巴、腾讯）以及其它互联网公司在前端面试中关于HTML和CSS的部分笔试题目。题目覆盖了基础到深入的前端知识，旨在考察候选人的实际技能和对不同浏览器内核的理解。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值