HTML与CSS

HTML

1. HTML5 新特性

  1. 新的语义化元素:main(主要内容区)、footer(底部)、header(头部)、nav(导航)、section(块)
  • 什么是语义化:有利于 SEO,有利于开发者去开发
  • 什么是 SEO:搜索引擎优化(让你的网站在搜索排名靠前)
  • SEO 优化:SSR 服务端渲染(nuxt)
  1. 新的表单控件:date、time、email、url、search(可说可不说)
  • 功能可以,但是样式太丑了,不好修改,实际开发不怎么使用。
  • 开发一般使用 UI 组件库:element-ui、element-plus 等
  1. 新的 API:
  • 音视频:audio 和 video 元素
    • 扩展:流媒体视频播放技术(未来讲)
  • 绘图图形:canvas 元素 -> echarts
    • 扩展:大屏数据可视化(图形图表展示、适配、数据实时交互)(未来讲)
  • 本地存储:localStorage,sessionStorage
    • 一般用于存储:token 和 用户数据
    • 扩展 1:localStorage 和 sessionStorage 区别:
      • localStorage 持久化存储,不删除会一直在
      • sessionStorage 会话存储,浏览器一旦关闭会自动清除
    • 扩展 2:将登录持久化(7 天免登录):
      • token -> jwt
        • 登录将 token 给存储起来(vuex/pinia 访问速度更快,访问速度更快, localStorage 持久化存储
        • 发送请求携带 token(在封装 axios 函数的请求拦截器中添加 token 请求头参数发送给服务器)
      • cookie/session
        • 服务器返回 cookie,浏览器会自动存储
        • 发送请求浏览器会自动携带 cookie
      • 扩展 3:无痛刷新 token(未来讲)
  • 多线程操作:Web Worker(未来讲)
    • 扩展:Web Worker 可以开启分线程,将来大量计算工作会交给分线程做(优化)

2. 常见的行内元素和块级元素有哪些?它们的区别?

  1. 行内元素 span i a
  2. 块级元素 div p ul/li header/footer form
  3. 行内块元素 img input

区别:

  1. 行内和行内块元素一行多个,块级元素独占一行
  2. 行内元素不能设置 width/height,行内块和块级元素可以设置

3. 谈谈 iframe

  1. 概念

在当前页面嵌套其他页面(父页面套多个子页面)

  1. 通信
  • 同源情况
    • 父 -> 子
      • 获取子页面 iframe 标签
      • 给子页面绑定 onload 事件
      • 在事件回调函数中才能获取(操作)子页面的 DOM 元素
    • 子 -> 父
      • window.parent
  • 不同源情况
    • 传递数据:postMessage 方法
    • 接受数据:onmessage 事件
  1. 应用

A 项目使用 B 项目

iframe 升级版:微前端框架(qiankun)

4.script标签的async和defer有什么区别

  • 普通的script标签:当解析到这个标签时,会停止html解析,先去请求和执行js代码,之后再继续往下解析html,会阻塞页面渲染
  • async script标签:当解析到这个标签时,异步发送请求获取js资源,当js资源请求回来后,如果html还没解析完,会停止解析,先执行js代码,执行完后再往下解析html,所以这个有可能会阻塞页面渲染
  • defer script标签:当解析到这个标签时,会异步发送请求获取js资源,js资源请求回来后,会等待html解析完成后再去执行js代码,所以这个不会阻塞页面的渲染

CSS

1. CSS3 新特性

  1. 新增了选择器
  • :last-child 匹配父元素的最后一个子元素
  • :nth-child(n) 匹配父元素的第 n 个子元素
  1. 边框特性
  • border-radius 圆角
  1. 颜色与不透明度
  • opacity: 0.5;
  • color: rgba(0, 0, 0, 0.5)
  1. 阴影
  • text-shadow 文字阴影
  • box-shadow 盒子阴影
  1. transform 变形
  • transform: rotate(9deg) 旋转
  • transform: scale(0.5) 缩放
  • transform: translate(100px, 100px) 位移
  1. 过渡与动画
  • transition 过渡
  • animation 动画

Vue 中 transition 组件,用来给显示隐藏切换的元素一个动画/过渡效果

  1. 媒体查询

BootStrap 的栅格布局,Element-Plus 中 Row / Col 组件

2. 盒模型

  1. 概念:页面渲染时,DOM 元素所采用的布局模型。 可通过 box-sizing 进行设置。
  2. 分类:
  • content-box (W3C 标准盒模型)
    当给元素设置 width 和 height 时,只会改变 width + height。
  • border-box (IE 盒模型)
    当给元素设置 width 和 height 时,会改变 width + height + padding。
  • 其他未实现了

3. BFC

  1. 概念
  • BFC,又称为块级格式化上下文,指的是:一个独立的渲染区域.
  1. 触发条件(开启 BFC)
  • 设置 overflow,即 hidden,auto,scroll
  • 设置浮动,不包括 none
  • 设置定位,absolute 或者 fixed 等方式
  • display: flow-root
  1. 具体规则
  • BFC 是一个块级元素,块级元素在垂直方向上依次排列。
  • BFC 是一个独立的容器,内部元素不会影响容器外部的元素。
  • 属于同一个 BFC 的两个盒子,外边距 margin 会发生重叠,并且取最大外边距。
  • 计算 BFC 高度时,浮动子元素也要参与计算。
  1. 应用
  • 阻止 margin 重叠
  • 清除浮动,防止高度塌陷
  • 阻止标准流元素被浮动元素覆盖

4. 选择器权重&优先级

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

5. CSS 预处理器(Sass/Less/Stylus)

  1. 概念:CSS 预处理器定义了一种新的语言,增强了 css 功能,可以更方便的维护和管理 CSS 代码

他一共有:Less、Sass、Stylus

  1. 比如我最常用的 Sass
  • 可以使用 $ 来定义变量
  • 可以样式嵌套
  • 可以通过 mixin 来定义混合,复用代码
  • 可以通过 extends 来继承复用代码
  1. 开发中写样式
  • 一般都会定义 variables.scss 来定义项目样式常量:颜色、大小、阴影等
  • 会定义 mixins.scss 来定义项目公共样式:单行/多行文字溢出隐藏、清除浮动等

6. flex 布局

  1. 概念

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

容器默认存在两根轴:主轴和交叉轴(也叫做侧轴)。默认水平方向的为主轴,垂直方向为侧轴。

  1. 容器的属性
  • flex-direction 定义主轴的方向
  • flex-wrap 定义是否换行
  • flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式
  • justify-content 定义项目在主轴上的对齐方式
  • align-items 定义项目在侧轴上的对齐方式
  • align-content 定义换行的项目在侧轴上如何对齐
  1. 项目的属性
  • order 定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
  • flex-grow 定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。
  • flex-shrink 定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。
  • flex-basis 定义了在分配多余空间之前,项目占据的主轴空间。它的默认值为 auto,即项目的本来大小。
  • flex 是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto。
  • align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
  1. 扩展:flex: 1 啥意思
  • flex-grow: 1 如果存在剩余空间, 该项目会放大。
  • flex-shrink: 1 如果剩余空间不足,该项目会缩小。
  • flex-basis: 0% 设置为 0% 之后,即不占据主轴空间,但是因为有 flex-grow 和 flex-shrink 的设置,该项目会自动放大或缩小。

7. 实现两栏布局

.container {
  display: flex;
  height: 400px;
}
.left {
  width: 200px;
  height: 100%;
  background: pink;
}
.right {
  flex: 1;
  height: 100%;
  background: deeppink;
}

8. 隐藏页面元素方式

  1. display: none 不占位。不会响应 DOM 事件。
  2. opacity: 0 占位,但不可见。会响应 DOM 事件。
  3. visibility: hidden 占位,但不可见。不会响应 DOM 事件。
  4. transform: scale(0)
  5. transform: rotateY(90deg)
  6. 定位到屏幕外
  7. 定位到父元素外,父元素 overflow: hidden

9. 让元素水平垂直居中方式

  1. 利用绝对定位, 子元素未知宽高
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  1. 利用绝对定位, 子元素必须明确宽高
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}
  1. 利用 flex
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}