浏览器/html/css面试题

绝地灬酷狼 2022-10-29 12:25 547阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.什么是盒模型
 *  2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
 *  3.简述src和href的区别
 *  4.什么是css Hack
 *  5.什么叫优雅降级和渐进增强
 *  6.px和em的区别 +rem
 *  7.HTML5 为什么只写
 *  8.Http的常用状态码有哪些
 *  9.一次完整的HTTP事务是怎么一个过程(三次握手)
 *  10.HTTPS是如何实现加密
 *  11.浏览器是如何渲染页面的
 *  12.浏览器的内核有哪些？分别有什么代表的浏览器
 *  13.页面导入时，使用link和@import有什么区别
 *  14.如何优化图像，图像格式的区别
 *  15.列举你了解Html5. Css3 新特性
 *  16.可以通过哪些方法优化css3 animation渲染
 *  17.列举几个前端性能方面的优化
 *  18.如何实现同一个浏览器多个标签页之间的通信
 *  19.浏览器的存储技术有哪些
 *  20.css定位方式
 *  21.尽可能多的写出浏览器兼容性问题
 *  22.垂直上下居中的方法
 *  23.响应式布局原理
 *  25.清除浮动的方法
 *  26.http协议和tcp协议
 *  27.刷新页面，js请求一般会有哪些地方有缓存处理
 *  28.如何对网站的文件和资源进行优化
 *  29.你对网页标准和W3C重要性的理解
 *  30.Http和https的区别
 *  31.data-属性的作用
 *  33.哪些操作会引起页面回流（Reflow）
 *  34.CSS预处理器的比较less sass
 *  35.如何实现页面每次打开时清除本页缓存
 *  36.什么是Virtual DOM,为何要用Virtual DOM
 *  37.伪元素和伪类的区别
 *  38.http的几种请求方法和区别
 *  41.从浏览器地址栏输入url到显示页面的步骤
 *  42.如何进行网站性能优化
 *  43.语义化的理解
 *  44.HTML5的离线储存怎么使用，工作原理能不能解释一下？
 *  48.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
 *  49.HTML全局属性(global attribute)有哪些
 *  52.网页验证码是干嘛的，是为了解决什么安全问题
 *  53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
 *  54. CSS选择器有哪些？哪些属性可以继承？
 *  58.用纯CSS创建一个三角形的原理是什么？
 *  59.常见的兼容性问题？
 *  63.display:none与visibility：hidden的区别？
 *  64.position跟display、overflow、float这些特性相互叠加后会怎么样？
 *  65.对BFC规范(块级格式化上下文：block formatting context)的理解？
 *  66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
 *  67.上下margin重合的问题(margin塌陷问题)
 *  68. 设置元素浮动后，该元素的display值是多少？
 *  69.移动端的布局用过媒体查询吗？
 *  78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
 *  83.display:inline-block 什么时候会显示间隙？
 *  84. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
 *  85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
 *  86.style标签写在body后与body前有什么区别？
 *  87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
 *  89. 一行或多行文本超出隐藏
 *  90.常见的元素隐藏方式？
 *  5大浏览器内核
 *  link和@import的区别

--------------------

# 1.什么是盒模型 #

盒模型是指由margin外边距 padding内边距 border边框以及内容content组成的模型  
盒模型有俩种  
w3c标准盒模型 =>它的宽高 = 内容concent的宽高  
混杂盒模型(怪异盒模型) => 他的宽高 = padding的 + border的+内容concent的宽高

# 2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？ #

行内元素:a img b span strong等等  
块级元素:div ul li ol h1-h6等等  
空元素 :br hr input  
俩者的区别:  
块级元素可以设置宽高并且独占一行,而行内元素不可以设置宽高,且不独占一行  
唯一特别的就是img可以设置宽高 因为img也是置换元素 ,置换元有内置宽高,可以设置宽高

# 3.简述src和href的区别 #

# 4.什么是css Hack #

# 5.什么叫优雅降级和渐进增强 #

# 6.px和em的区别 +rem #

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。  
em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。  
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。  
rem是相当于与html字体大小

# 7.HTML5 为什么只写 #

# 8.Http的常用状态码有哪些 #

200 OK 服务器成功处理了请求（这个是我们见到最多的）

204 No Content 请求成功处理，没有实体的主体返回

206 Partial Content GET范围请求已成功处理

301/302 Moved Permanently（重定向）请求的URL已移走。Response中应该包含一个Location URL, 说明资源现在所处的位置

303 See Other 临时重定向，期望使用GET定向获取

304 Not Modified 发送的附带条件请求未满足

307 Temporary Redirect 临时重定向，POST不会变成GET

400 Bad Request 请求报文语法错误或参数错误

401 Unauthorized 需要通过HTTP认证，或认证失败

403 Forbidden 请求资源被拒绝

404 Not Found(页面丢失)未找到资源

500 Internal Server Error 服务器故障或Web应用故障

501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务

503 Service Unavailable 服务器超负载或停机维护

# 9.一次完整的HTTP事务是怎么一个过程(三次握手) #

首先,在发送请求的时候告诉服务器端 我来获取资源的(第一次握手)  
然后服务器收到请求,发送相关资源(第二次握手)  
最后前端拿到资源告诉服务器端,我已经拿到资源了(第三次握手)

# 10.HTTPS是如何实现加密 #

# 11.浏览器是如何渲染页面的 #

# 12.浏览器的内核有哪些？分别有什么代表的浏览器 #

# 13.页面导入时，使用link和@import有什么区别 #

link是html引入css样式的方法,而@import是css那边引入样式的方法  
link引入的样式是一边加载样式一边加载html  
而@import是等待html加载完成后 在加载样式  
@import是在css2.1带来的css引入css的方法  
@link是html引入css的方法  
link可以通过javascript操作dom 二@import不行

# 14.如何优化图像，图像格式的区别 #

# 15.列举你了解Html5. Css3 新特性 #

HTML5新特性  
新增加了语义化标签  
新增了视音频标签  
新增了canvas svg等等绘图

css3新特性  
新增了平移方法 ,旋转方法 ,缩放,以及动画  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

# 16.可以通过哪些方法优化css3 animation渲染 #

# 17.列举几个前端性能方面的优化 #

1.图片懒加载  
2.gzip压缩  
3.使用ssr (服务器渲染)  
4.按需引入  
5.减少文件体积  
等等

# 18.如何实现同一个浏览器多个标签页之间的通信 #

# 19.浏览器的存储技术有哪些 #

浏览器的存储技术  
第一种 cookie ,在浏览器登录的时候,服务器返回一个sessionid返回给浏览器端,可以存到cookie中,等下次再次进入这个页面的时候,会自动携带上这个sessionid,判断是否曾经登录过, 实现免登陆,cookie可以设置名值,允许域名的访问,允许路径的访问,过期时间,安全性,但是cookie所能存储量的内存很小,所以如果存储量较大的话不建议使用cookie,而cookie只能存放4k的内存带下  
第二种 session  
session的话又有俩种方式 localStrong sessionStrong  
localstrong是长期存储 即使关掉浏览器也还会存在  
而sessionStrong 是短期的存储 一旦关掉浏览器,就会数据消失  
可以存储5M的大小

# 20.css定位方式 #

首先第一种是staic定位,也就是一开始什么都不用设置,默认的  
第二种relative 相对定位 相对定位相对于自身定位 不脱离标准流并且占据位置  
第三种position 绝对定位 相对于已经定位的父集移动(也就是如果父元素没有设置定位,那么将会一直向上寻找定位的元素来移动) 脱离标准流 不占据位置  
第四种flex 固定定位 相对于 浏览器视口位置移动 脱离标准流并且不占据位置  
第五种粘性定位 …

# 21.尽可能多的写出浏览器兼容性问题 #

# 22.垂直上下居中的方法 #

垂直居中  
1.定位+transform  
position:absolute  
top:50%  
transformY(-50%);  
2.flex弹性布局  
父元素display:flex  
子元素:algin-items:center

\#\#水平居中:  
\-1.块级子元素 margin: 0 auto;(有宽度)  
\-2.父元素 text-align: center; 子元素display: inline-block;  
\-3.子元素 margin-left: 50%;(定位也行) transform: translateX(-50%);

*  4.父元素 display: flex; 子元素justify-content: center;

# 23.响应式布局原理 #

# 25.清除浮动的方法 #

为什么要清除浮动  
因为子级浮动元素会造成父元素高度为0的问题  
解决浮动  
1.在最后一个浮动元素后面添加一个div 样式设置clear:both  
2.在父元素中添加样式overflow:hidden  
3.单伪元素清除浮动.clearfix:after\{  
display:block;  
content:’ ';  
clear:both  
\}  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

# 26.http协议和tcp协议 #

TCP协议对应于传输层，而HTTP协议对应于应用层，从本质上来说，二者没有可比性。

1，http对应于应用层

2，Tcp协议对应于传输层

3，http协议是在Tcp协议之上建立的，http在发起请求时通过tcp协议建立起连接服务器的通道，请求结束后，立即断开tcp连接

说明：从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。

4，Http是无状态的短连接，而TCP是有状态的长连接

# 27.刷新页面，js请求一般会有哪些地方有缓存处理 #

有 cdn缓存，dns缓存，浏览器缓存，服务器缓存

# 28.如何对网站的文件和资源进行优化 #

# 29.你对网页标准和W3C重要性的理解 #

为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）。标签字母要小写

2）。标签要闭合

3）。标签不允许随意嵌套

2.对于css和js来说

1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性

# 30.Http和https的区别 #

安全性上，HTTPS是安全超文本协议，在HTTP基础上有更强的安全性。简单来说，HTTPS是使用TLS/SSL加密的HTTP协议

申请证书上，HTTPS需要使用ca申请证书

传输协议上, HTTP是超文本传输协议，明文传输；HTTPS是具有安全性的 SSL 加密传输协议

连接方式与端口上，http的连接简单，是无状态的，端口是 80； https 在http的基础上使用了ssl协议进行加密传输，端口是 443

# 31.data-属性的作用 #

32.如何让Chrome浏览器显示小于12px的文字

# 33.哪些操作会引起页面回流（Reflow） #

回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。

由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。硬要比较的话，回流比重绘做的事情更多，带来的开销也更大。但这两个说到底都是吃性能的，所以都不是什么善茬。我们在开发中，要从代码层面出发，尽可能把回流和重绘的次数最小化。

# 34.CSS预处理器的比较less sass #

# 35.如何实现页面每次打开时清除本页缓存 #

# 36.什么是Virtual DOM,为何要用Virtual DOM #

# 37.伪元素和伪类的区别 #

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

# 38.http的几种请求方法和区别 #

39.前端需要注意哪些SEO  
40.的title和alt有什么区别

# 41.从浏览器地址栏输入url到显示页面的步骤 #

浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP，向服务器发起请求；  
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图像等）；  
浏览器对加载到的资源（HTML、JS、CSS 等）进行语法解析，建立相对应的内部数据结构（如 HTML 的 DOM）；  
载入解析到的资源文件，渲染页面，完成。

# 42.如何进行网站性能优化 #

# 43.语义化的理解 #

①用正确的标签做正确的事情。

②html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

③ 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;

④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

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

45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢  
46.iframe有那些缺点？  
47.WEB标准以及W3C标准是什么?

# 48.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? #

1.  声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
2.  严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3.  在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4.  DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

# 49.HTML全局属性(global attribute)有哪些 #

50.Canvas和SVG有什么区别？  
51.如何在页面上实现一个圆形的可点击区域？

# 52.网页验证码是干嘛的，是为了解决什么安全问题 #

防止非人操作  
解决由于脚本的操作

# 53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？ #

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。 区别在于前两者属于WebStorage，创建它们的目的便于客户端存储数据。 而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]

# 54. CSS选择器有哪些？哪些属性可以继承？ #

55.CSS优先级算法如何计算？  
56.CSS3有哪些新特性？  
57.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

# 58.用纯CSS创建一个三角形的原理是什么？ #

1.使元素宽度和高度为0,然后给边框比较大的像素(兼顾低版本的浏览器可以添加上font-size:0;line-heght:0)  
2.然后设置上左右山三个边为透明颜色,

# 59.常见的兼容性问题？ #

60.为什么要初始化CSS样式  
61.absolute的containing block计算方式跟正常流有什么不同？  
62.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

# 63.display:none与visibility：hidden的区别？ #

display:none和visibility：hidden都是使元素进行隐藏  
但是display:none 元素隐藏,不占有位置,所以不回影响布局  
visibility：hidden 元素隐藏 ,但是占有位置 ,影响布局  
另外还有一个同样是隐藏,也占有位置,这个是oprcity:0

# 64.position跟display、overflow、float这些特性相互叠加后会怎么样？ #

# 65.对BFC规范(块级格式化上下文：block formatting context)的理解？ #

BFC概念很多同学都没有什么概念，不知道为什么需要清除浮动,margin重叠等等系列骚操作,看完这篇我想应该有个大概了

再来回顾一个BFC的特性

1.同一个 BFC 下外边距会发生折叠  
2.BFC 可以阻止元素被浮动元素覆盖  
3.BFC 可以包含浮动的元素(清除浮动）

触发BFC  
根元素或包含根元素的元素  
浮动元素（元素的 float 不是 none）  
绝对定位元素（元素的 position 为 absolute 或 fixed）  
行内块元素（元素的 display 为 inline-block  
overflow 值不为 visible 的块元素

# 66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ #

浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。  
当由于子元素浮动带来父元素高度塌陷(高度为0)的影响时,这时候就要清除浮动  
清除浮动4个方法  
1.父元素overflow:hidden  
2.在最后一个浮动元素后面添加一个div 设置clear:both  
3.单伪元素清除浮动  
4.双伪元素清除浮动

# 67.上下margin重合的问题(margin塌陷问题) #

1.可以放在不同的BFC容器中  
2.只给一个盒子margin

若是嵌套的上下margin重合问题  
可以使用  
1.overflow;hidden  
2可以给父集元素定义上边框.

# 68. 设置元素浮动后，该元素的display值是多少？ #

定位也是  
inline-block 行级块元素

# 69.移动端的布局用过媒体查询吗？ #

70.CSS优化、提高性能的方法有哪些？  
71.浏览器是怎样解析CSS选择器的？  
72.在网页中的应该使用奇数还是偶数的字体？为什么呢？  
73.margin和padding分别适合什么场景使用？  
74.元素竖向的百分比设定是相对于容器的高度吗？  
75.全屏滚动的原理是什么？用到了CSS的哪些属性？  
76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？  
77. 视差滚动效果？

# 78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用 #

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等  
伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类，由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素

单冒号(:)用于CSS3伪类，  
双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）

双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，  
比如:first-line、:first-letter、:before、:after等，  
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。  
79.让页面里的字体变清晰，变细用CSS怎么做？  
80. position:fixed;在android下无效怎么处理？  
81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？  
82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

# 83.display:inline-block 什么时候会显示间隙？ #

在前端页面布局中，经常用到display：inline-clock；方便布局，能够将块状元素按照内联元素的方式布局，同时能设置宽高。

但是，经常写代码的朋友会发现，会产生间隙，间隙产生的原因是因为，换行或空格会占据一定的位置。

所以我们的解决方案如下：

1，在html代码中除去当前元素的空格或换行；

但是，这样代码的美观度，可阅读行降低，不可行

2，当前元素的父元素中设置font-size:0;

其作用与1方法本质上是一样的，但有可能在chorme中不支持，

3，在当前元素的父元素中设置letter-spaceing:-4px;

其作用是可以控制文字间的水平距离，可以让文字水平方向上重叠（line-height是让文字垂直方向上重叠），
    
    这样就抵消了空格或换行的占位。

根据查找资料发现一下特性：

1，block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；  
2，inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；  
3，font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；  
4，letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。

推荐解决方法：

父元素中设置  
font-size:0;letter-spaceing:-4px;

# 84. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 #

另一个元素高度100%(有一个前提:必须设置html,body的高度为100%,让这个元素去继承)

# 85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？ #

# 86.style标签写在body后与body前有什么区别？ #

写在body前面有利于浏览器的逐步加载,  
而在写在body后面的会在页面加载的时候,会中断加载,然后先去加载完样式,在继续加载.在ie这个样会导致页面闪烁问题.

# 87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理? #

参数是scroll时候，必会出现滚动条。  
参数是auto时候，子元素内容大于父元素时出现滚动条。  
参数是visible时候，溢出的内容出现在父元素之外。  
参数是hidden时候，溢出隐藏。

默认为visible  
88.阐述一下CSS Sprites  
多个图片整合成一张图片  
这样做的话会较少http请求,是一种css的优化次略

# 89. 一行或多行文本超出隐藏 #

/*单行文本溢出*/
    p { 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    /*多行文本溢出*/
    p { 
      position: relative;
      line-height: 1.5em;
      /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
      height: 3em;
      overflow: hidden;
    }
    
    p:after { 
      content: '...';
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: #fff;
    }

# 90.常见的元素隐藏方式？ #

\-（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

\-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。

\-（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

\-（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

\-（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

\-（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

\-（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

# 5大浏览器内核 #

谷歌浏览器: Blink内核  
safair:webkit内核  
欧朋: Blink内核  
ie:Trident内核  
火狐:Gecko内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；  
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；  
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；  
4、Safari浏览器内核：Webkit内核；  
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；  
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；  
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；  
8、百度浏览器、世界之窗内核：IE内核；  
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

# link和@import的区别 #

两者都是外部引用 CSS 的方式，但是存在一定的区别：  
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。  
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。  
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。  
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221024/a4a63f14e3cb4d128fda323aa5f2d942.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221024/a83476fd6a7f4ba795d097194d604761.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221024/ac07c7f6dd1747868aaffb70bd7e8159.png