Tiny'Wo | 小窝

网络中的一小块自留地

post.posted post.in

如何正确写简�?

简历只有一个目的：引起 HR 或面试官的注意，让他们给你打电话。所以，如何让自己“亮”起来很重要�?
::: tip
如有疑问，可免费 加群 讨论咨询，也可参�?1v1 面试咨询服务�?专业、系统、高效、全流程 准备前端面试
:::

简历格�?

简历的模块和顺�?

  • 个人信息
  • 核心能力总结（可选）
  • 教育经历
  • 专业技�?- 工作经历
  • 项目经验

简历模版：TODO…

个人信息

  • 必备信息：姓名，电话，邮箱，个人网址或博客（如有），城市
  • 可选：头像照片，性别，年龄，工作年限
  • 不用写：婚姻状况，政治面貌，籍贯等和工作无关的信�?- 不要写期望薪资，等和 HR 谈薪再说

核心能力总结（可选）

工作经验久的“老司机”，可以总结一下自己的核心能力，例�?

  • 项目架构能力，负责过 xxx 大型项目
  • 团队领导能力，带领过 xxx 人研发团�?- xxx 业务的解决方案能�?
    注意，既然是总结，就不要贪多，写 3-4 条核心的即可，其他的在下文内容写�?

教育经历

  • 大学 + 研究生（如有�?- 写明：学�?学历 专业 入学/毕业时间
  • 在学校的参赛获奖记录，写在这�?- 计算机相关的培训和证书（�?PMP 软考等），写在这里
  • 如果学校或学历没有竞争力，如大专、非计算机相关专业，可以把教育经历写到最�?- 如果是专升本，建议只写本科学�?
    总之，是优势就尽早暴露，不是优势则尽量避免暴露�?

专业技�?

�?5 - 10 点来表达自己的专业技能，例如

::: info

  • 熟悉常见的数据结构和算法，熟悉常见的设计模式
  • 熟悉前端基础 HTML CSS ES6+ JS TS 语法，熟�?HTTP 协议
  • 熟悉 Vue2 Vue3 全家桶，熟悉 ElementPlus VantUI ，熟�?Vue 原理和源�?- 熟悉 React �?Hooks 语法，熟�?AntD ，熟�?React 原理
  • 熟悉 Next.js 服务端框架，熟悉 RSC ，用�?Mongodb MySQL Redis
  • 熟悉微信小程序开发，熟悉 uni-app �?taro 框架
  • 熟悉 Webpack �?Vite 配置，熟悉常见插件，熟悉性能优化相关配置
  • 熟悉前端单元测试框架 Vitest �?Jest ，熟�?E2E 测试
  • 熟悉前端 CI/CD 配置，熟�?Gitlab CI �?GitHub actions 常见配置
  • 熟悉 Nodejs 服务端开发，熟悉 Express Koa Nestjs 框架

:::

我评审了 N 多简历，在专业技能这部分发现过很多问题：

::: info

  • 很多同学完全不懂数据结构和算�? 1. 删掉这一条不要暴露这个弱�? 2. 业余需要恶补，除非一直呆在小公司
  • 多年�?Vue 工程师，没有其他技术栈
  • 很多工作多年的同学，不了解服务端，纯前端，无复杂项目
  • 不要写“了解”，了解的意思就是不懂。要么写“熟悉”，要么别写
  • �?Vue React 的原理，仅知道几个概念，没有自己认真总结�?
    其实每次写简历，也是对个人能力的自我评价，要看到自己的不足，未来继续进步�?
    :::

工作经历

  • 写明公司，角色，入职离职时间，工作职�?成绩
  • 如工作多年，角色要能看出成长。例如刚毕业是前端工程师，后来是高级前端工程师
  • 工作职责/成绩，不要写“正确的废话”，要写出自�?*真实具体的事�?*，例�? - 负责 xxx 项目，从 0 开�?a b c 功能
    • 带领 xxx 团队，完�?x y z 能力建设

项目经验

  • 根据个人的工作年限，�?2-5 个项�?- 项目要涵盖专业技能里的技术栈
  • 把最重要的项目放在前面，不要非得按时间排�?
    每个项目的格式如下：

::: info

项目描述：这是一�?xxx 项目，服务于 xxx 。它主要包含 a b c 功能。我主要负责 x y z 模块�?
技术栈：TS + Nextjs + React + ShadcnUI + Auth.js + Prisma + PostgreSQL + Tiptap

项目职责�?

  • 作为项目前端负责人，负责需求评审、技术选型、系统设计、代码走查、项目管理等工作
  • 基于 Tiptap 二次开发富文本编辑器，如悬浮菜单、slash command、表格、上传图片到 OSS
  • 集成 ChatGPT AI 功能到富文本编辑器，实现 AI 写作、AI 优化文本等功能，并保�?AI 接口稳定
  • 基于 Tiptap 开源的 Hocuspocus Server 二次开发协同编辑功能，实现 Tiptap 多人协同编辑
  • 使用 GitHub Actions 配置 CI/CD 流程，使�?Docker 部署测试环境，使用阿里云 Serverless 上线
  • 继续补充…

:::

其他常见问题

简历是否只写一页？

完全没必要，根据自己的真实情况写即可，我更推荐写 2-3 页�?

是否要写个人评价�?

大部分情况下没必要，我评审这么多简历，个人评价全都是虚的，什么热爱技术、热爱学�?..

你如何证明自己热爱技术、热爱学习？—�?大部分人都会被问住�?
如果你真的有证明的（博客 开�?看书等），你可以写到前面，这是个人优势�?

post.posted post.in

面试官：谈谈你对BFC的理解？

一、是什�?

我们在页面布局的时候，经常出现以下情况�?

  • 这个元素高度怎么没了�?- 这两栏布局怎么没法自适应�?- 这两个元素的间距怎么有点奇怪的样子�?- ……

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则�?

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关�?- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如�?- BFC的区域不会与float的元素区域重�?- 计算BFC的高度时，浮动子元素也参与计�?- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元�?

二、触发条�?

触发BFC的条件包含不限于�?

  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不�?visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

三、应用场�?

利用BFC的特性，我们将BFC应用在以下场景：

防止margin重叠（塌陷）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

页面显示如下�?

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin�?0的话，两个P之间的距离还�?00，以最大的为准�?
前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重�?
可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

这时候，边距则不会重叠：

清除内部浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

页面显示如下�?

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成BFC，则内部浮动元素计算高度时候也会计�?

1
2
3
.par {
    overflow: hidden;
}

实现效果如下�?

自适应多栏布局

这里举个两栏的布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果图如下：

前面讲到，每个元素的左外边距与包含块的左边界相接�?
因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

1
2
3
.main {
    overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

效果如下�?

小结

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元�?

参考文�?

post.posted post.in

面试官：css3动画有哪些？

一、是什�?

CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块

即指元素从一种样式逐渐过渡为另一种样式的过程

常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

css实现动画的方式，有如下几种：

  • transition 实现渐变动画
  • transform 转变动画
  • animation 实现自定义动�?

二、实现方�?

transition 实现渐变动画

transition的属性如下：

  • property:填写需要变化的css属�?- duration:完成过渡效果需要的时间单位(s或者ms)
  • timing-function:完成效果的速度曲线
  • delay: 动画效果的延迟触发时�?
    其中timing-function的值有如下�?
    �? 描述
    linear 匀速（等于 cubic-bezier(0,0,1,1)�?
    ease 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)�?
    ease-in 慢慢变快（等�?cubic-bezier(0.42,0,1,1)�?
    ease-out 慢慢变慢（等�?cubic-bezier(0,0,0.58,1)�?
    ease-in-out 先变快再到慢（等�?cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果
    cubic-bezier(n,n,n,n) �?cubic-bezier 函数中定义自己的值。可能的值是 0 �?1 之间的数�?

注意：并不是所有的属性都能使用过渡的，如display:none<->display:block

举个例子，实现鼠标移动上去发生变化动画效�?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
       .base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width, height, background-color, border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        }

        /*简�?/
        /*transition: all 2s ease-in 500ms;*/
        .base:hover {
            width: 200px;
            height: 200px;
            background-color: #5daf34;
            border-width: 10px;
            border-color: #3a8ee6;
        }
</style>
<div class="base"></div>

transform 转变动画

包含四个常用的功能：

  • translate：位�?- scale：缩�?- rotate：旋�?- skew：倾斜

一般配合transition过度使用

注意的是，transform不支持inline元素，使用前把它变成block

举个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    .base {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: #0EA9FF;
        border-width: 5px;
        border-style: solid;
        border-color: #5daf34;
        transition-property: width, height, background-color, border-width;
        transition-duration: 2s;
        transition-timing-function: ease-in;
        transition-delay: 500ms;
    }
    .base2 {
        transform: none;
        transition-property: transform;
        transition-delay: 5ms;
    }

    .base2:hover {
        transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
    }
</style>
 <div class="base base2"></div>

可以看到盒子发生了旋转，倾斜，平移，放大

animation 实现自定义动�?

animation是由 8 个属性的简写，分别如下�?

属�? 描述 属性�?
animation-duration 指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认�?0
animation-timing-function 指定动画计时函数，即动画的速度曲线，默认是 “ease” linear、ease、ease-in、ease-out、ease-in-out
animation-delay 指定动画延迟时间，即动画何时开始，默认�?0
animation-iteration-count 指定动画播放的次数，默认�?1
animation-direction 指定动画播放的方�? 默认�?normal normal、reverse、alternate、alternate-reverse
animation-fill-mode 指定动画填充模式。默认是 none forwards、backwards、both
animation-play-state 指定动画播放状态，正在运行或暂停。默认是 running running、pauser
animation-name 指定 @keyframes 动画的名�?

CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

通过 @keyframes 来定义关键帧

因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可�?

1
2
3
4
5
6
7
8
@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

from 表示最开始的那一帧，to 表示结束时的那一�?
也可以使用百分比刻画生命周期

1
2
3
4
5
6
7
8
9
10
11
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

定义好了关键帧后，下来就可以直接用它了：

1
animation: rotate 2s;

三、总结

属�? 含义
transition（过度） 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形） 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表�?
translate（移动） 只是transform的一个属性值，即移�?
animation（动画） 用于设置动画属性，他是一个简写的属性，包含6个属�?

参考文�?

post.posted post.in

面试官：说说你对盒子模型的理�?

一、是什�?当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一�?CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box�?

一个盒子由四个部分组成：content、padding、border、margin

content，即实际内容，显示文本和图像

boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影�?
margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区�?
上述是一个从二维的角度观察盒子，下面再看看看三维图：

下面来段代码�?

1
2
3
4
5
6
7
8
9
10
<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

当我们在浏览器查看元素时，却发现元素的大小变成了240px

这是因为，在CSS中，盒子模型可以分成�?

  • W3C 标准盒子模型
  • IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

二、标准盒子模�?

标准盒子模型，是浏览器默认的盒子模型

下面看看标准盒子模型的模型图�?

从上图可以看到：

  • 盒子总宽�?= width + padding + border + margin;

  • 盒子总高�?= height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding �?border �?
所以上面问题中，设置width�?00px，但由于存在padding，但实际上盒子的宽度�?40px

三、IE 怪异盒子模型

同样看看IE 怪异盒子模型的模型图�?

从上图可以看到：

  • 盒子总宽�?= width + margin;

  • 盒子总高�?= height + margin;

也就是，width/height 包含�?padding �?border �?

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高�?
语法�?```css
box-sizing: content-box|border-box|inherit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

- content-box 默认值，元素�?width/height 不包含padding，border，与标准盒子模型表现一�?- border-box 元素�?width/height 包含 padding，border，与怪异盒子模型表现一�?- inherit 指定 box-sizing 属性的值，应该从父元素继承

回到上面的例子里，设置盒子为 border-box 模型

```html
<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
<div class="box">
  盒子模型
</div>

这时候，就可以发现盒子的所占据的宽度为200px

参考文�?- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

post.posted post.in

面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢�?

一、背�?

在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素

居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类�?

  • 居中元素（子元素）的宽高已知
  • 居中元素宽高未知

二、实现方�?

实现元素水平垂直居中的方式：

  • 利用定位+margin:auto

  • 利用定位+margin:负�?

  • 利用定位+transform

  • table布局

  • flex布局

  • grid布局

利用定位+margin:auto

先上代码�?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置�?，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽�?
这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

利用定位+margin:负�?

绝大多数情况下，设置父元素为相对定位�?子元素移动自�?0%实现水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

整个实现思路如下图所示：

  • 初始位置为方�?的位�?- 当设置left、top�?0%的时候，内部子元素为方块2的位�?- 设置margin为负数时，使内部子元素到方块3的位置，即中间位�?
    这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作

但是该方案需要知道子元素自身的宽高，但是我们可以通过下面transform属性进行移�?

利用定位+transform

实现代码如下�?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

translate(-50%, -50%)将会将元素位移自己宽度和高度�?50%

这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高

table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

flex弹性布局

还是看看实现的整体代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

css3中了flex布局，可以非常简单实现垂直水平居�?
这里可以简单看看flex布局的关键属性作用：

  • display: flex时，表示该容器内部的元素将按照flex进行布局

  • align-items: center表示这些元素将相对于本容器水平居�?- justify-content: center也是同样的道理垂直居�?

grid网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>
<div class="father">
    <div class="son"></div>
</div>

这里看到，gird网格布局和flex弹性布局都简单粗�?

小结

上述方法中，不知道元素宽高大小仍能实现水平垂直居中的方法有：

  • 利用定位+margin:auto
  • 利用定位+transform
  • flex布局
  • grid布局

三、总结

根据元素标签的性质，可以分为：

  • 内联元素居中布局
  • 块级元素居中布局

内联元素居中布局

水平居中

  • 行内元素可设置：text-align: center
  • flex布局设置父元素：display: flex; justify-content: center

垂直居中

  • 单行文本父元素确认高度：height === line-height
  • 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素居中布局

水平居中

  • 定宽: margin: 0 auto

  • 绝对定位+left:50%+margin:负自身一�?
    垂直居中

  • position: absolute设置left、top、margin-left、margin-top(定高)

  • display: table-cell

  • transform: translate(x, y)

  • flex(不定高，不定�?

  • grid(不定高，不定�?，兼容性相对比较差

参考文�?

post.posted post.in

面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

一、背�?

在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高

两栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，

比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器

这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器

这种布局适用于内容上具有明显主次关系的网�?

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

大家最常见的就是github�?

二、两栏布局

两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单：

  • 使用 float 左浮左边�?- 右边模块使用 margin-left 撑出内容块做内容展示
  • 为父级元素添加BFC，防止下方元素飞到上方内�?
    代码如下�?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
        .box{
            overflow: hidden; 添加BFC
        }
        .left {
            float: left;
            width: 200px;
            background-color: gray;
            height: 400px;
        }
        .right {
            margin-left: 210px;
            background-color: lightgray;
            height: 200px;
        }
    </style>
    <div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

还有一种更为简单的使用则是采取：flex弹性布局

flex弹性布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

flex可以说是最好的方案了，代码少，使用简�?
注意的是，flex容器的一个默认属性�?align-items: stretch;

这个属性导致了列等高的效果�?为了让两个盒子高度自动，需要设�? align-items: flex-start

三、三栏布局

实现三栏布局中间自适应的布局方式有：

  • 两边使用 float，中间使�?margin
  • 两边使用 absolute，中间使�?margin
  • 两边使用 float 和负 margin
  • display: table 实现
  • flex实现
  • grid网格布局

两边使用 float，中间使�?margin

需要将中间的内容放在html结构最后，否则右侧会臣在中间内容的下方

实现代码如下�?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
    .wrap {
        background: #eee;
        overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元�?-->
        padding: 20px;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
    }
    .right {
        width: 120px;
        height: 200px;
        float: right;
        background: lightblue;
    }
    .middle {
        margin-left: 220px;
        height: 200px;
        background: lightpink;
        margin-right: 140px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
</div>

原理如下�?

  • 两边固定宽度，中间宽度自适应�?- 利用中间元素的margin值控制两边的间距
  • 宽度小于左右部分宽度之和时，右侧部分会被挤下�?
    这种实现方式存在缺陷�?
  • 主体内容是最后加载的�?
  • 右边在主体内容之前，如果是响应式设计，不能简单的换行展示

两边使用 absolute，中间使�?margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style>
  .container {
    position: relative;
  }
  
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background: green;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    background: green;
  }

  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边固定宽度</div>
  <div class="main">中间自适应</div>
</div>

实现流程�?

  • 左右两边使用绝对定位，固定在两侧�?- 中间占满一行，但通过 margin和左右两边留�?0px的间�?

两边使用 float 和负 margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .main-wrapper {
    float: left;
    width: 100%;
  }

  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }

  .left,
  .right {
    float: left;
    width: 100px;
    margin-left: -100%;
    background: green;
  }

  .right {
    margin-left: -100px; /* 同自身宽�?*/
  }
</style>

<div class="main-wrapper">
  <div class="main">中间自适应</div>
</div>
<div class="left">左边固定宽度</div>
<div class="right">右边固定宽度</div>

实现过程�?

  • 中间使用了双层标签，外层是浮动的，以便左中右能在同一行展�?- 左边通过使用�?margin-left:-100%，相当于中间的宽度，所以向上偏移到左侧
  • 右边通过使用�?margin-left:-100px，相当于自身宽度，所以向上偏移到最右侧

缺点�?

  • 增加�?.main-wrapper 一层，结构变复�?- 使用�?margin，调试也相对麻烦

使用 display: table 实现

<table> 标签用于展示行列数据，不适合用于布局。但是可以使�?display: table 来实现布局的效�?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
  .container {
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .left,
  .right,
  .main {
    display: table-cell;
  }

  .left,
  .right {
    width: 100px;
    background: green;
  }

  .main {
    background: black;
    color: white;
    width: 100%;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">中间自适应</div>
  <div class="right">右边固定宽度</div>
</div>

实现原理�?

  • 层通过 display: table设置为表格，设置 table-layout: fixed`表示列宽自身宽度决定，而不是自动计算�?- 内层的左中右通过 display: table-cell设置为表格单元�?- 左右设置固定宽度，中间设�?width: 100% 填充剩下的宽�?

使用flex实现

利用flex弹性布局，可以简单实现中间自适应

代码如下�?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        width: 200px;
        background: coral;
    }

    .right {
        width: 120px;
        background: lightblue;
    }

    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

实现过程�?

  • 仅需将容器设置为display:flex;�?- 盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空�?- 盒内元素的高度撑开容器的高�?
    优点�?
  • 结构简单直�?- 可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间

grid网格布局

代码如下�?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
    .wrap {
        display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        background: coral;
    }

    .right {
        background: lightblue;
    }

    .middle {
        background: #555;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

跟flex弹性布局一样的简�?

参考文�?

post.posted post.in

面试官：CSS3新增了哪些新特性？

一、是什�?

css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美�?
css3是css的最新标准，是向后兼容的，CSS1/2 的特性在 CSS3 里都是可以使用的

而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体�?

二、选择�?

css3中新增了一些选择器，主要为如下图所示：

三、新样式

边框

css3新增了三个边框属性，分别是：

  • border-radius：创建圆角边�?- box-shadow：为元素添加阴影

  • border-image：使用图片来绘制边框

box-shadow

设置元素阴影，设置属性如下：

  • 水平阴影
  • 垂直阴影
  • 模糊距离(虚实)
  • 阴影尺寸(影子大小)
  • 阴影颜色
  • �?外阴�?
    其中水平阴影和垂直阴影是必须设置�?

背景

新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break

background-clip

用于确定背景画区，有以下几种可能的属性：

  • background-clip: border-box; 背景从border开始显�?- background-clip: padding-box; 背景从padding开始显�?- background-clip: content-box; 背景显content区域开始显�?- background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范�?

background-origin

当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个�?

  • background-origin: border-box; 从border开始计算background-position
  • background-origin: padding-box; 从padding开始计算background-position
  • background-origin: content-box; 从content开始计算background-position

默认情况是padding-box，即以padding的左上角为原�?

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

  • background-size: contain; 缩小图片以适合元素（维持像素长宽比�?- background-size: cover; 扩展元素以填补元素（维持像素长宽比）
  • background-size: 100px 100px; 缩小图片至指定的大小
  • background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break

元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显�?

  • background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
  • background-break: bounding-box; 把盒之间的距离计算在内；
  • background-break: each-box; 为每个盒子单独重绘背�?

文字

word-wrap

语法：word-wrap: normal|break-word

  • normal：使用浏览器默认的换�?- break-all：允许在单词内换�?

text-overflow

text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择�?

  • clip：修剪文�?- ellipsis：显示省略符号来代表被修剪的文本

text-shadow

text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜�?

text-decoration

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

  • text-fill-color: 设置文字内部填充颜色

  • text-stroke-color: 设置文字边界填充颜色

  • text-stroke-width: 设置文字边界宽度

颜色

css3新增了新的颜色表示方式rgba与hsla

  • rgba分为两部分，rgb为颜色值，a为透明�?- hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明�?

四、transition 过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

  • 过度效果
  • 持续时间

语法如下�?

1
transition�?CSS属性，花费时间，效果曲�?默认ease)，延迟时�?默认0)

上面为简写模式，也可以分开写各个属�?

1
2
3
4
transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

五、transform 转换

transform属性允许你旋转，缩放，倾斜或平移给定元�?
transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式�?

  • transform: translate(120px, 50%)：位�?- transform: scale(2, 0.5)：缩�?- transform: rotate(0.5turn)：旋�?- transform: skew(30deg, 20deg)：倾斜

六、animation 动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生�?
animation也有很多的属�?

  • animation-name：动画名�?- animation-duration：动画持续时�?- animation-timing-function：动画时间函�?- animation-delay：动画延迟时�?- animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
  • animation-direction：动画执行方�?- animation-paly-state：动画播放状�?- animation-fill-mode：动画填充模�?

七、渐�?

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括

  • linear-gradient：线性渐�?

    background-image: linear-gradient(direction, color-stop1, color-stop2, …);

  • radial-gradient：径向渐�?

    linear-gradient(0deg, red, green);

八、其�?

关于css3其他的新特性还包括flex弹性布局、Grid栅格布局，这两个布局在以前就已经讲过，这里就不再展示

除此之外，还包括多列布局、媒体查询、混合模式等�?…..

参考文�?

post.posted post.in

面试官：如果要做优化，CSS提高性能的方法有哪些�?

一、前言

每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确�?
作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验

因此，在整个产品研发过程中，css性能优化同样需要贯穿全�?

二、实现方�?

实现方式有很多种，主要有如下�?

  • 内联首屏关键CSS
  • 异步加载CSS
  • 资源压缩
  • 合理使用选择�?- 减少使用昂贵的属�?- 不要使用@import

内联首屏关键CSS

在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲�?
而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染

所以，CSS内联使用使渲染时间提�?
注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式

异步加载CSS

在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容

前面加载内联代码后，后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下：

  • 使用javascript将link标签插到head标签最�?

    1
    2
    3
    4
    5
    // 创建link标签
    const myCSS = document.createElement( "link" );
    myCSS.rel = "stylesheet";
    myCSS.href = "mystyles.css";
    // 插入到header的最后位�?document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

  • 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS

1
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
  • 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
1
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

合理使用选择�?

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下�?

  • 先找到h3标签元素
  • 然后去除祖先不是.content的元�?- 最后去除祖先不�?markdown的元�?
    如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

所以我们在编写选择器的时候，可以遵循以下规则�?

  • 不要嵌套使用过多复杂选择器，最好不要三层以�?- 使用id选择器就没必要再进行嵌套
  • 通配符和属性选择器效率最低，避免使用

减少使用昂贵的属�?

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明�?:nth-child等，会降低浏览器的渲染性能

不要使用@import

css样式文件有两种引入方式，一种是link元素，另一种是@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致下载顺序紊�?
比如一个css文件index.css包含了以下内容：@import url("reset.css")

那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

其他

  • 减少重排操作，以及减少不必要的重�?- 了解哪些属性可以继承而来，避免对这些属性重复编�?- cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
  • 把小的icon图片转成base64编码
  • CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属�?

三、总结

css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺�?

参考文�?- https://www.zhihu.com/question/19886806

post.posted post.in

面试官：说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

一、背�?

在css中我们通常使用px作为单位，在PC浏览器中css�?个像素都是对应着电脑屏幕�?个物理像�?
这会造成一种错觉，我们会认为css中的像素就是设备的物理像�?
但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同�?
当我们做移动端开发时，同�?px的设置，在不同分辨率的移动设备上显示效果却有很大差异

这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概�?

二、介�?

CSS像素

CSS像素（css pixel, px�? 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单�?
�?CSS 规范中，长度单位可以分为两类，绝对单位以及相对单�?
px是一个相对单位，相对的是设备像素（device pixel�?
一般情况，页面缩放比为1�?个CSS像素等于1个设备独立像�?
CSS像素又具有两个方面的相对性：

  • 在同一个设备上，每1�?CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率�?- 在不同的设备之间，每1�?CSS 像素所代表的设备像素是可以变化的（比如两个不同型号的手机）

在页面进行缩放操作也�?引起css中px的变化，假设页面放大一倍，原来�?1px 的东西变�?2px，在实际宽度不变的情况下1px 变得跟原来的 2px 的长度（长宽）一样了（元素会占据更多的设备像素）

假设原来需�?320px 才能填满的宽度现在只需�?160px

px会受到下面的因素的影响而变化：

  • 每英寸像素（PPI�?- 设备像素比（DPR�?

设备像素

设备像素（device pixels），又称为物理像�?
指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已

可以参考公园里的景观变色彩灯，一个彩�?物理像素)由红、蓝、绿小灯组成，三盏小灯不同的亮度混合出各种色�?

从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为pt

设备独立像素

设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素

在javaScript中可以通过window.screen.width/ window.screen.height 查看

比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的“分辨率”（非严谨说法）指的就是设备独立像素

一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清�?
至于为什么出现设备独立像素这种虚拟像素单位概念，下面举个例子�?
iPhone 3GS �?iPhone 4/4s 的尺寸都�?3.5 寸，�?iPhone 3GS 的分辨率�?320x480，iPhone 4/4s 的分辨率�?640x960

这意味着，iPhone 3GS �?320 个物理像素，iPhone 4/4s �?640 个物理像�?
如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到�?640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位

我们统一 iPhone 3GS �?iPhone 4/4s 都是 320 个虚拟像素，只是�?iPhone 3GS 上，最�?1 个虚拟像素换算成 1 个物理像素，�?iphone 4s 中，1 个虚拟像素最终换算成 2 个物理像�?
至于 1 个虚拟像素被换算成几个物理像素，这个数值我们称之为设备像素比，也就是下面介绍的dpr

dpr

dpr（device pixel ratio），设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取

计算公式如下�?

当设备像素比�?:1时，使用1�?×1）个设备像素显示1个CSS像素

当设备像素比�?:1时，使用4�?×2）个设备像素显示1个CSS像素

当设备像素比�?:1时，使用9�?×3）个设备像素显示1个CSS像素

如下图所示：

当dpr�?，那么1px的CSS像素宽度对应3px的物理像素的宽度�?px的CSS像素高度对应3px的物理像素高�?

ppi

ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像

计算公式如下�?

三、总结

无缩放情况下�?个CSS像素等于1个设备独立像�?
设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变

PC端中�?个设备独立像�?= 1个设备像�?（在100%，未缩放的情况下�?
在移动端中，标准屏幕�?60ppi）下 1个设备独立像�?= 1个设备像�?
设备像素比（dpr�?= 设备像素 / 设备独立像素

每英寸像素（ppi），值越大，图像越清�?

参考文�?

post.posted post.in

面试官：说说em/px/rem/vh/vw区别?

一、介�?

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容�?
从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单�?
利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等

二、单�?

在css单位中，可以分为长度单位、绝对单位，如下表所指示

CSS单位
相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax�?
绝对长度单位 cm、mm、in、px、pt、pc

这里我们主要讲述px、em、rem、vh、vw

px

px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位�?
有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的

这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无�?

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px�?
为了简�?font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变�?16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除�?10，然后换�?em 作为单位就行�?
特点�?

  • em 的值并不是固定�?- em 会继承父级元素的字体大小
  • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺�?- 任意浏览器的默认字体高都�?16px

举个例子

1
2
3
<div class="big">
    我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
</div>

样式�?

1
2
3
4
5
<style>
    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
    .big{font-size: 1.4rem}
    .small{font-size: 1.2rem}
</style>

这时候.big元素的font-size�?4px，而.small元素的font-size�?2px

rem

rem，相对单位，相对的只是HTML根元素font-size的�?
同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

1
html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

这样页面�?rem=10px�?.2rem=12px�?.4rem=14px�?.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

特点�?

  • rem单位可谓集相对大小和绝对大小的优点于一�?- 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺�?

vh、vw

vw ，就是根据窗口的宽度，分�?00等份�?00vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高�?
这里的窗口分成几种情况：

  • 在桌面端，指的是浏览器的可视区域

  • 移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

  • 对于普通定位元素就是我们理解的父元�?- 对于position: absolute;的元素是相对于已定位的父元素
  • 对于position: fixed;的元素是相对�?ViewPort（可视窗口）

三、总结

px：绝对单位，页面按精确像素展�?
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的�?
rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简�

0%