前端面试题第八天
一、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 清除浮动的方式有哪些及优缺点
-
额外标签法
是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签
例如<div style="clear:both"></div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差。 -
overflow:hidden
可以给父级添加:
overflow为hidden/ auto/ scro11
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。 -
使用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==')