面试题节选四

一、清除浮动的五种方式

1.伪对象法
.clearfloat:after{
content:"";
display:block;
clear:both;
height：0；
overflow:hidden;
}
.clearfloat{
zoom:1;（为了兼容IE）
}

2.父元素加clear:both;
3.父元素加overflow:hidden;
4.空div法
浮动元素的后面，加一个
< div class=“clear”>< /div>
添加样式.clear{clear:both;}
5.父元素加height（父元素高已知）
6.父元素跟随子元素一起浮动

二、禁止页面缩放

< meta name=“viewport” content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

三、设置一个视频无限播放，视频立马播放，静音

< video src="" autoplay loop muted>< /video>

四、画一个三角形

.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>

五、标准盒子模型和怪异盒子模型

box-sizing: content-box 是标准盒子模型
box-sizing: border-box 是IE盒子模型

六、遍历a节点的父节点的所有子节点

var b=document.getElementById(“a”).parentNode.children;

七、创建一个属性节点、元素节点、文本节点

document.createElement();
document.createAttribute();
document.createTextNode();

八、返回一个元素的宽度，高度，水平偏移，垂直偏移(包括边框和填充，但不是边距)

offsetwidth
offsetHeight
offsetLeft
offsetTop

九、打开、关闭、移动当前窗口

window.open();
window.close();
window.moveTo();

十、内容对齐，沿着弹性容器的主轴线对齐

justify-content: flex-start | flex-end | center | space-between | space-around

十一、设置线性渐变、径向渐变由红到绿

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

十二、隐藏一个元素的三种方式

display:none; 不占位置
visibility:hidden；占位置
opacity:0; 占位置