前端面试题问答

1. CSS中那些属性可以继承？

答：

[A] 字体属性：

font-family,
font-size,
font-style,
font-variant,
font-weight,
font;可继承

ps： font-size继承的是计算后的实际值

[B] 文本属性：

可以继承:

word-spacing;
letter-spacing;
text-align;
text-transform;
text-indent;
line-height

不可继承：

text-decoration;
vertical-align

[C] 颜色背景属性：

可以继承:

color

不可继承:

background(background-color background-image background-repeat background-attachment background-position)

[D] 边框属性：

不可以继承:

border(border-top border-right border-bottom border-left)(border-width border-style border-color)

[E] 定位和布局属性：

不可以继承:

margin;
padding;
width;
height;
float;
clear;
position;
left;
top;
overflow;
z-index;
display

[F] 列表属性：

可以继承:

list-style-image;
list-style-position;
list-style-type;
list-style

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

答：

本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式。这里主要讲解用本地存储方式解决。即调用 localStorage、Cookie等本地存储方式。

①调用localStorage

在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。

页1：

<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
            var name=$("#name").val();    
            localStorage.setItem("name", name);   
        });    
    });    
</script>  

页2：

<script type="text/javascript">  
    $(function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key + "=" + event.newValue);    
        });     
    });  
</script>  

②调用localStorage

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

页1：

<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
            var name=$("#name").val();    
            document.cookie="name="+name;    
        });    
    });    
</script>  

页2：

<script type="text/javascript">  
    $(function(){   
        function getCookie(key) {    
            return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
        }     
        setInterval(function(){    
            console.log("name=" + getCookie("name"));    
        }, 10000);    
    });  
</script>  

3. 浏览器的渲染原理？

答：浏览器渲染原理

4. 什么是webp?

答：WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。
若对Webp有兴趣可以看看：https://blog.csdn.net/Menqq/article/details/114871557

5. 介绍一下重绘和回流（Repaint&Reflow），以及如何进行优化？

答：回流必将引起重绘，重绘不一定会引起回流。
详细可看：回流与重绘，及优化

6. 分析比较opacity:0、visibility:hidden、display:none优劣和适用场景

答：看看

7. 用纯CSS创建一个三角形

答：纯css三角形

8. min-width/max-width和min-height/max-height/max-height属性间的覆盖规则？

答：看看