前端日记

面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？ 一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器 这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器 这种布局适用于内容上具有明显主次关系的网页 三栏布局三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之 大家最常见的就是github： 二、两栏布局两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在 实现思路也非常的简单： 使用 float 左浮左边栏 右边模块使用 margin-left 撑出内容块做内容展示 为父级元素添加BFC，防止下方元素飞到上方内容 代码如下： 1234567891011121314151617181920<style> .box{ overflow: hidden; 添加BF ...

面试官：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用于确定背景画区，有以下几种可能的 ...

面试官：如果要做优化，CSS提高性能的方法有哪些？ 一、前言每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的 作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验 因此，在整个产品研发过程中，css性能优化同样需要贯穿全程 二、实现方式实现方式有很多种，主要有如下： 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 内联首屏关键CSS在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染 而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染 所以，CSS内联使用使渲染时间提前 注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式 异步加载CSS在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容 前面加载内联代码后，后面的 ...

面试官：说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？ 一、背景在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉，我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的 当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异 这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念 二、介绍CSS像素CSS像素（css pixel, px）: 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位 在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位 px是一个相对单位，相对的是设备像素（device pixel） 一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素 CSS像素又具有两个方面的相对性： 在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率） 在不同的设备之 ...

面试官：说说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 pxpx，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中 有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的 这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关 emem是相对长度单位。相对 ...

面试官：说说flexbox（弹性盒布局模型）,以及适用场景？ 一、是什么Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素，称为flex容器container 它的所有子元素自动成为容器成员，称为flex项目item 容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向 每根轴都有起点和终点，这对于元素的对齐非常重要 二、属性关于flex常用的属性，我们可以划分为容器属性和容器成员属性 容器属性有： flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction决定主轴的方向(即项目的排列方向) 123.container { flex-direction: row | row-reverse | column | column-reverse; } 属性对应如下： row（默认值 ...

面试官：介绍一下grid网格布局 一、是什么Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法 1234567<div class="container"> <div class="item item-1"> <p class="sub-item"></p > </div> <div class="item item-2"></div> <div class="item item-3"></div></div> 上述代码实例中，.contai ...

面试官：css中，有哪些方式可以隐藏页面元素？区别? 一、前言在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式通过css实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip-path display:none设置元素的display为none是最常用的隐藏元素的方法 123.hide { display:none;} 将元素设置为display:none后，元素在页面上将彻底消失 元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘 消失后，自身绑定的事件不会触发，也不会有过渡效果 特点：元素不可见，不占据空间，无法响应点击事件 visibility:hidden设置元素的visibility为hidden也是一种常用的隐藏元素的方 ...

面试官：怎么理解回流跟重绘？什么场景下会触发？ 一、是什么在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上 在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变 当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来 当我们对 DOM 的修改导致 ...

面试官：让Chrome支持小于12px 的文字方式有哪些？区别？ 一、背景Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制 原由 Chrome 团队认为汉字小于12px就会增加识别难度 中文版浏览器 与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言 系统级最小字号 浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改 而我们在实际项目中，不能奢求用户更改浏览器设置 对于文本需要以更小的字号来显示，就需要用到一些小技巧 二、解决方案常见的解决方案有： zoom -webkit-transform:scale() -webkit-text-size-adjust:none Zoomzoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸 其支持的值类型有： zoom:50%，表示缩小到原来的一半 zoom:0.5，表示缩小到原来的一半 使 ...