基础不牢地动山摇

全国人民
115 阅读6分钟

CSS中有哪些定位

  • 默认定位： static

    • 此时 top, right, bottom, left 和 z-index 属性无效。

  • 相对定位： relative

    • 元素仍在文档流当中，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）

  • 绝对定位： absolute、fixed

    • 元素脱离出正常文档流，并不为元素预留空间
    • absolute通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置
    • fixed通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素

  • 粘滞定位： sticky

    • 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

请你讲讲粘性定位sticky

  1. 元素在跨越特定阈值前为相对定位，之后为固定定位。
  2. 粘性定位要生效，必须要指定 top、right、top、bottom 中的任何一个值。
  3. 当开启了粘性定位的子元素它的父元素 overflow: hidden; 时，粘性定位失效。
  4. 当开启了粘性定位的子元素它的父元素高度过小，无法放下子元素时，粘性定位失效。

关于粘性定位的应用juejin.cn/post/695314…，这个博主写得非常好，可以参考借鉴

display有哪些值

  1. none： 元素被隐藏起来了
  2. block： 块级元素
  3. inline：行内元素
  4. inline-block： 行内块
  5. flex： 弹性布局
  6. table：表格布局
  7. grid： 网格布局

讲讲flex布局

  • flex 是⼀种弹性布局属性，而且设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。而且它具有一些常见的属性可以帮助我们实现自定义页面布局。
  • flex有两条轴线一条主轴一条交叉轴
  • flex-direction: 属性决定主轴的⽅向（即项⽬的排列⽅向）。
  • flex-wrap: 该属性定义，如果⼀条轴线排不下，如何换⾏。
  • flex-flow: 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
  • justify-content: 属性定义了项⽬在主轴上的对齐⽅式。
  • align-items: 属性定义项⽬在交叉轴上如何对齐。
  • align-content: 属性定义了多根轴线的对齐⽅式。

讲讲你知道的伪类和伪元素

伪类是一个冒号 : ，伪元素是两个冒号 ::

伪类 :fist-child :last-child :first-of-type :last-of-type :not :nth-child(an+b) :nth-of-type(an+b)

伪元素 ::before ::after ::first-letter ::first-line ::selection ::placeholder

::before ::after 可用来解决高度塌陷的问题

::first-line ::first-letter 可用来解决块级元素第一行/第一个字母的CSS样式

::selection CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

::placeholder 用于输入框placeholder内容的样式

BEM规范

bem的理解：块block、元素element、修饰符modifier，在 BEM 中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。

  • 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

__ 双下划线：双下划线用来连接块和块的子元素

-- 双中划线：单下划线用来描述一个块或者块的子元素的一种状态

这里有一篇GitHub上的文章我觉得写得很详尽 点击此处跳转

防抖和节流及二者的区别

防抖和节流的目的都是为了防止事件在某一时间内被频繁触发

防抖debounce：

  • 多次输入一次执行

  • 在事件被触发n秒后再执行回调，如果n秒内，事件又被触发，则重新计时

  • 使用场景：

    • 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
    • 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
    • 文本编辑器实时保存，当无任何更改操作一秒后进行保存
function debounce (f, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      f(...args)
    }, wait)
  }
}

节流throttle：

  • 在一段时间间隔内，只执行一次

  • 规定在一个时间单位内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

  • 使用场景：

    • scroll 事件，每隔一秒计算一次位置信息等
    • 浏览器播放事件，每个一秒计算一次进度信息等
    • input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)
function throttle (f, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      f(...args)
      timer = null
    }, wait)
  }
}

Vue中data为什么要返回函数

  1. 防止data复用：vue组件具有可复用性，为了防止data复用，所以设置为函数
  2. 保证data的独立性：vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。
  3. 作用域：当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。
  4. js的特性：当我们组件的date单纯的写成对象形式，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。

总结： vue的data数据其实是vue组件原型上的属性，数据存在于内存当中， vue的组件具有可复用性，data返回函数其实是为了保证data数据的独立性，不至于出现所有组件实例共用了一个data,改动一个所有都变了的情况

v-if和v-for的优先级

  • 在vue2中v-for优先级更高
  • 在vue3中v-if的优先级更高
avatar
文章
阅读
粉丝