前端面试题（3）

最新推荐文章于 2024-07-09 15:35:41 发布

Albert_GW

最新推荐文章于 2024-07-09 15:35:41 发布

阅读量123

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45295678/article/details/115877214

版权

面试题同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

前端面试题（3）

1、iframe有那些缺点？

iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

2、如何实现浏览器内多个标签页之间的通信?

通过WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；

注意：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。

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

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

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

使用步骤：
1、页面头部像下面一样加入一个manifest的属性<html manifest=”file.appcache”>；
2、在cache.manifest文件的编写离线存储的资源；

	CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    //offline.html

3、在离线状态时，操作window.applicationCache进行需求实现。

4、CSS选择符有哪些？哪些属性可以继承？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a:hover, li:nth-child）

可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式： border padding margin width height ;

5、CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;

优先级为:
同权重下: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
!important > id > class > tag
important 比内联优先级高

6、CSS3新增伪类有那些？

举例：
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。
p:last-of-type 选择属于其父元素的最后 元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        选择器匹配每个已启用的元素（大多用在表单元素上）
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

7、如何居中div？

1.水平居中： 给div设置一个宽度，然后添加margin:0 auto属性。

div{
    width:200px;
    margin:0 auto;
 }

**2.水平垂直居中一: ** 通过确定容器的宽高，层的外边距。

div{
    position: relative;     /* 相对定位或绝对定位均可 */
    width:500px; 
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
    background-color: pink;     /* 方便看效果 */
 }

3.水平垂直居中二: 宽高不确定，利用 transform 属性

div{
    position: absolute;     /* 相对定位或绝对定位均可 */
    width:500px; 
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;     /* 方便看效果 */

 }

4.水平垂直居中三: 利用 flex 布局，实际使用时应考虑兼容性

display: flex; 
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

div{
   width: 100px;
    height: 100px;
    background-color: pink;
 }

8、CSS3有哪些新特性？

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow、）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
缩放,定位,倾斜,动画,多背景

Albert_GW

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题（3）

前端面试题（3）1、iframe有那些缺点？iframe会阻塞主页面的Onload事件；搜索引擎的检索程序无法解读这种页面，不利于SEO;iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。2、如何实现浏览器内多个标签页之间的通信?通过WebSocket、SharedWorker；也可以调用lo
复制链接

扫一扫