likes
comments
collection
share

一些前端面试题CSS 选择器的优先级是如何计算的?CSS 如何清除浮动?什么是 JSON?它与 XML 有何不同?解释一

作者站长头像
站长
· 阅读数 23

解释一下什么是 HTML?

1. HTML (超文本标记语言)

  • 定义:HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言。
  • 作用:HTML 被用来定义网页的结构和内容,是前端开发的基础。
  • 地位:HTML 与 CSS 和 JavaScript 组成了现代 Web 开发的“三剑客”。
  • 形象比喻:如果把一个网页比作一个人的话,HTML 就像是这个人的骨骼和肌肉,提供了基本的结构;CSS 则像是衣服和化妆,负责外观和样式;而 JavaScript 就像是大脑和神经系统,赋予网页动态行为和交互能力。

HTML 的基本结构

  • 文件扩展名:HTML 文件通常使用 .html 作为扩展名。
  • 根标签:所有 HTML 文档都必须包含一个根标签 <html>,所有的其他 HTML 标签都必须位于此标签内。
  • 标签类型:如 <div>,它通常独占一行,可以包含其他块级元素或行内元素,如<span>,它不会独占一行,通常与其他行内元素并排显示。
  • 语义化标签:
<header>
  页面头部,例如logo、搜索栏等
  <nav>
    导航模块,例如菜单栏
    <main>
      主要内容区域
      <article>
        独立的内容区块
        <section>
          独立且与主体相关的,例如页眉、章节
          <aside>
            与主要内容相关的辅助信息,例如侧边栏、注释
            <footer>某个页面或者区域的底部,例如版权信息、联系方式</footer>
          </aside>
        </section>
      </article>
    </main>
  </nav>
</header>

这些标签不仅提高了网页的可读性和可访问性,还帮助搜索引擎更好地理解页面结构和内容。

HTML 在框架中的使用

  • Vue.js:Vue 使用 <template> 标签来定义模板结构,通常在单文件组件 (SFC) 中使用。
  • React.js:
    1. React 使用 JSX(一种 JavaScript 的语法扩展)来定义组件结构,但在实际编译后的代码中会转换为标准的 HTML。
    2. 在 React 中,<></> 代表的是一个 Fragment,也称为 片段。它是一种特殊的 React 元素,用于包裹一组子元素,而不会在 DOM 中生成额外的节点。这使得你可以在返回多个元素时不引入额外的 DOM 结构,从而保持组件的输出干净且高效。

CSS 有哪些盒模型?它们之间的区别是什么?

css 的盒子模型分为标准盒子模型和怪异盒子模型

  • 标准盒子模型:

    1. 这是 W3C 定义的盒模型,也是默认的盒模型。
    2. 标准盒模型是现代浏览器默认采用的模型。
    3. box-sizing:content-box;使用标准盒模型。
    4. 宽度只包括内容区。例如:向外计算,宽度 100px + 内边距 10px = 当前宽度(120px)
  • 怪异盒子模型(IE 盒子模型):

    1. 这个盒模型最初是由 Internet Explorer 5 实现的,在一些特定情况下使用。
    2. IE 盒模型主要用于处理一些旧版浏览器的兼容性问题,例如在某些 IE 版本中的非严格模式。
    3. box-sizing: border-box;使用 IE 盒模型。
    4. 宽度包括内容区、边框、内边距。例如:向内计算,宽度 100px + 内边距 10px = 当前宽度(100px)

JavaScript 中 var, let, const 的区别是什么?

  • var 具有函数作用域,可以被提升,可以在同一作用域声明多次

    1. var 声明的函数作用域,在函数内部声明的只能在函数内部访问;函数外部声明的变量是全局作用域
    2. var 的变量会提升到作用域的顶部,意味着可以在声明之前引用
    3. 可以在同一作用域多次声明相同的 var,但是这会导致 var 的值会更新
    4. 在全局作用域声明 var 变量会变成全局对象(window)的属性
  • let 具有块作用域,意味着只在当前声明的代码块中有效,例如在{...}

    1. let 声明的变量不会提升,如果在声明之前访问会抛出一个 ReferenceError
    2. 不能在同一作用域声明多个相同的 let,这样做会导致 SyntaxError
    3. let 的变量可以重新被赋值
  • const 常量,声明后不可修改,但是声明的值为对象和数组时,其中的值可修改

    具有块作用域,不会被提升,不能在同一作用域多次声明,不能被重新赋值

    1. 不能在同一作用域内多次使用 const 重新声明同一个变量。

解释一下什么是 BOM 和 DOM?

  • BOM(浏览器对象模型)

    BOM 并不是一个具体的标准,而是浏览器厂商方便开发者更好的操作浏览器窗口提供的 API。BOM 允许 javascript 访问浏览器的各种特性,可以进行一些基本的浏览器操作,例如打开新的窗口,修改浏览器状态栏等等

    BOM 的主要组成部分是:

    1. window:浏览器的窗口,是 BOM 的核心,几乎所有的 BOM 都是 window 的属性。
    2. location:提供当前页面 URL 的访问和控制,例如读取 URL 中携带的参数
    3. navigator:提供浏览器的信息,例如平台、版本号
    4. history:运行脚本操作浏览器的历史记录,例如回退到上一页、下一页
    5. screen:提供用户的的屏幕信息、分辨率
  • DOM(文档对象模型)

    DOM 是一个跨平台(不同操作系统、不同设备、不同浏览器)和语言中立(不同编程语言,例如 Python、PHP)的接口,它将 HTML 和 XML 文档表现为树结构,使程序和脚本能更轻松的更改文档的结构、样式和内容。DOM 规范由 W3C 维护的一个标准。

    DOM 的主要概念

    1. node(节点):DOM 中的基本构建单元,包括元素节点、属性节点、文本节点等。

    2. element(元素):HTML 或 XML 文档中的标签,每个标签都是一个元素节点。

    3. attribute(属性):附加在元素上的键值对,用于指定元素的特性。

    4. document(文档):整个 HTML 或 XML 文档的顶级节点。

    DOM 的主要功能是对元素的选删改查。

    1. 选取:使用 getElementById、getElementsByClassName 等方法获取节点。
    2. 修改:改变元素的内容、属性、样式
    3. 添加:向文档中添加元素
    4. 删除:将文档中现有的元素移除
  • BOM 和 DOM 的区别在哪里?

    BOM 关注的是浏览器: 它提供了一种与浏览器交互的方式,如窗口弹出、关闭等。DOM 关注的是文档: 它关注文档本身,即 HTML 或 XML 文档的结构和内容,允许开发者通过 JavaScript 操作这些文档。

什么是 JSON?它与 XML 有何不同?

  • JSON 是一种轻量级的数据交换格式,易于阅读和编写,也易于机器解析和生成。
  • JSON 和 XML 的不同有哪些?
    1. JSON 是键值对的形式表示数据,XML 是标签形式表示数据的。
    2. JSON 不支持添加注释,XML 支持。
    3. JSON 轻量级、解析深度块、易读性强,适合现代 Web 开发(例如在前端开发中有着广泛的应用,从数据交换、配置管理到数据存储,都是非常有用的工具)。XML 语法复杂、支持注释,适用于一些特定领域及场景(企业级应用和传统系统、技术文档和出版物、需要层次结构和注释的配置)。

CSS 如何清除浮动?

  • 使用 clear 属性,在浮动元素之后添加一个清除浮动的元素。

    这种方法通过在浮动元素之后添加一个空的 div 或其他元素,并设置其 clear 属性为 both,来确保浮动元素不会影响其后的元素布局。

      <style>
        .box {
          width: 400px;
          height: 400px;
          background-color: #efe388;
        }
    
        .float1,
        .float2 {
          width: 100px;
          height: 100px;
          background-color: #ffadad;
          float: left; /* 添加浮动 */
        }
    
        .float1 {
          background-color: #8beecf;
          margin: 20px 0 0 0;
        }
    
        .clear {
          clear: both;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="float1"></div>
        <div class="float2"></div>
        <div class="clear"></div>
      </div>
    </body>
    

    为什么有效?

    1. 浮动元素:.float1 和 .float2 由于设置了 float: left;,会脱离正常的文档流,导致 .box 容器的高度塌陷。
    2. 清除浮动:.clear 元素通过设置 clear: both;,确保其之前的浮动元素不会影响其后的元素布局。这样,.box 容器的高度会包含浮动元素的高度,避免了高度塌陷的问题。
  • 使用 overflow 属性,将包含浮动元素的容器的 overflow 属性设置为 auto 或 hidden。

    优点:简单易用(直接设置)、兼容性好(ie8 以上都支持)、自动调整高度

    缺点:可能引起滚动条(auto 内容超出容器的高度时)、隐藏溢出内容(hidden 超出容器会裁剪)、可能影响其他样式

  • 使用 ::after 伪元素,通过在包含浮动元素的容器上使用 ::after 伪元素,并设置 content 属性为空字符串,可以清除浮动。(推荐)

最好的解决方法

 <style>
      .box {
        width: 400px;
        height: 400px;
        background-color: #efe388;
      }

      /* 使用 .clearfix 类来清除浮动 */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
      }

      /* 真正清除浮动的伪元素 */
      .clearfix::after {
        clear: both;
      }

      /* 额外的处理,防止 IE6/7 的兼容性问题 */
      .clearfix {
        zoom: 1; /* 仅在 IE6/7 下生效 */
      }

      .float1,
      .float2 {
        width: 100px;
        height: 100px;
        background-color: #ffadad;
      }

      .float1 {
        background-color: #8beecf;
        margin: 50px 0 0 0;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="float1"></div>
      <div class="float2"></div>
    </div>
  </body>
  1. .clearfix::before.clearfix::after: 这两个伪元素的作用是创建一个匿名表格单元格(display: table;),这有助于解决某些情况下可能出现的外边距塌陷问题。
  2. content: ''; 用于生成一个空的内容,这是伪元素存在的必要条件。
  3. display: table; 使得这些伪元素像表格单元格一样行为,这有助于它们在布局中正确地占据空间,主要是为了兼容性和保险起见。
  4. .clearfix::after:{clear: both;} clear: both:这是清除浮动的关键。它确保了 .clearfix 容器内的所有浮动元素都被正确地包含在其父容器中,防止父容器的高度塌陷。换句话说,clear: both 告诉浏览器:“从这个点开始,不要再让任何元素绕过前面的浮动元素”
  • 使用 Flexbox 布局可以避免使用浮动,从而自然地解决浮动带来的问题

    简单粗暴,直接给父元素添加display: flex;即可

CSS 选择器的优先级是如何计算的?

优先级由四个部分组成,按照从高到低的顺序分别是:

  1. 内联样式 :直接写在 HTML 元素的 style 属性中的样式。
  2. ID 选择器 :每个 ID 选择器增加一个计数。
  3. 类选择器、属性选择器和伪类 :每个类选择器、属性选择器和伪类增加一个计数。
  4. 标签选择器和伪元素 :每个标签选择器和伪元素增加一个计数。

!important 可以覆盖任何优先级。

转载自:https://juejin.cn/post/7426886728059928611
评论
请登录