前端面试题

1.清除浮动的5种方式
1.伪对象法
.clearfloat::after{
    content:"";
    display:block;
    clear:both;
    height：0；
    overflow:hidden;
}
.clearfloat{
    zoom:1;
}
2.父元素加clear:both;
3.父元素加overflow:hidden;
4.空div法
    浮动元素的后面，加一个 <div class="clear"></div>
    添加样式.clear{clear:both;}
5.父元素加height（父元素高已知）
6.父元素跟随子元素一起浮动

2.禁止页面缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

3.设置一个视频无限播放，视频立马播放，静音
<video src="" autoplay loop muted></video>

4.画一个三角形
.boxboss{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
 }

<div class="boxboss"></div>

5.标准盒子模型和怪异盒子模型
box-sizing: content-box 是标准盒子模型
box-sizing: border-box 是IE盒子模型

6.遍历a节点的父节点下的所有子节点
var b=document.getElementById("a").parentNode.children;

7.创建一个属性节点，创建一个元素节点，创建一个文本节点
document.createAttribute()  
document.createElement()  
document.createTextNode()

8.返回一个元素的宽度，高度，水平偏移，垂直偏移(包括边框和填充，但不是边距)
offsetWidth 
offsetHeight  
offsetLeft  
offsetTop

9.打开窗口 关闭窗口  移动当前窗口
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口

10.内容对齐，沿着弹性容器的主轴线对齐
justify-content: flex-start | flex-end | center | space-between | space-around

11.设置渐变
线性渐变（红色到绿色，从左到右）background-image：linear-gradient(red,green);
径向渐变（红色到绿色，从里到外）background-image：radial-gradient(red,green);

12.隐藏一个元素的3种方法
display:none;   不占位置
visibility:hidden；占位置
opacity:0;    占位置