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==')
上一篇:移动端单位相关概念


下一篇:前端中的物理像素和理论像素 dpi