CSS问题

● link标签和import标签的区别
参考回答：
link属于html标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

● transition和animation的区别
参考回答：
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

● Flex布局
参考回答：
文章链接：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool（语法篇）
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html（实例篇）
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

简单的分为容器属性和元素属性
容器的属性：

flex-direction：决定主轴的方向（即子item的排列方法）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap：决定换行规则
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}</flex-wrap></flex-direction>

justify-content：对其方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

项目的属性（元素的属性）：

order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0

flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小

flex-basis属性：定义了在分配多余的空间，项目占据的空间。

flex：是flex-grow和flex-shrink、flex-basis的简写，默认值为0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items

justify-content 主轴上弹性元素自身的对齐方式 flex-start flex-end center space-between space-around
flex-direction 方向 column row row-reverse column-reverse
align-items 侧轴上弹性元素自身的对齐方式 flex-start flex-end center baseline stretch
flex-wrap：nowrap，wrap，wrap-reverse
align-content：在存在换行时才可以使用的设置行的对齐不是对弹性子元素的对齐 flex-start | flex-end | center | space-between | space-around | stretch
align-self：对某单个弹性子元素自身进行设置，不在父容器里设置 auto | flex-start | flex-end | center | baseline | stretch
order：用整数值来定义排列顺序，数值小的排在前面。可以为负值。为子弹性元素设置，越小的排在越前面

完美居中：将父盒子display设置为flex，子弹性盒子只需要设置margin：auto；即可在主侧轴方向都完美居中。

两侧定宽中间自适应的几种方法：https://blog.csdn.net/controllerha/article/details/82345845
浮动，flex，定位，table，grid 5种常用前两种，浮动有坑！

● 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
参考回答：
DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘，引起重排重绘的原因有：
添加或者删除可见的DOM元素，

元素尺寸位置的改变

浏览器页面初始化，

浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，

减少重绘重排的方法有：

不在布局信息改变时做DOM查询，

使用csstext,className一次性改变属性

使用fragment

对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

● 清除浮动的方法
参考回答：
给要清除浮动的元素添加样式clear，
父元素结束标签钱插入清除浮动的块级元素，给该元素添加样式clear

添加伪元素，在父级元素的最后，添加一个伪元素，通过清除伪元素的浮动，注意该伪元素的display为block，

父元素添加样式overflow清除浮动，overflow设置除visible以外的任何位置

● img是行内元素还可以设置宽高
img除了是行内元素还是置换元素，置换元素是会根据标签属性来显示的元素，例如img的src，input的value等等。