大前端 - 前端高级进阶

# CSS篇

# 1. position的值， relative和absolute分别是相对于谁进行定位的？（初级）

  • absolute: 生成绝对定位的元素， 相对于最近一级的 定位不是static的父元素来进行定位；
  • fixed:（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或frame进行定位；
  • relative: 生成相对定位的元素，相对于其在普通流中的位置进行定位；
  • static: 默认值。没有定位，元素出现在正常的流中；
  • sticky: 生成粘性定位的元素，容器的位置根据正常文档流计算得出。

# 2. display:none和visibility:hidden的区别？（初级）

  • display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在；
  • visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

# 3. CSS中link和@import的区别是？（初级）

  • link属于HTML标签，而@import是CSS提供的；
  • 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载；
  • import只在IE5以上才能识别，而link是HTML标签，无兼容问题；
  • link方式的样式的权重 高于@import的权重。

# 4. position:absolute和float属性的异同（初级）

  • 共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
  • 不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

# 5. 介绍一下box-sizing属性？（初级）

  • box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box；
  • content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高；
  • border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content。

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

# 6. 行内元素有哪些？块级元素有哪些？空元素有哪些？（初级）

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span img input select strong（强调的语气） （2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）常见的空元素：<br><hr> <img> <input> <link> <meta> 鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

# 7. 对BFC规范的理解？（中级）

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

# 8. 如何清除浮动?（中级）

  1. 额外标签clear:both
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
 
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
</body>
  1. 利用BFC，overflow-hidden
.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}
  1. 使用after(推荐)
<style>
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
</style>
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
</body>

# 9. 常见的行内元素和块级元素都有哪些？（初级）

  • 行内元素 inline

    • 不能设置宽高，不能自动换行。

    • span、input、img、textarea、label、select。

  • 块级元素 block

    • 可以设置宽高，会自动换行。

    • p、h1/h2/h3/h4/h5、div、ul、li、table。

  • inline-block

    • 可以设置宽高，会自动换行。

# 10. 常见的替换元素和非替换元素？（初级）

  • 替换元素

    • 是指若标签的属性可以改变标签的显示方式就是替换元素，比如input的type属性不同会有不同的展现，img的 src 等。
    • img、input、iframe。

  • 非替换元素

    • div、span、p。

# 11. 什么是 DOM 事件流？什么是事件委托?（中级）

  • DOM 事件流

    • 分为三个阶段

      • 捕获阶段
      • 目标阶段
      • 冒泡阶段

    • 在addeventListener()的第三个参数useCapture设为true，就会在捕获阶段运行，默认是false冒泡。

  • 事件委托

    • 利用冒泡原理(子向父一层层穿透)，把事件绑定到父元素中，以实现事件委托。

# 12. 什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？（高级）

FOUC - FlashOf Unstyled Content 文档样式闪烁

<styletype="text/css"media="all">@import"../fouc.css";</style>

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

← JS篇 →