03-20 12:41 已编辑字节跳动_前端开发(准入职员工)

关注

前端面经（CSS部分）

(一) CSS语法

1.1 单位

px全称pixel像素，是相对于屏幕分辨率而言的，它是一个绝对单位，但同时具有一定的相对性。因为在同一个设备上每个像素代表的物理长度是固定不变的，这点表现的是绝对性。但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的，这点表现的是相对性。

em是一个相对长度单位，具体的大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为80px，0.5em就表示字体大小是父元素的一半为40px。em 作为尺度单位时是以 font-size 属性为参考依据的。

rem 是 root em 的简称，表示设置以网页根元素 ( html ) 的字符高度为单位。因此可以只对 html 元素设置字体大小，其他元素用 rem 单位设置百分比大小，例如 h 1{font-size:1.25 rem}。一般的浏览器默认的 1 rem 是 16 px。

vw 和 vh 是 CSS3 新单位，即 view width 可视窗口宽度和 view height 可视窗口高度。1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

1.2 块级元素

块级：form h li p table th

每个块级元素都是独自占一行；
高度，行高，外边距（margin）以及内边距（padding）都可以控制；
元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；
多个块状元素标签写在一起，默认排列方式为从上至下；

行内：a br i label small textarea select strong

不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效上下无效；
设置行高有效，等同于给父级元素设置行高；
元素的宽度就是它包含的文字或图片的宽度，不可改变；
行内元素中不能放块级元素，a 链接里面不能再放链接；

行内块：button input textarea select img

高度、行高、外边距以及内边距都可以控制；
默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

1.3 隐藏

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击，opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击。
继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能： display: none : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少。通过display: none隐藏一个DOM节点-触发重排和重绘通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化（详见 3.2）

屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将隐藏类型归为三大类：

完全隐藏：元素从渲染树中消失，不占据空间。视觉上的隐藏：屏幕中不可见，占据空间。语义上的隐藏：读屏软件不可读，但正常占据空。

完全隐藏

(1) display 属性

 display: none;

(2) hidden 属性 HTML5 新增属性，相当于 display: none

<div hidden></div>

视觉上的隐藏

(1) 设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。

position:absolute;
left: -99999px;

(2) 设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。

position: relative;
left: -99999px;
height: 0

(3) 设置 margin 值，将其移出可视区域范围（可视区域占位）。

margin-left: -99999px;
height: 0;

语义上隐藏

aria-hidden 属性

读屏软件不可读，占据空间，可见。

<div aria-hidden="true"></div>

1.4 清除浮动

清除浮动是清除浮动带来的负面影响。因为子元素浮动了，脱离标准流，不再占用之前的位置，导致无法撑开没有设置高度的父元素浮动的父元素高度为0,进而导致后续结构直接跑上来，导致高度塌陷。

clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式：{clear:both;height:0;overflow:hidden;} 缺点：添加无意义标签，语义化差；
给浮动元素父级设置高度
父级同时浮动（需要给父级同级元素添加浮动）
父级设置成inline-block 缺点：需要设置宽度，margin: 0 auto居中方式失效；
给父级添加overflow:hidden 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素；
万能清除法 ::after 伪元素清浮动（现在主流方法，推荐使用）缺点：：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

1.5 动画

ss中实现动画有两种方式：transition过渡动画、 animation自定义动画。

1. transition：

transition-property：指定使用过渡效果的css属性 w| h| color |font-size | all
transition-duration：设置过渡动画持续时间
transition-timing-function：设置动画的时间函数。linear | ease（缓解）| cubic-bezier(n,n,n,n)
transition-delay：设置动画的延迟时间

注意：

不支持z-index | display

2. animation:

通过@keyframes自定义关键帧动画并为动画命名，可以在其中对每一帧进行设置。

@keyframes animateName{
    from|0%   { width:50px; height:50px; }	
    50%  { width:100px; height:100px; }	
    to|100% { width:50px; height:50px; }
}

// 从左往右滑动，或者用transition实现，或者使用jQuery的window.requestAnimationFrame实现
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.slideInElement {
  animation: 2s ease-out 0s 1 slideInFromLeft;
}

使用自定义动画的元素，需要通过animation相关属性进行配置

animation-name: 某个元素想要使用对应名称的动画
animation-duration：默认为0
animation-timing-function：可配置动画随时间的运动速率和轨迹
animation-delay
animation-iteration-count：用于定义动画迭代次数，默认为1|infinite
animation-direction：设置动画执行方向 normal|reverse|alternate|inherit
animation-fill-mode：动画的填充模式 none|forwards|backwards
animation-play-state：设置动画的执行状态，通常通过JavaScript动态控制。running|paused

多动画：

首先使用animation-name来锁定使用的各个动画
之后使用其它的animation族属性，分别约束对应动画，且设置顺序与animation-name使用动画的顺序保持一致。

为什么transform比top快

因为top和left的改变会触发浏览器的 reflow和 repaint 。整个动画过程都在不断触发浏览器的重新渲染，这个过程是很影响性能的。而transform 动画由GPU控制该过程发生在合成线程，与渲染主线程无关，支持硬件加速。

CSS transform属性并不会触发当前元素或附近元素的relayout。浏览器将当前元素视为一个整体，它会缩放、旋转、移动这一整个元素。浏览器只需要在动画开始之时生成位图，然后将位图发送给GPU。之后浏览器不需要做额外的relayout和repaint，甚至不需要发送位图给GPU。浏览器只需要充分发挥GPU的长处：绘制同一张位图到不同的位置、旋转角度和缩放比例。

现代浏览器通常由两个重要的线程组成（主线程 和 合成线程）。这两个线程一起工作完成绘制页面的任务：
主线程需要做的任务如下：
- 运行Javascript
- 计算HTML元素的CSS样式
- layout (relayout)
- 将页面元素绘制成一张或多张位图
- 将位图发送给合成线程

合成线程主要任务是：

- 利用GPU将位图绘制到屏幕上
- 让主线程将可见的或即将可见的位图发给自己
- 计算哪部分页面是可见的
- 计算哪部分页面是即将可见的（当你的滚动页面的时候）
- 在你滚动时移动部分页面

在很长的一段时间内，主线程都在忙于运行Javascript和绘制元素。

其他优化的策略还有：- opacity替代visibility- 多个DOM统一操作（虽然V8会有缓存优化）- 先将DOM离线，即display：none；修改后显示- 不要把DOM放在已给循环中作为循环变量- 不要使用table

合成层与渲染层https://blog.csdn.net/weixin_44100002/article/details/121606441

1.6 权重

第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。

第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}

第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}

第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}

第六优先级：通配选择器，如*{marigin:6px;}

权重优先级：行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定：

盒子在当前堆叠上下文中的堆叠层级。
盒子是否创建一个本地堆叠上下文。

1.7 居中

1）父、子元素宽高未知时

table-cell（使用表格样式）

<style>
.table-wrap{
        display: table-cell;
        height: 200px;
        width: 100px;
        padding: 20px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid red;
        }
</style>
<div  class="table-wrap">
    我是一大推文字，我想要垂直居中，这是省略这是省略这是省略这是省略
</div>

flex 布局（父级 justify-content: center 和 align-items: center 即可）
absolute + transform（定位的上、左为 50%，translate 上、左负 50%）
absolute + margin: 0 auto（定位的上下左右为 0）
Grid 网格布局
直接使用 table（改变结构实现，和第一条类似）

2）子元素固定宽高已知时（假设子元素宽高为 200px）

absolute + calc（定位上、左负50%时减去子元素宽、高）
absolute + 负margin（定位的上、左为 50%，margin 的上、左负子元素的一半）

3）父元素高度已知（假设为 400px），子元素宽高未知

text-align + vertical-align

text-align: center; 是给父元素设置的，使得父元素设置之后，它里面的行内级元素居中

1.8 定位与脱标

1）脱标：

元素设置position，并且position的值为fixed或absolute；【这里有两种在流定位值，他们分别是static和relative】
元素添加浮动float，并且float的值不为none；

特点：

元素不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)，若元素未设置宽度高度，那么元素的宽高将完全由内容决定；
不再给父元素汇报自身宽高，若父元素没有设置宽高，将不能撑起父元素；
即使原来是行内级元素也可以随意设置宽度高度；

2）子绝父相

子绝父绝，子绝父固定都是可以的，absolute 的 left、right、top、bottom 这几个定位的属性参照对象是最邻近的定位祖先元素，所以只要我们要相对与哪个祖先来定位只要将祖先设置为定位元素就行，至于是哪种就得看你的实际需求了，当希望子元素相对于父元素进行定位，又不希望父元素脱标的时候，我们才会会用到子绝父相。

3）定位属性

position: static;默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
position: inherit;即继承父元素的position值。
position: relative;
position: absolute;绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
position: fixed;``fixed元素脱离正常的文档流，所以它与absolute元素很相似，同样会被周围元素忽略，支持top,bottom,left,right属性，固定在屏幕的某个位置。不支持IE6、IE7、IE8。可以通过给该元素设置position: absolute并获取滚动条距离顶部高度加上某个固定高度来实现。
position: sticky;当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

须指定 top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。设定为sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 sticky 不会生效。如果 sticky 元素的任意父节点定位设置为 hidden，则父容器无法进行滚动，所以sticky 元素也不会有滚动然后固定的情况。如果 position:sticky 元素的任意父节点定位设置为 relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。

1.9 选择器

伪类：以冒号(:)开头，用于选择处于特定状态的元素。

动态伪类：:visited(链接已访问时)、:focus、:hover等
状态伪类：:disabled、:empty、:required(表单项是否必填) 等
结构伪类：:first-child、:nth-of-type等
p:nth-child(odd){} //奇数行
p:nth-child(even){} //偶数行
其他伪类：:target(元素 id 匹配到哈希值时)、:lang(匹配到指定语言时)、:not()等
//顺序：link、visited、focus、hover、active 前三个无所谓，后两个保持一致

伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。
相邻选择器：

+选择器。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

~ 选择器。作用是查找某一个指定元素的后面的所有兄弟结点。

1.10 CSS3

CSS3 新增东西众多，这里列举出一些关键的新增内容：

选择器：通用兄弟选择器、伪类选择器、伪元素选择器、否定选择器、状态伪类选择器
盒子模型属性：border-radius、box-shadow、border-image
背景：background-size、background-origin、background-clip
文本效果：text-shadow、word-wrap
颜色：新增 RGBA，HSLA 模式
渐变：线性渐变、径向渐变
字体：@font-face
2D/3D转换：transform、transform-origin
过渡与动画：transition、@keyframes、animation
多列布局
媒体查询

1）transition：transition-property | transition-duration | transition-timing-function | transition-delay |

2）transform：translate() | rotate() | scale() | skew() |

1.11 BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

BFC的布局规则： 1 内部的Box会在垂直方向一个接着一个地放置。 2 Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。 3 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。 4 BFC的区域不会与float box重叠。 5 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 6 计算BFC的高度时，浮动子元素也参与计算。

如何触发BFS:

BFC可以解决哪些问题？

1 解决浮动元素令父元素高度坍塌的问题

2 非浮动元素被浮动元素覆盖

3 两栏自适应布局

参考文献：

一次弄懂css的BFC - 知乎 (zhihu.com)

文档流：

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。

简单点说，就是 document flow 指示了页面上的元素如何去排列。接着，讲到了 document flow 的三种影响元素位置的方法：

显示类型：HTML 元素最初按其显示类型定位。这种显示类型决定了其他元素是否能够位于它们旁边，以及填充、边距和其他 CSS 属性如何影响它。两种最重要的显示类型是：block 和 inline

Float：浮动框是一种CSS属性，它允许你应用在一个块级元素上，可以把这个块级元素推到父类块的左边界或者右边界。浮动元素离开了正常的文档流。一个周知的问题是当多个子元素都为浮动时，造成父类块高度的丢失。关于clearfix，本质上也是利用BFC

定位：这里有几个可以应该在元素上的定位值。应该在所有元素上的初始值是static，一个在“在流”类型，我们将在之后谈到。

1.12 canvas

1.canvas是html5的一个新标签，属于h5的新特性2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo3.它是通过javascript来画的，即脚本绘制图形

canvas可以用来干啥呢？1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡）2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas）3.广告banner的动态效果非常适合用canvas制作4.canvas还可以用来内嵌一些网页

1.13 src和href

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

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

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

(二)布局

移动端布局主要分为单独制作移动端页面和响应式页面。单独制作分为流式布局（百分比）、flex布局、媒体查询布局和混合布局。响应式分为媒体查询和bootstarp。

前端布局包括：静态布局、弹性布局（flexbox）、自适应布局（bootstrap）、流式布局（fluid）、响应式布局、浮动布局、定位布局。

2.1 Flex

flex 是 Flexible Box 的缩写，意为"弹性布局"。块级和行内都可以指定。指定容器display: flex即可。父容器有以下属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。

flex-direction属性决定主轴的方向（row、column、row-resverse ）；
flex-wrap属性定义，默认不换行，装不下会缩小子元素宽度；使用wrap换行；
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
justify-content属性定义了项目在主轴上的对齐方式。(center\flex-start\space-around\space-between)
align-items属性定义单行在交叉轴上如何对齐。
align-content属性定义了多行的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目（子元素）也有一些属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。

flex定义子项目剩余空间，适合三栏布局。 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。（1 [1 1 auto]就是代表均匀分配元素，flex:0等同于flex: 0 1 0%相当于不可扩大，可缩小,表现形式为最小内容宽度。flex:none等同于设置flex: 0 0 auto相当于不可扩大，不可缩小,内容本身的宽度是多少就是多少）
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0（不瓜分剩余空间），可以小于1但和要等于1。若min-content超出空间则作为最终宽度（可以通过设为0解决）。

剩余空间：x
假设有三个flex item元素，flex-grow 的值分别为a, b, c
每个元素可以分配的剩余空间为： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

三个flex item元素的width: w1, w2, w3
三个flex item元素的flex-shrink：a, b, c
计算总压缩权重：
sum = a * w1 + b * w2 + c * w3
计算每个元素压缩率：
S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum
计算每个元素宽度：width - 压缩率 * 溢出空间

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。 max-width/min-width > flex-basis > width > box
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

2.2 响应｜移动

移动端布局：

viewport 即视窗、视口，用于显示网页部分的区域，在 PC 端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗

布局视窗：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或其他值，通过 box-sizing 改变，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况
视觉视窗：终端设备显示网页的区域
理想视窗：针对当前设备最理想的展示页面的视窗，不会出现横向滚动条，页面刚好全部展现在视窗内，理想视窗也就是终端屏幕的宽度。

width定义视口的宽度，单位为像素正整数或设备宽度；device-widthheight定义视口的高度，单位为像素正整数或device-height；initial-scale定义网页初始缩放值整数或小数，小数为缩小，反之放大；maximum-scale定义缩放最大值整数或小数；minimum-scale定义缩放最小值整数或小数；user-scalable定义用户是否可以缩放yes/no

布局方法： vw/vh 和百分比布局，响应式和 REM 布局。

响应式布局：

需要为父级做一个布局容器，在不同的屏幕下通过媒体查询来改变布局容器的大小，在改变里面子元素的排列方式和大小。

@media screen and (max-width: 320px) {
    body {background-color: red;}

不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width

-webkit-min-device-pixel-ratio: 1.5 //是指当时显示屏最小的色倍为1.5倍的
它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度；

子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。跟padding一样，margin也是如此；

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的；

从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

REM布局

REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。(相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw)

注意：

1物理像素线（也就是普通屏幕下1px,高清屏幕下0.5px的情况）采用transform属性scale实现

lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem。

图片响应式

img {
    display: inline-block;
    max-width: 100%;
    height: auto;//证图片进行等比缩放而不至于失真
}
<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">
如果屏幕的dpi = 1的话则加载1倍图，而dpi = 2则加载2倍图，手机和mac基本上dpi都达到了2以上，这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。

参考：

https://juejin.cn/post/6844903814332432397

2.3 grid

首先引入grid.css。定义：display：grid

容器属性：

grid-template-* (columns\rows) 定义n×m的网格。可以利用repeat(auto-fill,x)自己分配，x可以定义为fr等分。

grid-*-gap（缩写为gap）定义间距

grid-template-areas: 定义每个项目的名字，不同区域名字可以相同，用.表示匿名

grid-auto-flow: row column dense; 定自动布局算法按照通过逐行/列填充来排列元素

**justify-items：**start|end|center|stretch 水平方向（align垂直）两者合并为place-items

**justify-content：**start|end|center|stretch|space-around 水平方向（align垂直）

**grid-auto-*：**用来设置多出来的项目的宽和高

项目属性：

**grid-column|row-start|end:**指定item的具体位置，具体在那根网格线之间。简写grid-column：1 / 3;

justify-self / align-self 只作用于单个项目设置垂直和水平

2.4 flexible

现在我们把设计稿分成10等份，设计稿 A = W/10，我们把设备可视区域也就是我们的各种移动端设备的这个画布也分成10份，并赋值给根元素的fontSize，我们都知道rem是根据根元素字体大小计算的，所以我们的1rem也就是设备可视区域/10，现在设计稿上有一块区域宽B，那它是不是等比放到设备可视区域的宽度为 B/A rem。再啰嗦一下，B在设计稿上占B/A份，那在设备可视区域上也要占B/A份对不对，所以宽是B/A rem。

// 首先是一个立即执行函数，执行时传入的参数是window和document
function flexible (window, document) {
  var docEl = document.documentElement // 返回文档的root元素
  var dpr = window.devicePixelRatio || 1 
  // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值
  // 调整body标签的fontSize，fontSize = (12 * dpr) + 'px'
  // 设置默认字体大小，默认的字体大小继承自body
  // 当页面展示或重新设置大小的时候，触发重新
  // 检测0.5px的支持，支持则root元素的class中有hairlines
}

(三)渲染

3.1 阻塞渲染

HTML解析器在解析过程中如果遇到外部CSS与外部JS文件，就会同时发起请求对文件进行下载，这个过程DOM构建的过程会停止，需要等CSS文件下载完成并构建完CSSOM，JS文件下载完成并执行结束，才会开始构建DOM。如果遇到 script 标签，渲染线程会暂停渲染过程，将控制权交给 JS 引擎。等 JS 引擎运行完毕，浏览器又会把控制权还给渲染线程，继续 DOM 的解析。我们知道CSS会阻塞JS的执行，所以JS必须要等到CSSOM构建完成之后再执行

js执行会阻塞DOM树的解析和渲染
css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

当要执行一个html页面时，他需要预先加载从上往下读取html里面的内容：首先，它会创建一个存放标签名的栈，然后会创建一个dom树，当html的根节点<html>也被加载到栈中时,才会形成完整的dom树，页面展示以及前端的操作都是基于这个dom树的；

而加载形成dom树的过程中：css是非阻塞的，它被下载完

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端校招面经分享文章被收录于专栏

前端校招面经分享，包含CSS、JS、Vue、React、计算机网络、难点项目、手撕题等。这份面经总结了几乎大厂所有的面试题与牛客近几年公开的面经，可以说面试不会超出范围。因为我只负责总结加一些个人见解，所以一开始免费开源。但互联网戾气真的重，很多人拿着面经还一副理所应当的样子质问我要语雀，还说网上同类的有很多？？唉，分享不易，那我只好收费了233。当然也欢迎直接来找我要语雀，语雀会多一些内容。