1.css和js两种方式实现div右移1000px动画

css

 <div class="conatiner"></div>
.conatiner {
    width: 100px;
    height: 100px;
    background-color: pink;
    transform: translateX(0);
    animation: move 1s;
}
@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(1000px);
    }
}

2. visibility、display、opacity的区别

三者都是可以隐藏元素
设置了visibility: hidden 的元素，dom结构不会消失，只是不可见，不能触发点击事件，会引起重绘，性能消耗相对较少
设置了display: none的元素，dom结构会页面上被移除，会造成回流重绘，性能消耗大
opacity 设置透明度的，如果设置了为0 就不可见，但是可以触发点击事件，引起重绘，性能消耗相对较少

3. 单行截断css

.text {
  width: 100px;
  overflow: hidden;
  white-space: nowrap; //规定段落中的文本不进行换行
  text-overflow: ellipsis;
}

4. transition transform translate

transform是指变换，变形，是css3的一个属性
tranlate是transform的属性值，指元素进行2D变换，transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离，transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px
transform还有很多其他的属性值如 scale, translate3D, rotate等
transition: 在一定时间内，一组css属性变化到另一组属性的动画展示过程。

div {
  width:100px;
  transition: width 2s;
  -webkit-transition: width 2s;
  /* Safari */
 }
 div:hover {
   width:300px;
 }

5. 画一条0.5px的边框

 .container {
    width: 300px;
    height: 1px;
    transform: scale(0.5);
    background-color: red;
    transform-origin: 50% 100%;
}

传送门:如何画一条0.5px的边框

6. BFC

在将BFC之前先认识一下css的三种布局模型：

流动布局模型

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度为100%
内联元素都会在所处的包含元素内从左到右水平分布显示

浮动模型

给元素设置float属性

层模型

绝对定位：position: absolute 将元素从文档流中拖出来
相对定位：position: relative 通过设置 left top right bottom等值设置元素相对文档流的偏移位置
固定定位：position: fixed

BFC

BFC就是块状格式化上下文，属于上述的流动布局模型
BFC决定了如何对其内容进行定位，以及与其他元素的关系和相互作用
具有BFC特性的元素可以看做是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的特性
可以把BFC理解为一个封闭的大箱子，箱子里面如何翻江倒海都不会影响到箱子外面

形成BFC的条件

body根元素
浮动元素，float除了none以外的值
绝对定位元素， position: absolute/fixed
display: inline-block, table-cells, flex
overflow: 除了visible以外的值， hidden/ auto/scroll

BFC的常见作用

阻止外边距折叠在标准文档流中，块级标签竖直方向的margin,会以大的为准，这就是margin塌陷现象。

.div1 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 20px;
}
.div2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 30px;
}
<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>
你会发现div1与div2之间在竖直方向上的距离是30，而不是30+20

因为这两个div处于同一个BFC容器下，这里就是body下面，所以div1的下边距与div2的上边距产生了重叠，这不是个Bug,我们可以理解为这是一种规范。如果不想要这种重叠的话，我们就可以把这两个div放在不同的BFC中。

.container {
   overflow: hidden;
}
.div1 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 20px;
}
.div2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 30px;
}
 <div class="container"><div class="div1"></div></div>
 <div class="div2"></div>

把两个div放在不同的BFC中，间距就变成了50了

高度塌陷通常情况下，父元素的高度会被子元素撑开，但是如果子元素为浮动元素的时候，父元素就会发生高度坍塌，上下边界重合，这时候就需要BFC来清除浮动

.container {
    border: 1px solid blue;
    overflow: hidden; //通过这个来触发BFC

}
.div1 {
    width: 100px;
    height: 200px;
    background-color: red;
    float: left;
}
 <div class="container">
   <div class="div1"></div>
</div>

7. 垂直居中

dispay: flex; align-items: center
父元素设置position:relative,子元素:position: absolute,top: 50%, margin-top: -(子元素高度的一半)
父元素设置position:relative，子元素：position: absolute,top: 50%, transform: translate(0, -50%)
父元素设置position:relative，子元素：position: absolute,top: 0, bottom: 0; margin: auto
利用line-height对文本进行居中

8. 伪元素和伪类的区别-传送门

引入伪类和伪元素是用来修饰不在文档树中的内容

伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如说悬停在某个元素上，可以用:hover来描述这个状态，其他还有:visited, :active, :focus
伪元素伪元素是用来创建一些不在文档树中的元素并为其添加样式

li:first-child: 伪类 :first-letter: 伪元素

伪类操作的对象是文档树中已有的元素
伪元素则创建了一个文档树之外的元素
伪元素可以用单双冒号
伪类用单冒号

9. 盒模型

IE盒模型: box-sizing: border-box;属性width包含了boder,padding,content 也就是说 width = border+padding+content。比如css中给一个div写了width: 100px; 那么整个盒子的区域加起来是100px的宽，分配给内容的宽度是小于100的
标准盒模型: box-sizing: content-box;属性width只是内容content的宽度，不会包含padding和boder的，我们写了width:100px，那也仅仅是content的宽，整个盒子的宽是大于100的。
我们尽量是使用标准盒模型

10. 响应式布局方案

响应式布局，就是同一个页面在不同屏幕尺寸下有不同的布局。传统的就是pc端开发一套，手机端开发一套。而响应式布局就是只要开发一套就够了，缺点就是css就比较重。
通过检测视口分辨率，针对不同的客户端，在客户端做代码处理，来展现不同的布局和内容 响应式布局方案： 响应式布局方案
媒体查询 css3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染。

@media screen and(max-width: 320px) {
  body{
    font-size: 24px
  }
}

rem布局 rem是css3新增的单位，并且移动端的支持度很高。

css题