2024前端面试题（一）

HTML

1.Doctype作用？标准模式与混杂模式如何区分？

<!DOCTYPE>告诉浏览器使用哪个版本的html规范来渲染文档。DOCTYPE不存在或形式不正确会导致html文档以混杂模式呈现。

标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示

2.HTML语义化理解

通过合理地使用特定的标签来代替无意义的类名或ID，使得页面的结构和内容更加容易理解

• 助于提升用户体验，便于搜索引擎优化（SEO），对于其他设备的解析也更为友好。
• 有利于代码可读性，开发者能清晰的看出网页的结构，便于团队的开发与维护。

3.link与@import 的区别

• link属于元素标签，不存在兼容性问题，@import需要 IE5 以上才能使用
• link可以使用 js 动态引入，@import不行
• 解析到link时页面会同步加载所引的css，@import所引用的 css 会等到页面加载完才被加载
• link可以定义 RSS，定义 Rel 等作用，@import只能用于加载 css

4.行内元素和块级元素的区别

• 行内元素：不会独立出现在一行，不能设置宽高，margin和padding值，只有左右有效。例如：span, strong, img, a 。
• 块级元素：独占一行，可以设置宽高，结尾自动带有换行符。例如：div , p ,form , ul , li , ol , dl 。
• 行内元素转换成块元素display:block;。块元素转换成行内元素：display:inline。

CSS

1. 盒子模型

页面渲染时，dom元素所采用的布局模型。可通过box-sizing进行设置。

• content-box (W3C 标准盒模型)
• border-box (IE 盒模型)

2. BFC-块级格式化上下文

是一个独立的渲染容器，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

• 触发条件:

  • 根元素
  • position: absolute/fixed
  • display: inline-block / table
  • float 元素
  • ovevflow !== visible

3. 元素居中布局

• 水平居中

  • 行内元素: text-align: center
  • 块级元素: margin: 0 auto
  • absolute + transform
  • flex + justify-content: center

• 垂直居中

  • line-height: height
  • absolute + transform
  • flex + align-items: center
  • table

• 水平垂直居中

  • absolute + transform
  • flex + justify-content + align-items 

4. 选择器优先级

• !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
• 选择器从右往左解析

5.去除浮动影响，防止父级高度塌陷

• 通过增加尾元素清除浮动
  • :after / <br> : clear: both
• 创建父级 BFC
• 父级设置高度 

6.position属性值

• static 默认值，没有定位，元素正常在文档流中显示
• relative 相对定位，相对于原来的位置进行定位
• absolute 绝对定位，相对于static定位以外的一个父元素进行定位。
• fixed 绝对定位，相对于浏览器窗口
• sticky 粘性定位，基于用户滚动位置

7.css实现一个三角形

将元素宽高设为0，设置border属性实现。

div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}