前端面试题整理

1. display: none 与 visibility: hidden的区别。

相同点:都可以让元素不可见。

不同点: 

  • display: none 会让元素完全从 渲染树中消失,渲染的时候不占据任何空间; 
  • visibility: hidden 不会让元素从渲染树中消失,渲染元素继续占据空间,只是内容不可见。
  • display: none是非继承属性。子孙节点消失是因为元素从渲染树消失造成,通过修改子孙节点属性无法显示;
  • visibility: hidden是继承属性。子孙节点消失是因为继承了hidden,通过设置visibility: visible可以让子孙节点显示。
  • 修改常规流中元素的display通常会造成文档重排;
  • 修改visibility属性值会造成本元素的重绘。
  • 读屏器不会读取display: none元素内容; 但是会读取visibility: hidden元素内容。

2. display:block 和display: inline的区别。

display: block元素的特点: 

  • 1.处于常规流时,如果width没有设置,会自动填充满父容器
  • 2.可以应用margin/padding
  • 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
  • 4.处于常规流中时,在前后元素位置之间(独占一个水平空间)
  • 5.忽略vertical-align

display: inline元素的特点:

  • 1.水平方向上根据direction依次布局
  • 2.不会在元素前后换行
  • 3.受 white‐space 控制
  • 4. margin/padding 在竖直方向上无 效,水平方向上有效
  • 5. width/height 属性对非替换行内元素无效,宽度由元素内容决定
  • 6.非替换行内元素的行框高由 lineheight 确定,替换行内元素的行框高由 height  , margin  , padding  , border 决定
  • 6.浮动或绝对定位时会转换为 block 
  •  7. vertical-align 属性生效

3. 如何创建块级格式化上下文(block formatting context),BFC有什么用?

创建规则:

  • 1. 根元素
  • 2. 浮动元素( float 不是 none )
  • 3. 绝对定位元素( position 取值为 absolute 或 fixed )
  • 4.  display 取值为 inline‐block  , table‐cell  ,  table‐caption  , flex  ,  inline‐flex 之一的元素
  • 5.  overflow 不是 visible 的元素  

作用:

  • 1. 可以包含浮动元素
  • 2. 不被浮动元素覆盖
  • 3. 阻止父子元素的margin折叠

4.外边距折叠(collapsing margins)。

毗邻的两个或多个 margin 会合并成一个margin,叫做外边距折叠。

规则如下: 

1. 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠

2. 浮动元素/inline‐block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

3. 创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠

4. 元素自身的margin‐bottom和margin‐top相邻时也会折叠

5. display,float,position的关系。

  • 1. 如果 display 为none,那么position和float都不起作用,这种情况下元素不产生框
  • 2. 否则,如果position值为absolute或者fixed,框就是绝对定位的,float的计算值为none,display根据下面的表格进行调 整。
  • 3. 否则,如果float不是none,框是浮动的,display根据下表进行调整
  • 4. 否则,如果元素是根元素,display根据下表进行调整

    5. 其他情况下display的值为指定值

总结起来:绝对定位、浮动、根元素都需要调整 display 

6. PNG,GIF,JPG的区别及如何选?

GIF:

  • 1. 8位像素,256色
  • 2. 无损压缩
  • 3. 支持简单动画
  • 4. 支持boolean透明
  • 5. 适合简单动画

JPEG:

  • 1. 颜色限于256
  • 2. 有损压缩
  • 3. 可控制压缩质量
  • 4. 不支持透明
  • 5. 适合照片

PNG:

  • 1. 有PNG8和truecolor PNG
  • 2. PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画
  • 3. 适合图标、背景、按钮

7. CSS有哪些继承属性?

关于文字排版的属性   如:

  • font
  • word‐break
  • letter‐spacing
  • text‐align
  • text‐rendering
  • word‐spacing
  • white‐space
  • text‐indent
  • text‐transform
  • text‐shadow

line‐height

color

visibility

cursor

8. 容器包含若干浮动元素时如何清理(包含)浮动?

1. 容器元素闭合标签前添加额外元素并设置 clear: both

2. 父元素触发块级格式化上下文﴾见块级可视化上下文部分﴿

3. 设置容器元素伪元素进行清理推荐的清理浮动方法

在标准浏览器下使用 : 

  • 1 content内容为空格用于修复opera下文档中出现contenteditable属性时,在清理浮动元素上下的空白
  • 2 使用display使用table而不是block :可以防止容器和子元素margin‐top折叠,这样能使清理效果与BFC,IE6/7 zoom: 1;一致
.clearfix:before,  .clearfix:after {      
   content: " ";   /* 1 */      
   display: table; /* 2 */  
} 
.clearfix:after {     
   clear: both;  
} 


/**  * IE 6/7下使用  * 通过触发hasLayout实现包含浮动  **/ 
.clearfix {     
   *zoom: 1;  
} 

9.  什么是FOUC?如何避免?

Flash Of Unstyled Content:用户定义的样式表加载之前浏览器会使用默认的样式显示文档,用户样式加载渲染之后再重新显示文档,造成页面闪烁。

解决方法:把样式表放到文档的 head 。

10 .如何确定一个元素的包含块(containing block)?

1. 根元素的包含块叫做初始包含块,在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin;对于paged media,它的尺寸等于page area。初始包含块的direction属性与根元素相同。

2.  position 为 relative 或者 static 的元素,它的包含块由近的块级( display 为 block  , list‐item  ,  table )祖先元素的 内容框组成

3. 如果元素 position 为 fixed 。对于连续媒体,它的包含块为viewport;对于paged media,包含块为page area

4. 如果元素 position 为 absolute ,它的包含块由祖先元素中近一个 position 为 relative  , absolute 或者 fixed 的元素产 生,规则如下:

  • 如果祖先元素为行内元素,the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
  • 其他情况下包含块由祖先节点的padding edge组成

如果找不到定位的祖先元素,包含块为初始包含块

11.如何水平居中一个元素?

如果需要居中的元素为 常规流中inline元素:  为父元素设置 text‐align: center; 即可实现;

如果需要居中的元素为 常规流中block元素:

  •    1)为元素设置宽度,
  •    2)设置左右margin为auto。
  • 3)IE6下需在父元素上设置 text‐align: center;  ,再给子元素恢复需要的值

    <body>      
      <div class="content">      
          aaaaaa aaaaaa a a a a a a a a      
      </div>  
    </body> 
    
    <style>      
    body {         
      background: #DDD;          
      text-align: center;     /* 3 */     
     }      
    .content {          
      width: 500px;      /* 1 */          
      text‐align: left;  /* 3 */          
      margin: 0 auto;    /* 2 */ 
      background: purple;      
    }  
    </style> 

如果需要居中的元素为 浮动元素:

  • 1)为元素设置宽度,
  • 2) position: relative; ,
  • 3)浮动方向偏移量(left或者right) 设置为50%,
  • 4)浮动方向上的margin设置为元素宽度一半乘以‐1
    <body>      
       <div class="content">      
           aaaaaa aaaaaa a a a a a a a a      
       </div>  
    </body> 
    
    <style>      
    body { 
      background: #DDD;     
    }      
    .content {          
      width: 500px;         /* 1 */          
      float: left; 
      position: relative;   /* 2 */          
      left: 50%;            /* 3 */          
      margin‐left: ‐250px;  /* 4 */ 
      background‐color: purple;      
    }  
    </style> 

如果需要居中的元素为 绝对定位元素:

  • 1)为元素设置宽度,
  • 2)偏移量设置为50%,
  • 3)偏移方向外边距设置为元素宽度 一半乘以‐1
    <body>      
       <div class="content">   
          aaaaaa aaaaaa a a a a a a a a   
       </div>  
    </body> 
    <style>      
    body {      
        background: #DDD;       
        position: relative;  
    }      
    .content {        
        width: 800px; 
        position: absolute;         
        left: 50%;        
        margin‐left: ‐400px; 
        background‐color: purple;      
    }   
    </style> 

如果需要居中的元素为 绝对定位元素:

  • 1)为元素设置宽度,
  • 2)设置左右偏移量都为0,
  • 3)设置左右外边距都为auto
    <body>   
       <div class="content">
          aaaaaa aaaaaa a a a a a a a a   
       </div>  
    </body> 
    <style>      
    body {       
       background: #DDD;       
       position: relative;      
    }      
    .content {       
       width: 800px; 
       position: absolute;        
       margin: 0 auto;        
       left: 0;        
       right: 0; 
       background‐color: purple;      
    }  
    </style>

12. 如何竖直居中一个元素?

有8种CSS实现垂直居中。

需要居中元素为 单行文本 ,为包含文本的元素设置大于 font‐size 的 line‐height :

<p class="text">center text</p> 

<style> 
.text {   
   line‐height: 200px;  
}  
</style> 

13. sessionStorage,localStorage,cookie区别。

  • 1. 都会在浏览器端保存,有大小限制,同源限制
  • 2. cookie会在请求时发送到服务器,作为会话标识,服务器可修改cookie;web storage不会发送到服务器
  • 3. cookie有path概念,子路径可以访问父路径cookie,父路径不能访问子路径cookie
  • 4. 有效期:cookie在设置的有效期内有效,默认为浏览器关闭;sessionStorage在窗口关闭前有效,localStorage长期有效, 直到用户删除
  • 5. 共享:sessionStorage不能共享,localStorage在同源文档之间共享,cookie在同源且符合path规则的文档之间共享
  • 6. localStorage的修改会促发其他文档窗口的update事件
  • 7. cookie有secure属性要求HTTPS传输
  • 8. 浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k。web storage大小支持能达到5M

14.什么闭包,闭包有什么用?

闭包是在某个作用域内定义的函数,它可以访问这个作用域内的所有变量。

闭包作用域链通常包括三个部分:

  • 1. 函数本身作用域。
  • 2. 闭包定义时的作用域。
  • 3. 全局作用域。

闭包常见用途:

  • 1. 创建特权方法用于访问控制
  • 2. 事件处理程序及回调 

14.position的值, relative和absolute分别是相对于谁进行定位的?

  • absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。

  • fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。

  • relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。

  • static 默认值。没有定位,元素出现在正常的流中

  • sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出

15.渐进增强和优雅降级。

渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章