css高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效上下无效。高度、行高、外边距以及内

常见的行内元素、块级元素、行内块元素都有哪些

1，块级元素

独占一行，其宽度自动填满其父元素宽度（即使设置了宽度仍然是独占一行的）
多个块状元素标签写在一起，默认排列方式为从上至下
高度，行高，外边距（margin）以及内边距（padding）都可以控制
div h1-h6 p ul ol li nav aside header footer section article address form table

行内元素

不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化
设置行高有效，等同于给父级元素设置行高
高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效上下无效。
内边距（padding）设置上下从显示效果是增加的，但其实设置时无效的，并不会影响周围的元素
行内元素中不能放块级元素，a 链接里面不能再放链接
span a label i b strong em del(删除线) ins(下划线) sub(下标) sup（上标）

行内块元素

高度、行高、外边距以及内边距都可以控制。
默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的font-size为0，才会消除间隙
button input textarea select img

三者是可以进行转换的

转换为行内元素 display: inline;
转换为块状元素 display: block;
转换为行内块状元素 display:inline-block;

请说明px,em,rem,vw,vh,rpx等单位的特性

px也就是像素，是最迷惑我的单位，第一印象它是绝对长度，是定死的，所以想要响应式布局和自适应布局不要用它

em、rem rem相对于根元素的大小来设置的；

em是相对于父元素的大小来设置的

rpx、vw、vh rpx是微信小程序为了解决自适应屏幕尺寸设计的单位，它规定任何屏幕的宽都是750rpx

常见的替换元素和非替换元素

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

img、input、iframe

非替换对象 div、span、p

first-of-type和first-child有什么区别

first-of-type：这个类型的第一个元素

first-child：该元素是第一个元素且是这个类型，否则匹配不到

doctype标签和meta标签

doctype

告诉浏览器本页面是用什么标记语言书写，是什么文档类型
不同的文档类型，标签适用范围不一致
这个放在文档的开头代表

浏览器以w3c的标准解析和渲染页面

浏览器解析页面有两种模式，一种按照浏览器自己的方式解析，叫做怪异模式，另一种采用w3c的标准解析页面，这个叫做标准模式

如果不写这个生命，各个浏览器就会以自己的方式解析，采用怪异模式，在不同浏览器下有不同的表现，有了这个声明，就按照这个标准模式解析，所有浏览器保持一致

看了这个声明，就知道他是一个h5页面，h5新增的特性就可以使用

meta标签，元信息标签 Charset=”utf-8” 字体编码，国际的编码是utf-8(浏览器的解析标准) Name=”viewport” 叫视口 content就是对这个视口的具体操作 width=device-width 视口宽等于设备宽

script标签中defer和async都表示了什么

defer 不会阻止页面解析，并行下载对应的js文件

下载完之后不会执行

等所有其他脚本加载完之后，在DOMContentLoaded事件之前执行对应d.js、e.js

async 不会阻止DOM解析，并行下载对应的js文件

下载完之后立即执行

什么是BFC

BFC是一个独立渲染区域，它丝毫不会影响到外部元素
BFC特性同一个BFC下margin会重叠

计算BFC高度时会算上浮动元素

BFC不会影响到外部元素

BFC内部元素是垂直排列的

BFC区域不会与float元素重叠

如何创建BFC position设为absolute或者fixed

float不为none

overflow设置为hidden

display设置为inline-block或者inline-table或flex

如何清除浮动

额外标签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>

利用BFC

.fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

使用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>

什么是DOM事件流？什么是事件委托

DOM事件流分为3个阶段捕获，目标，冒泡

addEventListener（）的第三个参数（useCapture）设置为true，则会在捕获阶段运行，默认是false冒泡

事件委托利用的是冒泡阶段，将事件绑定到父元素上，以实现事件委托