前端面试题整理

前端面试题整理

块级元素与行内元素的区别

1. 块级独占一行，行内与其他元素共享一行
2. 块级元素可以直接设置宽高，行内不能直接设置宽高，需要结合css的display属性来设置
3. 块级元素可以嵌套块级与行内元素，而行内只能包含行内元素

清除浮动

1. 父子级：
   1. 在子级元素后添加一个空元素，为其添加clear:both;
      • 弊端：增加了无意义的元素结构
   2. 给父级元素设置一个overflow:hidden 解决了第一种方法的弊端
   3. ::after 为需要清除浮动的元素设置伪元素{content:"";display:block;clear:both;}
2. 兄弟级：
   1. 给当前元素（被浮动影响的元素）设置css属性clear,值可为left/right/both.作用分别为清除左/右/左右浮动元素带来的影响。

块级元素父子级，给子级设置浮动，为什么父级会受到影响？

1. 块级元素：宽默认100%，高由本身及子元素内容撑起
2. 子元素设置浮动，脱离文档流，父元素高度无法被撑起
3. 注意：浮动流中不区分行内、块级、行内块级元素，都可以实现水平排列普通流/文档流中区分行内、块级

水平垂直居中问题

1. margin移动 建议使用top、left
2. 父相对定位+子绝对定位，绝对定位top、left为50%，其余使用margin-left和margin-top移动
3. 父相对+子绝对，且left、top、bottom、right为0，margin:auto
4. 给父元素设置display:flex,且align-items:center;justify-content:center;

数据类型的转换

1. 其他类型转到String
   1. number --> string
   2. boolean --> string
   3. null --> string
   4. undefined --> string
      1. +号拼接
      2. toString()函数，除了null和undefined，其余均有
      3. String() 包装器
2. 其他类型转Boolean
   1. !!
   2. Boolean()包装器
   3. 转换为boolean为false的值是 “0 NAN null undefined ”为假性值
      1. “” false 空字符串
      2. " " true 空格字符串
3. 其他类型转number
   1. “+” - +‘123’ 一元运算符，本质上是使用了Number包装器
   2. Number()包装器