css画一条0.5px的线采用meta viewport的方式采用border-image的方式采用transfo

画一条0.5px的线

采用meta viewport的方式
采用border-image的方式
采用transform: scale()的方式

box {
  position: relative;
}
box:after {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform: scale(0.5);
  -webkit-trnsform: scale(0.5);
}

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可以一帧一帧；

BFC（块级格式化上下文，用于清除浮动，并且有一定的布局规则）

块级格式化上下文，决定了元素如何对其内容进行定位，以及与其元素的关系和相互作用。具有BFC的元素可以看做是隔离了的独立容器，容器里的元素不会布局上影响容器外的元素；

BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面
计算BFC的高度时，浮动元素也会参与计算

生成BFC：

根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、flex、inline-flex的元素
overflow不为visible的元素常见作用：
阻止外边距折叠
包含浮动元素后解决浮动多里文档流问题
阻止浮动元素覆盖

css和js实现div右移1000px动画

css：

#box {
  animation: removeDiv 3s linear 1s;
  -webkit-animation: removeDiv 3s linear 1s;
}
@keyframes removeDiv {
  1% { left: 0px; }
  20% { left: 200px; }
  ...
  100% { left: 1000px; }
}
@-webkit-keyframes removeDiv {
  1% { left: 0px; }
  20% { left: 200px; }
  ...
  100% { left: 1000px; }
}

const removeDiv = (data, speed, time) => {
  if (timer) clearInterval(timer);
  let timer = setInterval(() => {
    if (oBox.offsetLeft !== data) {
      oBox.style.left = oBox.offsetLeft + speed + "px";
    } else {
      clearInterval(timer);
    }
  }, time)
}

visibility、display、opacity的区别

visibility: hidden; 控制元素样式的显示隐藏，不会消除dom元素，元素依旧存在；
display: none; 控制元素的的display属性，清除dom元素，元素不存在了；
opacity: 0;控制元素的透明度样式，0的时候是透明度100%，元素依旧存在;

单行截断css

.box {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

flex布局：

弹性布局

flex: 1

flex是flex-grow、flex-shrink、flex-basis三个属性的缩写，flex: 1表示flex-grow: 1;元素自动放大填充父元素；

transition、transform、translate的区别

transform: css3的一个属性，控制元素的变换；

translate：transform的一个属性值，表示进行2D变换；transform: translate(X, Y)；X、Y是控制元素变换值的大小；
transition：在一定时间内，一组css属性变换到另一组css属性的动画展示过程。可以用来实现动态效果，css3的属性；语法：
transition: 变换的属性|变换的时间|动画速度变换|延期多少时间执行

css垂直居中的方案

1、绝对定位结合transform: translate(-50%, -50%);
2、绝对定位结合margin: -50% 0 0 -50%;
3、flex布局

  {
    display: flex;
    justify-content: center;
    align-item: center;
  }

伪元素和伪类的区别

根本上说：伪元素创建了新元素，伪类没有创建新元素；
表现上说：伪元素是(:before/after等)，伪类是(:hover/focus);
使用上说：一个选择器只能使用一个伪元素，可以使用多个伪类

盒模型

所有的html元素都可以看做一个盒子。盒模型由四部分构成，由内到外分别是：content、padding、border、margin;
盒模型有两种：标准盒模型、IE盒模型；
两种盒模型的区别在于宽高是否包含padding和border，标准盒模型只用content，IE盒模型需要加上padding和border;

响应式布局方案

响应式布局指的是在同一页面不同尺寸下有不同的布局；方案：

1、媒体查询；
2、百分比布局；
3、rem布局；
4、视口单位(vw/vh);
5、依赖bootstrap框架的栅格系统。

响应式布局和自适应布局的区别

响应式开发一套页面，通过检测视口分辨率，针对不同客户端在客户端代码做处理，来展现不同的布局和内容；
自适应需要开发多套页面，通过检测视口分辨率来判断当前设备是PC端、平板、手机，从而请求服务层，返回不同观点页面；

如何提高动画的渲染性能

transform: translateZ(0);或者will-change: transform;

css性能优化方案

1、图片异步加载
2、尽量使用雪碧图
3、正确使用选择器
4、js和css文件压缩
5、背景图采用分割后逐步加载显示
6、图片优先使用png格式

css选择器有哪些？优先级如何？

Id选择器、class选择器、元素选择器、后代选择器、子选择器、伪类选择器、通配符、群组选择器、属性选择器等；
优先级：ID > class > 元素 > 通配符

清除浮动

1、使用伪元素

  E::after {
    content: " ";
    clear: both;
    display: block;
  }

2、浮动元素后添加一个空元素，添加clear:both;
3、给父元素添加高度；
4、给父元素添加overflow: hidden;

为什么要初始化css样式

因为每种浏览器的兼容性不同，对河html标签的默认展示不同，初始css是排除差异的影响;

css