1.说一下css盒子模型
Css盒子本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和内容。Css盒子模型包括IE盒子模型标准的W3C盒子模型。这两种盒子模型都包含margin，border，padding，和content。不同的是，标准W3C盒子模型中content不包含任何内容，而IE盒子模型中content包含border和padding，在标准盒子模型中width指content部分的宽度，而IE盒子模型中width=content+padding+border这三个部分的宽度，故使得计算整个何止的宽度时存在差异：
标准的盒子模型的盒子宽度是：左右border+左右padding+width
IE盒子模型中盒子宽度：width
在CSS3中引入的border-sizing属性，border-sizing：center-box表示标准盒子模型，border-box表示IE盒子模型，padding-box表示这个属性值的宽度包含了左右的padding+width
2.画一条0.5px的线
（1）采用mwta viewport的方式
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">
Initial-scale设置页面初始缩放值为0.5，这样正常1px的线就缩放成0.5px
（2）采用transform：scale（）的方式
transform:scaleY(0.5);
（3）采用border-image的方式，先自己制作一个0.5px的线条作为背景图片
p{ border-width: 0 0 1px 0; border-image: imageUrl 2 0 round; }
3.link标签和import标签的区别
Link属于HTML标签，而@import时css提供的，link标签在页面加载时就会加载，而@import的css会在页面加载结束之后再加载。link是HTML标签没有兼容性，而@import只有IE5以上才支持，link引入的样式权重高于@import引入的。
4. transiotion和animation的区别
Transition和animation大部分属性是相同的都是随时间改变元素的属性值，主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件随时间改变属性值，并且transition为两帧从from…to，而animation可以一帧一帧的。
5.Flex布局
Flex弹性布局简单的分为容器属性和元素属性
容器属性：
flex-direction:决定主轴的方向row|row-reverse|column|column-reverse;
flex-wrap:决定换行规则wrap|nowrap|wrap-reverse
flex-flow:<flex-direction>||<flex-wrap>以上两个的简写
justify-cntent:定义了项目在水平上的对齐方式
align-items：对齐方式，竖直轴线方向
align-content：多跟轴线的对齐方式，如果只有一根轴线，该属性不起作用
项目的属性（元素的属性）：
order:定义项目的排列顺序，顺序越小，排列越靠前，默认为0
flex-grow:定义项目的放大比例，即使存在空间，也不会放大
flex-shrink：定义项目的缩小比例，当空间不足的情况下会等比例的缩小
flex-basis：定义了在分配多余的空间，项目占据的空间
flex：flex-grow，flex-shrink，flex-basis的简写，默认值是0 1 auto。
align-self：允许单个项目于其他项目不同的对齐方式，可以覆盖algn-items，默认值是auto继承父元素align-items。
来源：https://www.cnblogs.com/mlebk/p/12420767.html