面试汇总
浏览 1959 | 评论 0
无所事事彼得兔
2022年06月03日

css

css选择器

通配符选择器

*{
    margin:0;
    padding:0;
}

元素（标签）选择器

p{
    color:red;
}

类选择器

.warning{
    color:red;
}

ID选择器

#warning{
    color:red;
}

优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

属性选取器

{

示例HTML

//<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>

[attribute]

[foo]{
    background-color:red;
}

选择所有带 foo 属性的元素

[attribute=value]

[foo=abc]{
    background-color:red;
}

选择所有 foo=abc 的元素

[attribute~=value]

[foo~=abc]{
    background-color:red;
}

选择所有 foo中包含abc单词 的元素

[attribute^=value]

[foo^=abc]{
    background-color:red;
}

选择所有 foo中abc开头 的元素

[attribute$=value]

[foo$=abc]{
    background-color:red;
}

选择所有 foo中abc结尾 的元素

[attribute*=value]

[foo*=abc]{
    background-color:red;
}

选择所有 foo中包含abc 的元素

[attribute|=value]

[foo|=abc]{
    background-color:red;
}

选择所有 foo中abc开头 的元素
}

文档结构选择器

//<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>

示例：

  ul li p || ul li h1

后代选择器 element element

选择 element 元素内部的所有 element 元素。

ul li{
    border: 1px solid red;
}

子选择器 element>element

选择父元素为 element 元素的所有 element 子元素。

 ul>li>p{
   border: 1px solid red;
}

相邻兄弟选择器 element+element

选择紧接在 element元素之后的 element 元素。
示例HTML：

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

css

h1+p{
    color:red;
}

一般兄弟选择器 element1~element2

选择前面有 element1 元素的每个 elem 元素。

 h1~p{
   border: 1px solid red;
}

伪类选择器

:root 文档根元素伪类

:root{
    background-color:red;
}

:nth-child(n) 孩子选择器

:nth-of-type(n) 同类型的第n个元素

element:first-child
选择属于父元素element的第一个子元素。 等同 :nth-child(1)

element:last-child
选择属于父元素element的最后一个子元素。

element:first-of-type
同类型的第一个子元素

element:last-of-type
同类型的最后一个子元素

element:only-child
选择了父元素 element 唯一的子元素

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
<div>
    <h1>h2</h1>  
</div>
 div :only-child{
    color: red;
 }

最终h1内容中的h2颜色为红色

:empty 没有子元素

<!DOCTYPE html>
<html>
<head>
<style> 
p:empty
{
width:100px;
height:20px;
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p></p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>

生效的是 <p></p>

:nth-last-child(n) 倒数第n个子元素

element:nth-last-of-type(n)
同类型的倒数第n个子元素
2n+1(odd):奇数、2n(even)：偶数

element:last-of-type
同类型的倒数第一个子元素

element:first-of-type
同类型的第一个子元素

element:only-of-type
父元素里唯一同类型子元素
同上面的only-child

a:link
没有访问过的状态

a:active
链接正在被点击

a:hover
选择鼠标指针位于其上的链接。

a:visited
选择所有已被访问的链接。

:focus
:focus 选择器用于选取获得焦点的元素。
接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

:enabled / :disabled
选择每个启用的 input 元素 / 选择每个禁用的 input 元素

:checked
选择每个被选中的 input 元素。自定义开关可以用这个实现

:not(selector)
选择非 selector 元素的每个元素。（反向选择）

伪元素选择器

element::first-line

<!DOCTYPE html>
<html>
<head>
<style>

p:first-line{
    background-color:yellow;
}

</style>
</head>
<body>
<h1>WWF's Mission Statement</h1>
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
</html>

p的第一行文字背景颜色变黄色

element::first-letter

<!DOCTYPE html>
<html>
<head>
<style>
h1:first-letter{
    color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
</body>
</html>

p第一个字符变黄

element::before
在每个 element 元素的内容之前插入内容。我们更多的可能是当作一个div来用

element::after
在每个element元素的内容之后插入内容。我们可能更多的是用来清除浮动或验证表单提示等其它

::selection
选择被用户选取的元素部分。

以上内容引用至掘金：稀土掘金

css模糊

backdrop-filter
CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
语法

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

filter
css属性 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染

语法

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

css布局模式

标准文档流

布局的方式

  • 盒子内部的布局

    • 文本的布局
    • 盒子本身的布局

  • 盒子之间的布局

    • 脱离标准文档流下的盒子的布局

      • 定位布局
      • 浮动布局

    • 标准文档流下的盒子的布局

      • 块级格式化上下文( Block Formatting Context )
      • 行内格式化上下文( Inline formatting contexts )
      • 自适应格式化上下文( Flex Formatting Contexts )
      • 网格布局格式化上下文( GridLayout Formatting Context )
      • 表格布局上下文( Table Formatting Context )

浮动布局

浮动就是浮动元素会脱离文档的普通流，根据 float 的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。

浮动布局的生成：

css 属性 float：left/right/none 左浮动/右浮动/不浮动（默认）

定位布局

标准文档流和浮动布局都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位布局正是为了解决这一问题而设计的。

定位布局的生成：

通过设置元素的 position 属性，可以让元素处于定位布局中，并通过 left、right、top、bottom 属性设置元素具体的偏移量。

定位布局分为四种：

  • static 静态定位，实际上所有元素默认都是静态定位的，即处于标准流中。
  • relative
    相对定位，元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。在相对定位中，实际上元素并未脱离标准流，所以浏览器还是会区分它是否是块级或其他类型的元素。另外，设置元素的margin 属性，实际上 margin 区域会出现在元素定位之前的位置。
  • absolute
    绝对定位，元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它。绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的，另外，绝对定位的元素会自动忽略有定位属性的祖先元素的padding 属性。
  • fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口，它会脱离标准文档流，并且浏览器把他们一致视作块级元素。

格式上下文

块级格式化上下文

BFC（ Block Formatting Context ）

BFC是一个独立的区域，它内部的元素都依照它的规则渲染，并且不会与BFC外部打交道。

行内格式化上下文

IFC( Inline formatting contexts )
块级元素中仅包含内联级别元素。

自适应格式化上下文
FFC( Flex Formatting Contexts )，display 值为 flex 或者 inline-flex 的元素将会生成自适应容器。flex box 由伸缩容器和伸缩子元素组成。通过设置元素 display:flex/inline-flex 可以得到伸缩容器，前者为块级元素，后者为行内元素。伸缩容器外元素不受影响。

网格布局格式化上下文

GFC( GridLayout Formatting Contexts )，当一个元素设置为 display:grid 的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列，为每一个网格定义位置和空间。GFC 和 table 的区别在于 GridLayout 会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染。

表格布局上下文
随着各种技术的不断发展，table 布局已经逐渐退出了历史的舞台，但是因为 table 本身的一些特性，比如上下对齐，左右对齐，文字默认居中使得 table 在曾经的布局中占有一席地位。

css隐藏元素

display：none

display 可能是最常用的元素隐藏方法; 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置，也不会响应绑定的监听事件。

visibility: hidden

visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。

opacity: 0 filter: opacity(0%)

opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。

在现代浏览器中，这两者之间几乎没有实际的区别，但如果同时应用多种效果（模糊、对比度、灰度等）时，应该使用 filter 属性。​

注意：opacity 可以设置动画并提供出色的性能，但页面上保留完全透明的元素可能会触发事件。

width与height设为0

transform: scale(0) 或者 translate(-9999px, 0px);

transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏：

color alpha 透明度

可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：

color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);

clip-path

clip-path 属性可以创建一个剪辑区域，用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。

清除浮动

给浮动元素的父元素添加高度

如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。

clear:both;

在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

伪元素清除浮动

结合 :after 伪元素和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

   /*开启haslayout*/
  .clearfix {
    *zoom: 1;
  }
  /*ie6 7 不支持伪元素*/
  .clearfix:after {
    content: '';
    display: block;
    clear: both;
    height:0;
    line-height:0;
    visibility:hidden;//允许浏览器渲染它，但是不显示出来
  }

给父元素使用overflow:hidden;

这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。
BFC的触发方式
我们可以给父元素添加以下属性来触发BFC：

  • float 为 left | right
  • overflow 为 hidden | auto | scorll
  • display 为 table-cell | table-caption | inline-block
  • position 为 absolute | fixed

这里可以给父元素设置overflow:auto，但是为了兼容IE最好使用overflow:hidden。
但这种办法有个缺陷：如果有内容出了盒子，用这种方法就会把多的部分裁切掉，所以这时候不能使用。

br标签清浮动

br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。

<div id="wrap">
  <div id="inner"></div>
  <br clear="all" />
</div>

JS

this指向问题

在Es5中this指向，始终坚持一个原则：this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象；重要的事情要说三遍。

var name = "windowsName";
function a() {
    var name = "Cherry";

    console.log(this.name);          // windowsName

    console.log("inner:" + this);    // inner: Window
}
a();
console.log("outer:" + this)         // outer: Window

我们先找a调用，在a()调用时并没有响应的对象，那么就是全局对象；this 永远指向最后调用它的那个对象 所以当前的this指向是window，及this.name输出结果为“windowsName”。

接下来看下一个例子：

var name = "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        },100);
    }

};

a.func2()     // this.func1 is not a function

在调用并执行func2()过程中，setTimeout()是window对象。在window对象中没有func1()方法，所以会报错

下面我们用箭头函数解决这个问题：

var name = "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout( () => {
            this.func1()
        },100);
    }

};

a.func2()     // Cherry

在ES5中 箭头函数的 this 始终指向函数定义时的 this，而非执行时。箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

当然了用 _this = this 也是可以解决这个问题

使用 apply、call、bind 修改this指向问题

使用 apply

var a = {

    name : "Cherry",

    func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.apply(a),100);
    }

};

a.func2()            // Cherry

使用 call

 var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.call(a),100);
    }

};

a.func2()            // Cherry

使用 bind

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.bind(a)(),100);
    }

};

a.func2()            // Cherry

现在我们基本说了apply、call、bind 的用法，但是apply、call、bind 是有区别的：

MDN中apply的定义

apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或类数组对象）的形式提供的参数。
语法

func.apply(thisArg, [argsArray])
  • thisArg 必选的。在 func 函数运行时使用的 this 值。请注意，this 可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
  • argsArray 可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从 ECMAScript 5 开始可以使用类数组对象。浏览器兼容性 请参阅本文底部内容。

apply 和 call 的区别

apply() 与 call() 非常相似，不同之处在于提供参数的方式

语法

function.call(thisArg, arg1, arg2, ...)
  • thisArg 可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
  • arg1, arg2, ...
    指定的参数列表。

所以 apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。

bind()
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

语法

function.bind(thisArg[, arg1[, arg2[, ...]]])
  • thisArg 调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数，则忽略该值。当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg。
  • arg1, arg2, ...
    当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

这么说可能不清楚具体bind()用法，举个栗子：

var a ={
    name : "Cherry",
    fn : function (a,b) {
        console.log( a + b)
    }
}

var b = a.fn;
b.bind(a,1,2)()           // 3

以上内容引用自：稀土掘金

原型与原型链

先来个图看看构造函数，实例，原型对象之间的关系

原型与原型链

实例与原型对象之间有直接的联系，但实例与构造函数之间没有

vue

生命周期

vue2.0

Vue2.0的生命周期钩子一共有10个分别简单介绍如下：

  • beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  • created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据监视(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  • beforeMount：在挂载开始之前被调用相关的 render 函数首次被调用。
  • mounted：el 被新创建的 vm.el 也在文档内。
  • beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  • updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  • activated：keep-alive 组件激活时调用。
  • deactivated：keep-alive 组件停用时调用。
  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue2.0生命周期

vue3.0

vue3.0的生命周期与vue2.0有些许不同

选项式API生命周期钩子

  • beforeCreate： 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用
  • created：在实例创建完成后被立即同步调用
  • beforeMount：在挂载开始之前被调用
  • mounted：在实例挂载完成后被调用
  • beforeUpdate：在数据发生改变后，DOM 被更新之前被调用
  • updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
  • beforeUnmount(在Vue2中是：beforeDestroy)：在卸载组件实例之前调用
  • unmounted(在Vue2中是： destroyed)：卸载组件实例后调用

组合式API的生命周期钩子
组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on

vue3.0生命周期

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写

响应式数据绑定

小程序

生命周期

官网

本文作者：无所事事彼得兔
本文链接：https://www.3dcw.cn/index.php/archives/501/
最后修改时间：2023-03-20 20:45:06
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！
评论
与本文无关评论请发留言板。请不要水评论，谢谢。
textsms
支持 Markdown 语法
email
link
评论列表
暂无评论
arrow_back 上一篇
JS 基础 （三） 可选链
arrow_forward 下一篇
没有了