html+css

1-行内元素

img、a、pictrue、span；其他的表单元素input、textarea、select、label；
img可以设置宽高，是因为它是可替换元素，不由css渲染形状大小，css只决定位置；
可替换元素的共性就是通过src、options属性加载外部资源或者js控制比如canvas；所以可替换元素大致包括：iframe、video、img；某些元素在特定情况可以当做可替换元素对待，label有option属性的时候，audio标签，input的type为image的时候，canvas绘制的时候。
a虽然是行内元素但为什么可以包裹div等块级元素？

2-+和~的区别，

+是匹配后面相邻的一个元素
~是匹配后面所有的元素

3-text-align对齐方式

可以设置图片在容器内的对齐方式；
可选描述是start、end、center、justify、justify-all【两端对齐】等。

4-关于line-height

如果不知道所在盒子的具体高度，也就是动态变化的时候，怎么设置垂直居中

垂直居中，line-height：所在盒子高度
line-height: 50vh;
默认
line-height: normal;
为数字或百分比，数字*字体大小,不会随着屏幕大小和盒子大小变化
line-height: 5;
line-height: 500%;
为em，相对于浏览器字体大小
line-height: 1em;

5-关于margin传递和折叠

margin传递是什么？
margin传递一般发生在父子元素的顶部线或者底部线重合的时候，设置在子元素上的margin-top或指责margin-bottom没生效，反而在父元素上面生效了。
怎么解决？
一种方式是想办法让父子元素之间的顶部线和底部线不重叠即可，给父元素设置padding或者border；
另一个方式是触发BFC，BFC是块级格式化上文的缩写，通俗理解就是给父元素设置一个结界，防止上下边距传递出去。
触发BFC的方式包括设置float、position、display、设置overflow属性等；

设置float为left或者right；
设置position为absolute或者fixed；
设置display为inline-block、inline-flex、flex、table-cell、table-caption
设置overflow为除了visible之外的值，比如hidden、auto、scroll

margin折叠是什么？
margin折叠一般发生在上下重叠的兄弟元素之间，上面设置的margin-bottom会和下面设置的margin-top折叠。还会发生在父子元素之间，父子元素同时都设置margin-top或者margin-bottom值。
最简单的方式是只给父元素设置以及兄弟元素之间只给一个设置，还可以通过触发BFC解决。
6-隐藏元素的方法和适用场景
display：none；通过css设置，将元素移除文档流；
opacity：0；设置元素透明度为0，没有移除文档，并且可以点击元素进行操作；
visibility：0，透明度设置为0，没有将元素移除文档流，和上面的区别是不可以点击元素进行事件操作；
content-visibility：将元素中的内容移除文档流，但是相比于display：none来讲，再次渲染的效率高。

7-设置元素对齐

1-设置水平对齐

文本、行内、行内块使用text-align：center设置；
块级元素设置水平对齐：

1-margin:0 auto;//上下，左右
2-设置元素定位position:relative;设置left值和
position: relative;
left: 50%;
transform: translate(-50%, 0);
3-父子元素不脱离文档流的情况、子元素设置宽高
left: 0;
right: 0;
margin: 0 auto;
4-脱离文档流，使用margin和left结合设置需要用长度，不能使用百分比
position: absolute;
left: 40vw;
margin-left: -30vw;
5-flex布局
display:flex;
设置元素水平对齐
justify-content:center;
设置元素垂直对齐
align-items:center；

文本行内、行内块元素垂直对齐：line-height高度等于元素高度；
块级元素垂直对齐：

2-设置垂直对齐

几乎同上
父元素设置position:relative不脱离文档流的前提下
1-
position: relative;
top: 50%;
transform: translate(0, -50%);
2-使用top和margin一起设置的时候使用数值，不使用百分比
position: absolute;
top: 30vh;
margin-top: -5vh;
3-在子元素设置了宽高的前提下
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
4-在flex布局下
设置垂直居中的语句是
align-items:center;

3-vertical-align

设置行内元素在一个块盒内的位置，默认是基线对齐；
vertical-align:baseline\top\center\bottom;

对于有图片、文字都在行内盒的情况，

8-CSS的transition属性和animation的区别

transition属性是修改css样式的时候控制样式变化速度的属性，在修改样式属性的时候被触发。只有开始和结束两个状态、不能自动重复。设置在原本的元素中

 transition:width 2s, height 2s, background-color 2s, transform 2s;

{
	animation: 4s linear 0s infinite alternate move_eye;
}
 @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

9-多行文本溢出省略效果