前端日记

面试官：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，表示缩小到原来的一半 使 ...

面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？ 一、是什么响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 描述响应式界面最著名的一句话就是“Content is like water” 大白话便是“如果将屏幕看作容器，那么内容就像水一样” 响应式网站常见特点： 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大小和位置 二、实现方式响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport 1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> 属性对应如下： width=devi ...