web前端面试题-基础题1

web前端面试题

1，标签语义化？

合适的地方选择使用合理的标签

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；有利于SEO

SEO？搜索引擎优化 影响对搜索引擎的排名状况

2，垂直居中的方法有哪些？

文字的垂直居中：设置所在盒子的高度和行高相同（line-height）

盒子的垂直居中：定位、弹性布局

//定位
<div class="father">
    <div class="son">div>
div>
<style>
    .father:{
    width:300px;
    height:300px;
    position:relative;
}
    .son{
    width:150px;
    height:150px;
    position:absolute;
    top:50%;
    margin-top:-75px;    //高度知道
    transform:translateY(-50%) //高度未知
}
style>

//弹性布局
<div class="father">
    <div class="son">div>
div>

<style>
    .father:{
    width:300px;
    height:300px;
    display:flex;
    justify-content:center;
    alin-items:center;
}
    .son{
    width:150px;
    height:150px;
}
style>

3，清除浮动的方法

浮动的盒子脱离了文档流，不再撑起父元素的高度

（1），手动给父元素设置高度，但是需要知道子元素的高度；

（2），给父盒子也设置浮动，但是有些盒子是不能设置浮动的，使用场景有局限；

（3），给父盒子设置溢出隐藏，但是对于有定位到父盒子外部的子元素会被隐藏

（4），浮动盒子影响后面的元素，因此在所有浮动盒子的后边添加一个空标签，给标签添加一个属性clear：both（这个标签必须是块状标签，但是会多出一个空标签，会影响到解构，造成解构混乱）

（5），使用浮动元素的伪元素（display:block; clear:both）

4，画一条0.5px的线

主要考察css 缩放的使用，transform：scale()

5，用css画一个三角形

首先可以直接使用三角形的图片做图标，如果使用图片涉及到网络请求，可能会影响加载速度

图片图标延申方向=> 小图标 ==> 精灵图 ==>精灵图定位

使用css绘制则不存在这样的问题

<div class=box>div>
<style>
    .box{
    border:10px solid transparent; //边框设置透明
    border-bottom-color:red;  // 给上下左右的边框单独加颜色，就可以得到四个方向的三角形
}
style>

6，说一说px,em,rem,vw

px：最常用的，它是相对于显示器的分辨率而言

优缺点：比较稳定和精确，但在浏览器中放大或缩小页面时，会出现页面的混乱的情况。

em：相对单位，基准点为父节点的文字大小

优缺点：em的值不固定，会根据父级元素的字体大小而变化

rem：相对单位，相对于根节点的元素大小

vw/vh：相对于屏幕的可视区域的单位，1vw=可视区域的百分之一宽度

7，display:none 和 visibility:hidden有什么区别

display:none 隐藏之后不再站位，会引起页面的重排和重绘

visibilitty:hidden 隐藏之后可以继续占位

8，css的动画属性有哪些？应用？

=> 定时器动画 setinterval 缺点：通过js来控制css样式，渲染过程中存在丢帧的现象

=> css动画属性 ：

CSS3 动画 | 菜鸟教程

9，src和href

使用场景：

src是source的缩写，指向的内容会嵌入到文档的当前标签所在的位置，浏览器在遇到src的元素时会暂停渲染，先去把资源下载过来，再继续执行渲染工作；

href，超文本引用，建立当前元素和文风当之间的连接，并行下载文档，不会停止对当前文档的处理。