应届秋招前端面经（一）CSS部分

CSS

css权重 (Specificity)

较长的css选择器权重会大于较短的css选择器
id选择器权重高于class选择器

官方文档说明：

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors
官方文档中用 Specificity: 特异性来表示一个 css selector 和其元素的相关性. 相关性越强, 即表示表示其权重最高。
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector
Specificity 是由 selector 中不同 selector type 的数目决定的。

根据 W3 标准中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规则为:

a: 如果 css 属性声明是写在 style=“” 中的, 则数目为 1, 否则为 0
b: id 选择器的数目
c: class 选择器, 属性选择器(如 type=“text”), 伪类选择器(如: ::hover) 的数目
d: 标签名(如: p, div), 伪类 (如: :before)的数目

在比较不同 css selector 的权重时, 按照 a => b =>c => d 的顺序进行比较.
由第一个 selector type a 的计算规则可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具有最高的优先级。
而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和我们平时的经验相吻合。

除了上面 Specificity 计算规则中的 css 选择器类型, 还有一些选择器如: *, +, >,:not() 等. 这些选择器并不会被计算到 css 的权重当中。
有一个需要特别注意一下的选择器: :not(), 虽然它本身是不计权重的, 但是写在它里面的 css selector 是需要计算权重的。
如果 a,b,c,d 算完都一样，最后声明的 css selector 会生效。
如果我重复同样的 css selectory type, 权重会被重复计算。

关于!important:
按照 MDN的说法, !important 是不在 css 选择器的权重计算范围内的, 而它之所以能让 css 选择器生效是因为浏览器在遇见 !important 时会进行特殊的判断. 当多个 !important 需要进行比较时, 才会计算其权重再进行比较.
通常来说, 不提倡使用 !important. 如果你认为一定要使用, 不妨先自检一下:

总是先考虑使用权重更高的 css 选择器, 而不是使用 !important
只有当你的目的是覆盖来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范围使用 !important
永远不要在你写一个第三方插件时使用 !important
永远不要在全站范围使用 !important

css 行内块级及行内块级元素

块级元素 block：
顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，可以自定义width和height。并且独自占据一行高度（float浮动除外），一般可作为其他容器使用，可容纳块级元素和行内元素。
块级元素有以下特点：

每个块级元素都是独占一行。
元素的高度（height）、宽度（width）、行高（line-height）和边距（margin，padding）都是可以设置的。
元素的宽度如果不设置，默认为父元素的宽度（父元素宽度100%）

常见的块元素：

                <address>//定义地址
                <div>//定义文档中的分页区或节
                <dl>//定义列表
                <dt>//定义列表中的项目
                <form>//创建html表单
                <h1>--><h6>//定义标题
                <hr>//水平线
                <li>//定义列表项目 <ol>//定义有序列表 <ul>//定义无序列表
                <p>//定义段落
                <table>//定义html表格<tbody>//表格主体<tfoot>//定义表格页脚thead>//定义表格表头
                <td>//定义表格中标准单元格
                <th>//定义表头单元格
                <<tr>//定义表格中的行

行内元素 inline：
行内元素不可以设置（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不跨域包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。
行内元素有以下特点：

每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。
行内元素的高度、宽度、行高及顶部和底部边距不可设置。
元素的宽度就是它包含的文字或图片的宽度，不可改变

常见的行内元素：

                <a>//标签可定义锚
                <b>//字体加粗
                <big>//大号字体效果 <small>小号字体效果
                <br>//换行
                <i>//斜体文本效果
                <img>//向网页中嵌入一副图画
                <input>//输入框
                <select>//创建单选或多选菜单
                <span>//组合文档中的行内元素
                <sub>//定义下标文本<sup>//定义上标文本
                <textarea>//多行的文本输入控件
                <tt>//打字机或等宽的文本效果
                <var>//定义变量

行内块级元素 inline-block：
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如input，img就是行内块级元素，它可以设置高宽以及，一行多个。
具体特点：

和其他行内或行内块级元素放置在同一行上。
元素的高度、宽度、行高以及顶和底边距都可设置。

元素类型转换 display：

display: block （定义元素为块级元素）
display: inline（定义元素为行内元素）
display: inline-block（定义元素为行内块级元素）

css画三角形

利用border属性，在宽高为0的div内

                    div {
                         width: 0px;
                         height: 0px;
                         border-top: 50px solid transparent;//透明
                         border-bottom: 50px solid deeppink;//此时显示出三角形
                         border-left: 50px solid transparent;//透明
                         border-right: 50px solid transparent;//透明
                        }

href和src的区别

请求资源类型不同
- href：href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link a
- src：在请求src资源时会将其指向的资源下载并应用到文档中，常用的有script，img，iframe
作用结果不同
- href：href用于在当前文档和引用资源之间确立联系。
- src：src用于替换当前内容。
浏览器解析方式不同
- href：若在文档中添加href，浏览器会识别该文档为CSS文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式加载CSS而不是@import
- src：当浏览器解析src，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把js脚本放在底部而不是头部的原因。

link和@import的区别

两者都是外部引用CSS的方式，但是存在一定区别：

link是XHTML标签，除了能加载CSS,还可以定义RSS等其他事物；而@import属于CSS范畴，只可以加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用js控制DOM改变样式；而@import不支持。

position属性四个值的区别和用法

position属性有四个可选值，分别是：static，absolute，fixed，relative
static：

（静态定位）是默认值，元素出现在正常的流中。不会受到top，bottom，left，right影响。
relative：
相对定位元素的定位是相对自己原本的正常位置。依据left，right，top，bottom等属性在正常文档流中偏移位置。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变
相对定位元素经常被用来作为绝对定位元素的容器块。

absolute：

将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。
此时对象不具有边距，但仍有补白和边框。
绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
使用绝对定位的层前面的或者后面的层会认为这个层并不存在，也就是在z方向上，它是相对独立出来的，丝毫不影响到其他z方向的层
设置absolute会使得inline元素被“块”化
设置absolute会使得元素已有的float失效，不过float和absolute同时使用的情况不多
absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级的确定是“后来者居上”

fixed：
fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。即使窗口是滚动的它也不会移动

fixed定位使元素的位置与文档流无关，因此不占据空间。
fixed定位的元素和其他元素重叠
IE6不支持css中的position:fixed属性

z-index：
垂直定位：z轴方向上的层叠定位

z-index默认值都是0
但默认情况下，后来者会覆盖前者，此时，如果需要改变层级关系，就要通过改变z-index值来实现。z-index越大优先级越高
如果将position设为relative（相对定位），absolute（绝对定位）或者fixed（固定定位），这样的节点会覆盖没有设置position属性或者属性值为static的节点，说明前者比后者的默认层级高。例如弹出层时用到最多
在position属性值为absolute的同时，如果有一级父对象(无论是父对象还是祖父对象，或者再高的辈分，一样)的position属性值为relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

head中的meta字段

meta是html语言head区的一个辅助性标签，meta标签共有两个属性，分别是http-equiv属性和name属性，它的作用有：

搜索引擎优化
定义页面使用语言
自动刷新并指向新的页面
实现网页转换时的动态效果
控制页面缓冲
网页定级评价
控制网页显示窗口

隐藏元素的方法和区别

元素.style.display="none",设置后元素不占位置
元素.visibility="hidden",设置后元素还占原先的位置
元素.opacity=0,完全透明，还占位置

水平垂直居中方案

1.绝对定位元素的居中实现

缺点：需要知道元素尺寸

                <body>
                    <div class="cter"></div>
                </body>
                <style>
                    .cter{
                        width:100px;
                        height:100px;
                        background:red;
                        position:absolute;
                        top:50%;
                        left:50%;
                        margin-top:-50px    //一半高度
                        margin-left:-50px    //一半高度
                    }
                </style>

flex布局(此例在body内div居中)



             <body>
                 <div class="cter"></div>
             </body>
             <style>
                 body{
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     position: absolute;
                     width: 100%;
                     height: 100%;
                 }
                 .cter{
                     width:100px;
                     height:100px;
                     background:red;
                 }
             </style>

transform

                <body>
                    <div class="cter"></div>
                </body>
                <style>
                    .cter{
                        width: 100px;
                        height: 100px;
                        background: orange;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate( -50%, -50%);
                    }
                </style>

margin:auto 实现绝对定位元素的居中

                <body>
    
                    <div class="cter"></div>
                </body>
                <style>
                    .cter{
                         width: 100px;
                        height: 100px;
                        background: orange;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                       margin: auto;
                    }
                </style>

requestAnimationFrame为什么能优化动画性能

这个是setInterval的优化
与SetTimeout相比
- requestAnimationFrame最大的优势是由系统来决定回调函数的执行实际。
- 具体来讲，如果屏幕刷新率是60HZ，那么回调函数就16.7ms被执行一次
  - 如果刷新频率是75HZ，那么这个时间间隔就变成了1000/75=13.3ms
- requestAnimationFrame的步伐跟着系统的刷新步伐走
- 它能保证回调函数在屏幕第一次的刷新间隔中只被执行一次
- 这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题
requestAnimationFrame另外两个优势
- CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销
- 函数节流：在高频率时间（risize，scroll）中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好地节省执行的开销，一个刷新间隔内函数执行多次是没有意义的，因为显示器没16.7ms刷新一次，多次绘制并不会在屏幕上体现出来

盒子模型

W3C盒子模型（标准盒模型）：根据W3C规范，元素内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的。
- 内容的宽高=我们设置的宽高
- 盒子总宽高=width/height+padding+border+margin
IE盒模型（怪异盒模型）：该模式下，浏览器width属性不是内容的宽度，而是内容，内边距和边框的宽度的总和
- 我们设置的宽度=盒子的宽度+内边距padding+边框border宽度
- 盒子的总宽高=width/height+margin
- 意思就是我们设置的宽度包含了padding和border
两种模式下兼容性问题
- 建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素
CSS3指定盒子模型种类
box-sizing属性允许以特定方式匹配某个区域的特定元素
- box-sizing:content-box（默认属性，标准盒模型）；宽高分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
- box-sizing:border-box（IE盒模型，怪异盒模型）；为元素设定的宽高决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽高内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
- box-sizing:inherit；规定应从父元素继承box-sizing属性的值

清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
总结一下：

当父元素不给高度的时候，

内部元素不浮动时会撑开

而浮动的时候，父元素变成一条线

方法：

对父级设置适合CSS高度（一般设置高度需要能确定内容高度才能设置）
clear:both清除浮动（这个css clear清除float产生浮动，可以不用对父级设置高度也无需技术父级高度，方便适用，但会多加CSS和HTML标签。在最后一个浮动标签后，新加一个标签，给其设置clear：both）
父级div定义 overflow:hidden（对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。通过触发BFC方式，实现清除浮动，缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素）
使用before和after双伪元素清除浮动，伪元素是行内元素正常浏览器清除浮动方法（.clearfix:after{css}）

BFC

MDN：一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

功能：

使 BFC 内部浮动元素不会到处乱跑；(就是说内层float或定位后，会脱离文档流，而给外层设置BFC就可以使内存不脱离)
和浮动元素产生边界。
开启BFC的元素不会被浮动元素所覆盖

如何开启：

设置元素浮动 float
设置元素绝对定位 position: absolute;
设置元素为inline-block
将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

伪类和伪元素：

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素选择符（单双引号为css1/css3区别）：

::first-letter：设置对象内的第一个字符的样式
::first-line：设置对象内第一行的样式
::before：设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
::after：设置在对象后（依赖对象树的逻辑结构）发生的内容。用来和content属性一起使用

伪类选择符：

:hover：设置元素在其鼠标悬停时的样式
:active：设置元素在被用户激活（鼠标点击与释放之间发生的事件）的样式
:focus：设置元素在成为输入焦点（该元素onfocus事件发生）时的样式
first-child：匹配父元素第一个子元素
last-child：匹配父元素的最后一个子元素
nth-child(n)：匹配父元素第n个子元素
nth-last-child(n)：匹配父元素的倒数第n个子元素

    //例子
    <div>
        <p>a</p>
        <p>b</p>
    </div>
    //使用伪类让第一个p标签变红
    //css
    p:first-child{
        color:red
    }
    //不使用伪类怎么做呢？给p加一个class,在class里加样式
    <div>
        <p class='fs'>a</p>
        <p>b</p>
    </div>
    //可以实现同样的效果，但要多写一个类，这时，被修饰的li依然存在于DOM树中
    //伪元素操作(给第一个字母添加样式)
    <p>Hello,world</p>
    //css
    p::first-letter{
        color:red
    }
    //不用伪元素
    <p><span class='a'>H</span>ello,world</p>
    //css(通过加span 和 类，这时看起来像创建了一个虚拟的span元素并为其添加样式，但实际上在DOM数中并不存在这个span元素)

可以看出二者区别了，
伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
所以它们的本质区别就是是否抽象创造了新元素
伪类侧重丰富选择器的选择语法范围内元素的选择能力，伪元素侧重表达或者定义不在语法定义范围内的抽象元素。
伪类和伪元素各自有一些存在的兼容问题。

scrollWidth、clientWidth、offsetWidth、width的区别

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
innerWidth：
- window.innerHeight=浏览器窗口的内部高度
- window.innerWidth=浏览器窗口的内部宽度

元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
元素的内容超过可视区，滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
offsetWidth和width区别
offsetWidth属性可以返回对象的padding+border+元素width属性值之和，style.width返回值就是定义的width属性值。
offsetWidth属性仅是可读属性，而style.width是可读写的。
offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。
style.width仅能返回以style方式定义的内部样式表的width属性值。

应届秋招前端面经（一）CSS部分

CSS

css权重 (Specificity)

css 行内块级及行内块级元素

css画三角形

href和src的区别

link和@import的区别

position属性四个值的区别和用法

head中的meta字段

隐藏元素的方法和区别

水平垂直居中方案

requestAnimationFrame为什么能优化动画性能

盒子模型

清除浮动

BFC

伪类和伪元素：

scrollWidth、clientWidth、offsetWidth、width的区别

HUMILITY

引用和评论

关于class类的总结

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

更强大、更灵活！ defineModel 重新定义双向绑定

Flex 布局学习总结（对齐方式）

你可能不知道的图片加载相关知识

使用CSS给标题添加书名号并超出省略

应届秋招前端面经（一）CSS部分

CSS

css权重 (Specificity)

css 行内 块级 及 行内块级元素

css画三角形

href和src的区别

link和@import的区别

position属性四个值的区别和用法

head中的meta字段

隐藏元素的方法和区别

水平垂直居中方案

requestAnimationFrame为什么能优化动画性能

盒子模型

清除浮动

BFC

伪类和伪元素：

scrollWidth、clientWidth、offsetWidth、width的区别

HUMILITY

引用和评论

关于class类的总结

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

更强大、更灵活！ defineModel 重新定义双向绑定

Flex 布局学习总结（对齐方式）

你可能不知道的图片加载相关知识

使用CSS给标题添加书名号并超出省略

css 行内块级及行内块级元素