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相等）
参考文章：segmentfault.com/a/119000001…
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>
参考文章：www.ruanyifeng.com/blog/2015/0…
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
参考文章 blog.csdn.net/weixin_3960…
参考文章 blog.csdn.net/lihefei_cod…
8. 1像素边框问题
viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示
参考文章 www.jianshu.com/p/31f890763…
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（替换）
