乐趣区

关于面试:前端常见面试题总结HTML和CSS部分一

之前的共事到职了,目前在面试新的前端,从网上整顿一套面试题进去

1. 怎么实现垂直居中,程度居中,说出 2 - 3 种形式?

办法一: 相对定位 + left:50%,top: 50% + margin-left:(本身宽度的一半),margin-top:(本身高度的一半)

毛病:要本人计算容器的宽高,万一容器的宽高扭转还要批改 css 款式

.parent {    /* 父标签 */
    width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box1 {
    width: 200px; height: 200px; background: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;    /* 本身高度的一半 */
    margin-left: -100px;    /* 本身宽度的一半 */
}

办法二 :相对定位 + left:50%,top: 50%+ translate(-50%,-50%)

毛病:兼容性问题,必须要带上兼容性前缀。

.parent {    /* 父标签 */
    width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box2 {
    width: 200px; height: 200px; background: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


办法三 :相对定位 + left: 0,right: 0, top: 0, bottom: 0 + margin:auto

.parent {    /* 父标签 */
    width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box3 {
    width: 200px; height: 200px; background: skyblue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; 
    right: 0;
    margin: auto;
}


办法四 :弹性盒子。给父标签设置属性,display: flex; justify-content: center; align-items: center;

    .parent {    /* 父标签 */ 
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex; 
      justify-content: center;  /* 程度居中 */ 
      align-items: center;      /* 垂直居中 */  
    }
    .box4 {
          width: 100px;
          height: 100px;
          border: 1px solid red;
          background: red;
     }

    
    

办法五 :固定定位 position:fixed; 并设置一个较大的 z -index 层叠属性值。

.box5 {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;    /* 本身高度的一半 */
    margin-left: -100px;    /* 本身宽度的一半 */
    z-index: 999;
}

办法六 :要把元素绝对于视口进行居中,那么相当于父元素的高度就是视口的高度,视口的高度能够用 vh 来获取:

    #view-child{ 
        margin: 50vh auto 0; 
        transform: translateY(-50%);
    }



2.H5 相熟吗,H5 都有哪些新增属性和新增元素?

H5 是 html 的最新版本,是 14 年由 w3c 实现规范制订。加强了,浏览器的原生性能,缩小浏览器插件(eg:flash)的利用,进步用户体验满意度,让开发更加不便。

3. 说一下都有哪些本地存储形式,区别是什么?

  • Cookie

能够自定义生存周期,生成是指定一个 maxAge 值,在这个生存周期内 Cookie 无效。存储数据大小在 4K 左右,前后端都能够拜访。

  • localStorage

只有不是手动革除,它就会始终将数据存储在客户端,即便敞开了浏览器也始终存在,属于本地长久存储,个别用于存储一些用户偏好。存储数据大小个别在 5M 左右(浏览器不同,大小不同)。

  • sessionStorage

页面会话期间,一旦敞开浏览器,数据就会隐没。存储数据大小个别在 5M 左右(浏览器不同,大小不同)。

共同点:都是保留在浏览器端。

4. 说一些你遇到过的解决兼容的问题

  • 双倍边距问题

浮动后的元素在 IE 浏览器下呈现横向双倍边距,解决办法就是设置 margin-left 负值。

例如:几个 div,float: left; margin-left: 10px;,把第一个 div 再设置 margin-left: -10px;

  • 图片 1px 边框问题

给图片设置 border: 0;

  • 透明度问题

设置 opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

退出移动版