2024前端面试 -- HTML5 + CSS3篇

因为是锦啊
187 阅读4分钟

【前端面试系列】：

一、 HTML5：

1. 语义化的理解

在写HTML页面结构时所用的标签有意义:

  • 头部用head 主体用main 底部用foot...
  • 怎么判断页面是否语义化了？
    • 把CSS去掉，如果能够清晰的看出来页面结构，显示内容较为正常
  • 为什么要选择语义化？
    1. 让HTML结构更加清晰明了
    2. 方便团队协作，利于开发
    3. 有利于爬虫和SEO
    4. 能够让浏览器更好的去解析代码
    5. 给用户带来良好的体验

2. HTML5的新特性：

  1. 语义化的标签
  2. 新增音频视频
  3. 画布canvas
  4. 数据存储localstorage、sessionstorage
  5. 增加了表单控件email、url、search...
  6. 拖拽释放API

3. 解决了哪些移动端的兼容问题？

  1. 当设置样式overflow:scroll/auto时，IOS上的滑动会卡顿：-webkit-overflow-scrolling: touch；
  2. 在安卓环境下placeholder文字设置行高时会偏上： input有placeholder属性的时候不要设置行高；
  3. 移动端字体小于12px时异常显示：应该先把在整体放大一倍，然后再用transform进行缩小；
  4. ios下input按钮设置了disabled属性为true显示异常：
input[typy=button]{
    opcity:1
}
  1. 安卓手机下取消语音输入按钮：
input::-webkit-input-speech-button{
     display:none
}
  1. IOS下取消input输入框在输入引文首字母默认大写：
<input autocapitalize='off' autocorrect='off'/>
  1. 禁用IOS和安卓用户选中文字：-webkit-user-select: none;
  2. 禁止IOS弹出各种窗口：-webkit-touch-callout:none;
  3. 禁止IOS识别长串数字为电话：添加meta属性
<meta conten='telephone=no' name='format-detection'>

二、 CSS3

1. CSS盒子模型：

  • 在HTML中，所有元素都可以看作是一个盒子；盒子的组成：内容content、内边距padding、边框border、外边距margin
  • 盒子模型的类型：box-sizing
    1. 标准盒子模型content-box（默认）：margin+border+padding+content
    2. IE盒子模型border-box：margin+content(border+padding)

2. CSS选择器的优先级：

css的特性：继承性、层叠性、优先级

优先级：!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

3. 隐藏元素的方法有哪些？

  • display:none;：元素在页面上消失，不占据空间
  • opacity:0;：设置了元素的透明度为0，元素不可见，占据空间位置
  • visibility:hidden;：让元素消失，占据空间位置，一种不可见的状态
  • position:absolute;
  • clip-path

4. px和rem：

  • px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度
  • rem，相对单位，相对于 html 根节点的 font-size的值，直接给 html节点的 font-size:62.5%;、1rem = 10px; （16px*62.5%=10px）

5. 重绘重排有什么区别？

  • 重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
  • 重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制

浏览器的渲染机制

  • 对DOM 的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排
  • 对DOM 的样式进行修改，比如color 和 background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘

6. 让一个元素水平垂直居中的方式有哪些？

  1. 定位 + margin
  2. 定位 + transform
  3. flex布局
  4. grid布局
  5. table布局

7. CSS的哪些属性哪些可以继承？哪些不可以继承？

子元素可以继承父类元素的样式

  1. 字体的一些属性：font
  2. 文本的一些属性：line-height
  3. 元素的可见性：visibility:hidden
  4. 表格布局的属性：border-spacing
  5. 列表的属性：list-style
  6. 页面样式属性：page
  7. 声音的样式属性

8. CSS3的新特性

  1. 新增选择器：属性选择器、伪类选择器、伪元素选择器
  2. 增加了媒体查询
  3. 文字阴影
  4. 边框
  5. 盒子模型box-sizing
  6. 渐变
  7. 过度
  8. 自定义动画
  9. 背景的属性
  10. 2D 和 3D
avatar
文章
阅读
粉丝