web前端开发面试题(八)

前端面试题第八天

一、HTML 部分

1.1 viewport常见设置

定义：视口（viewport）是用户网页的可视区域，也可称之为视区。

默认不设置 viewport 可视区窗口的宽度在移动端的时候是980；

meta标签的设置   设置视口viewport
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" >

常用属性

属性	属性值
width	可视区的宽度(number || device-width)
user-scalable	是否允许用户缩放( yes/no )
initial-scale	初始缩放比例,通过扩大或者缩小视觉视口的宽度实现
maximum-scale	最大缩放比例
minimun-scale	最小缩放比例

二、 CSS 部分

2.1 清除浮动的方式有哪些及优缺点

1. 额外标签法

   是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签
   例如<div style="clear:both"></div>

   优点:通俗易懂，书写方便
   缺点:添加许多无意义的标签，结构化较差。

2. overflow:hidden

   可以给父级添加:overflow为hidden/ auto/ scro11

   优点:代码简洁
   缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3. 使用after伪元素清除浮动

.clearfix:after {
		content: ""; 
		display: block; 
		height: 0; 
		clear: both;
		visibility: hidden; 
}
.clearfix {
		*zoom: 1;
}/*IE6、7专有*/

2.2 px、em 、rem的区别

• px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
• em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
• em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

三、 JS 部分

3.1 写一个加密字符串的方法

• encode 编码
• decode 解码

        function encode(str) {
            return console.log(btoa(encodeURIComponent(str)))
        }
        function decode(str) {
            return console.log(decodeURIComponent(atob(str)))
        }
        encode('web_chicken from CSDN')
        decode('d2ViX2NoaWNrZW4lMjBmcm9tJTIwQ1NETg==')