html+css

1.行内元素，块元素，内行块元素的区别

行内元素：span、em、a、i、p
- 不能设置宽度
- 设置上下margin无效
- 与其他行内元素并排，默认从左到右依次排列，默认不折行
块元素：div、ul、li、h1-h5、header、footer
- 可以设置宽高
- 默认独占一行
- 默认从上到下排列
内联块：设置display: inline-block;
- 能够识别宽高
- 不自动换行
- 默认排列方式为从左到右

2.高度塌陷问题及解决方式

高度塌陷：父元素不定高，子元素设置浮动，则父元素高度为0

原因：父原色的高度由子元素的高度撑开，一但子元素设置浮动，会脱离文档流，父元素的高度为0

解决：

（1）设置父元素的高度（不推荐）

（2）设置BFC，例如给父元素添加overflow:hidden

3.BFC、IFC的理解及使用场景

BFC：块级格式化上下文

BFC的形成：

跟元素html标签就是一个bfc;
float的值不为none
overflow的值不为visible
position的值为absolute或fixed
display的值为inline-block/flex/inline-flex/table-cell/table-caption

BFC的特性：

box垂直方向的上距离由margin决定，属于同一个BFC的相邻两个box的margin会发生重叠
计算BFC的高度时浮动元素参与计算
BFC的区域不会与float box发生重叠
BFC内部box会在垂直方向顺序放置
BFC是一个页面上的独立容器，容器中的元素不会影响到外面的元素

使用场景

解决box垂直距离margin发生重叠：可以为下面盒子添加父元素，为父元素添加overflow:hidden（bfc内部会有margin重叠，为下盒子添加bfc,形成新的bfc）
父元素高度塌陷：设置父元素overflow:hidden（BFC中浮动元素参数高度计算）
自适应两栏（左侧盒子浮动，右侧自适应盒子overflow:hidden）、自适应三栏布局

IFC：行内格式化上下文

IFC的形成：块级元素中仅包含内联级别元素

IFC的特性：

子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，垂直方向样式空间不会被计算（即设置上下margin不起作用）
在垂直方向上，子元素会以不同形式来对齐（vertical-align）

应用场景：

文字，图片垂直水平居中：水平居中（图片外部父元素text-align：center）;垂直居中（图片外部父元素line-height和height相等）

参考文章：https://segmentfault.com/a/1190000017273573

4. flex布局

容器属性

flex-direction：（设置主轴方向）row | row-reverse | column | column-reverse
flex-wrap:(如何换行) nowrap | wrap | wrap-reverse
flex-flow:(以上两个简写，默认是row nowrap）
justify-content:(项目在主轴上的对齐方式) flex-start | flex-end | center | space-between | space-around;
align-items:（项目在交叉轴上的对齐方式）flex-start | flex-end | center | baseline | stretch;
align-content:（多根轴线的对齐方）flex-start | flex-end | center | space-between | space-around | stretch;

项目属性

flex-grow：(放大比例) 默认是0，有空间也不放大
flex-shrink:(缩小比例)默认是1，空间不足会缩小
flex-basis:(项目将占据固定空间)默认是auto,即项目的本来大小;可以设置具体值
flex:(以上3项的缩写) auto (1 1 auto) | none (0 0 auto)。

常用场景：

三栏布局：（⚠️使用flex:1，即flex-grow:1是实现自适应的关键）

 <div class="wrap" style="display: flex">
    <div class="left" style="flex:0 0 300px;background:red"></div>
    <div class="content" style="flex:1;background:yellow">自适应内容区域</div>
    <div class="right" style="flex:0 0 300px;background:blue"></div>
</div>

固定的底栏(内容不满一页，固定底栏)

 <div class="wrap" style="display: flex;flex-direction: column;height: 100vh;">
    <div class="header" style="height:100px;background:red"></div>
    <div class="content" style="flex:1;background:yellow">12345678</div>
    <div class="footer" style="height:100px;background:blue"></div>
</div>

参考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

5. 水平垂直局中实现

图片、文字实现垂直居中(注意text-align设置的是父元素)

.parent{
    text-align:center;
    line-height:100px;
    height:100px;
}

块级元素实现垂直居中

方法一：
.parent{
    position:relative;
}
.children{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;(自身宽度的一半)
    margin-top:-50px;(自身宽度的一半)
}
方法二：
.parent{
    position:relative;
}
.children{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
方法三：
.parent{
    position:relative;
}
.children{
    pisition:absolut;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
方法四️：
.parent{
    position:flex;
    justify-content:center;
    align-items:center
}

6.em和rem区别

同：em和rem一样都是一个相对的长度单位

异：rem是相对与根元素html而言，em是相对于他的父元素的font-size大小

7.移动端的rem适配

vw+rem

先设置meta标签，设置视口大小不可缩放，

再设置html的font-size为13.333vw,原因如下：

750px = 100vw

1px = 0.133333vw

100px =13.3333vw

如果设置html的font-size为13.3333vw,即1rem = 13.3333vw = 100px，如果需要一个宽度200px的元素，那他的宽度为2rem
通过js动态设置当前的html的font-size

参考文章 https://blog.csdn.net/weixin_39602178/article/details/90272328

参考文章 https://blog.csdn.net/lihefei_coder/article/details/82055570

8. 1像素边框问题

viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示

参考文章 https://www.jianshu.com/p/31f8907637a6

9.css盒模型

普通盒模型：box-sizing:content-box (width=内容宽度，height=内容高度)
怪异盒模型（IE盒模型）：box-sizing:border-box

width=内容width+左右padding+左右border+左右margin

height=内容height+上下padding+上下border+上下margin

10.Dom事件

dom事件模型：捕获--》目标事件--》冒泡
dom捕获的具体流程： window--document--html--body--父元素--目标元素

11.DOM的操作（增删改查）

createElement（创建元素）
insertBefore(插入前面)
removeChild(删除子元素)
replaceChild（替换）