李志成的个人网站

李志成的个人网站

  • 博客
  • ·
  • 留言
  • ·
  • 友链
  • ·
  • 关于
  • ·
  • Rss

常用的前端面试题,面试必备

发表于2019-02-13 15:12:14分类于前端0条评论阅读次数69

1、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别?

  • 行内元素有:a b span img input select strong
  • 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
  • 空元素:<br> <hr> <img> <input> <link> <meta>
  • 行内元素不可以设置宽高,不独占一行
  • 块级元素可以设置宽高,独占一行

2、如何理解CSS的盒子模型?

  • 盒子模型有两种:IE盒子模型、标准W3C盒子模型;IE的content部分包含了border和pading。
  • 标准W3C盒模型包含:内容(content)、填充(padding)、边界(margin)、边框(border)。

3、css sprite是什么,有什么优缺点

概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点:

  • 减少HTTP请求数,极大地提高页面加载速度
  • 增加图片信息重复度,提高压缩比,减少图片大小
  • 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

缺点:

  • 图片合并麻烦
  • 维护麻烦,修改一个图片可能需要从新布局整个图片,样式

4、盒子垂直居中方法

盒子居中有以下几种方法:

1、定位法position(盒子宽高已知)

{
   position: absolute; 
   left: 50%; 
   top: 50%; 
   margin-left:-自身一半宽度; 
   margin-top: -自身一半高度;
}

2、定位postion和0

{
   width: 50%; 
   height: 50%; 
   margin: auto; 
   position: absolute; 
   top: 0; 
   left: 0; 
   bottom: 0; 
   right: 0; 
}

3、利用table-cell

父级
{
   display: table-cell; 
   vertical-align: middle;
}
子级
{
   margin: 0 auto;
}

4、定位法(盒子宽高未知) + transform

{
    position: relative / absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
}

5、flex布局

{
   display: flex;
   align-items: center;      /*实现垂直居中*/
   justify-content: center;  /*实现水平居中*/
}

6、line-height 居中

{
   line-height: 50px;
   height: 50px;
}

旁门左道系列

1、让一个顺序数组打乱为乱序数组

/**
* sort() 方法用于对数组的元素进行排序。
* 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
* 若 a 等于 b,则返回 0。
* 若 a 大于 b,则返回一个大于 0 的值。
*/
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
   return Math.random() - 0.5;
})
console.log(arr);

--发表评论--

🚀support markdown (* ̄▽ ̄*)ブ