2021-04-14前端面试题，css（上)

最新推荐文章于 2021-11-30 17:35:48 发布

子非鱼emma

最新推荐文章于 2021-11-30 17:35:48 发布

阅读量633

点赞数

分类专栏：前端面试题文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_38998319/article/details/115698647

版权

前端面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简述Chome盒模型与IE盒模型的区别

标准模型和IE模型 height 和 width 计算方式不同
标准模型：只包括 content
IE模型：content + padding + border

行内元素和块级元素都有哪一些？

1）行内元素

<span>、<a>、<b>、<strong>、<img>、<input>、<textarea>、<select>、、<em>、<del>

2）块级元素

<address>、<center>、<h1>~<h6>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

BFC：块级格式化上下文

具有BFC的元素可看作是独立的容器，容器里面的元素不会影响到容器外面的元素

人话：https://www.bilibili.com/video/BV1aZ4y1M7gW?from=search&seid=1276149695661179629

人话补充：https://www.bilibili.com/video/BV1h54y1D7rb?from=search&seid=1276149695661179629

图片与文字的配合：https://www.bilibili.com/video/BV1bT4y1P732/?spm_id_from=333.788.recommend_more_video.1

作用1：避免外边距重叠

2，清除浮动

3.阻止元素被浮动元素覆盖

什么是弹性布局

https://zxuqian.cn/css-flex-box-layout/

解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。

设为 flex 布局以后，子元素的 float、clear 和vertical-align属性将失效!!!

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {

flex-direction: row | row-reverse | column | column-reverse;}

justify-content属性定义了项目在主轴上的对齐方式。

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;}

align-items属性定义项目在交叉轴上如何对齐。

.box {

align-items: flex-start | flex-end | center | baseline | stretch;}

html5有哪些新特性？

(1)Canvas绘图
(2)SVG绘图
(3)地理定位
(4)Web Worker
web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。
(5)Web Storage
1.Cookie技术（兼容性好,数据不能超4kb,操作复杂）
2.（兼容性差,数据8MB,操作简单）sessionStorage
3.localStorage
(6)Web Socket
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端

position有哪些属性？

1. position: relative;相对定位

2. position: absolute;绝对定位

3. position: fixed;固定定位

4. position:static：默认值

5. position: sticky 粘性定位

6. position: inherit 规定应该从父元素继承 position 属性的值

7. position: initial 设置该属性为默认值

rem

单位-最好的讲解视频：https://www.bilibili.com/video/BV1P7411C7EP?from=search&seid=4198260417738973952

rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小(1rem),然后其他元素的长度单位就为rem。

此时1rem=16px（谷歌浏览器中）

em 元素用em的话是相对于该元素的font-size（没有则继承父元素，父元素没有一级一级往上，再么有就是继承根元素的。

vw/ vh

1.vw：1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个。

处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

单页面 SPA

https://www.bilibili.com/video/BV16K411L7Jf?from=search&seid=752382537379208432

SPA是一种特殊的web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面。它将所有活动局限于一个web页面中，仅在该web页面初始化时加载相应的HTML、JavaScript、css。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。在SPA应用中，应用加载之后就不会再有整页刷新。

**优点：**用户体验好、良好的前后端分离。

缺点：

1.不利于SEO,搜索引擎优化，。
2.初次加载耗时相对增多。
3.导航不可用，如果一定要导航需要自行实现前进、后退。

简述优雅降级与渐进增强

https://www.bilibili.com/video/BV1bh411D7zj?from=search&seid=13049239299903750535

1、渐进增强（progressive enhancement）

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

2、优雅降级（graceful degradation）

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

3、区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

b. 渐进增强观点认为应该关注于内容本身，这使得渐进增强成为一种更为合理的设计范例；优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。

解释下浮动和它的工作原理？清除浮动的方法

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1、使用空标签清除浮动

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2、使用after伪对象清除浮动

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

#parent::after{
  content:"";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

3、溢出隐藏

overflow: hidden;

4.浮动外部元素

如何让一个盒子在页面垂直水平居中

方法一：已知宽高

div{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

方法二：未知宽高

div{
	position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

前端性能优化方案

1、减少DOM操作 2、部署前，图片压缩，代码压缩 3、优化js代码结构，减少冗余代码 4、减少http请求，合理设置HTTP缓存 5、使用内容分发cdn加速 6、静态资源缓存 7、图片延迟加载

css选择器优先级顺序

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href="segmentfault.com"]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

什么是空元素？

即没有内容的HTML元素，例如：br、meta、hr、link、input、img

如何实现浏览器内多个标签页之间的通讯

1. 定时器setInterval + cookie

在页面A设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。

由于 Cookies 是在同域可读的，所以在页面 B 审核的时候改变 Cookies 的值，页面 A 自然是可以拿到的。

这样做确实可以实现我想要的功能，但是这样的方法相当浪费资源。虽然在这个性能过盛的时代，浪费不浪费也感觉不出来，但是这种实现方案，确实不够优雅。

**2. 使用localstorage **

localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。

直接在window对象上添加监听即可：

window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))

onstorage以及storage事件，针对都是非当前页面对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。然后就是在对原有的数据的值进行修改时才会触发，比如原本已经有一个key会a值为b的localStorage，你再执行：localStorage.setItem('a', 'b')代码，同样是不会触发监听函数的。

为什么要初始化css样式

1.浏览器差异

不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异

2.提高编码质量

如果不初始化，整个页面做完会很糟糕，重复的css样式很多

CSS3新增的伪类有哪些？

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

说说对canvas，svg，webgl的理解

Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏；
SVG 是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表；
WebGL（全写Web Graphics Library）是一种3D绘图标准，通俗说WebGL是canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，WebGL 主要用来做 3D 展示、动画、游戏。

解释csssprites，如何使用

Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

伪类和伪元素的区别

伪类顾名思义就是在元素身上在添加类,在这个类上生成元素
伪元素：就是在元素的基础上再添加新的元素
伪类一个: 伪元素两个 ::
伪类种类比较多伪元素种类少
伪类可以多个一块拼接
伪元素不能拼接

浏览器工作原理

用户界面、2. 网络、3. UI后端、4. 数据存储、5. 浏览器引擎、6. 渲染引擎、7. js解释器

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

常见的浏览器内核有哪些？

Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

（1）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
（2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
（3）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
（4）如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

如何进行seo？

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

4、重要内容不要用js输出：爬虫不会执行js获取内容

5、少用iframe：搜索引擎不会抓取iframe中的内容

6、非装饰性图片必须加alt属性

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。

HTML5的离线储存怎么使用，工作原理能不能解析一下？

https://www.cnblogs.com/yyrecord/p/13715320.html

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

更新缓存：一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存

如何使用： 1、页面头部像下面一样加入一个manifest的属性； 2、在cache.manifest文件的编写离线存储的资源； 3、在离线状态时，操作window.applicationCache进行需求实现。

子非鱼emma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-14前端面试题，css（上)

简述Chome盒模型与IE盒模型的区别标准模型和IE模型 height 和 width 计算方式不同标准模型：只包括contentIE模型：content+padding+border行内元素和块级元素都有哪一些？1）行内元素<span>、<a>、<b>、<strong>、<img>、<input>、<textarea>、<select>、、<em>、<...
复制链接

扫一扫