一、CSS基础

display的属性值及其作用

1.none : 元素不显示 并且从文档结构中移除

2.block ：块类型，可设置宽高 默认宽度为父元素宽度 换行显示

3.inline ： 行内元素类型 默认宽度为内容宽度 不可设置宽高 同行显示

4.inline-block ： 默认宽度为内容宽度，可以设置宽高，同行显示

5.list-item : 像块元素一样显示，并添加样式列表标记

6.table ： 此元素做为块级表格来显示

7.inherit ： 继承父元素的display的值

display的block、inline和inline-block的区别

1.block 会换行显示 默认继承父元素宽度 可以设置宽高

2.inline 不可以设置宽高 同行显示 默认宽度为内容宽度

3.inline-block 可以设置宽高 同行显示 默认宽度为内容宽度

transition和animation的区别

transition:需要事件去触发执行

animation:不需要事件去触发执行，可以循环执行

对requestAnimationframe的理解

1.在隐藏或者不可见的元素中 不会执行

2.会把每一帧中的所有DOM操作集合起来，在一次重绘或者回流中完成，并且这个时间紧紧跟随浏览器的刷新频率

CSS3中有哪些新特性

1.border-radius

2.flex

3.animation

4.transition

5.filter-blur

6.box-shadow

7.opcaity

8.gradient

9.transform

对 CSSSprites 的理解

CSSSprites是将一个页面用到的图片都合进一张大图里面，然后用CSS的background-image，background-repeat，background-position进行背景定位

优点：很好的减少HTTP请求，提高页面性能

缺点：维护麻烦

CSS 优化和提高性能的方法有哪些？

1.压缩css代码

2.减少使用@import方式

3.少用后代选择器

4.避免使用通配符选择器

5.了解继承属性 少重复指定规则

6.少对标签进行选择 多用class

7.选择器优化嵌套，尽量避免层级过深

8.看情况使用css雪碧图

9.正确使用display属性

10.尽量减少重绘和重排

什么是重绘和重排和回流

重绘是一个元素外观改编所触发的浏览器行为，浏览器会根据元素的新属性进行绘制，使元素呈现新的外观，重绘不会重新布局，所以不一定会触发重排

重排：改编一个元素的位置时，就会触发重排，而且也会触发重绘

回流：渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排，或回流

::before 和 :after 的双冒号和单冒号有什么区别？

单冒号：伪类

双冒号：伪元素

CSS3规范里指定了伪类使用单冒号 伪元素使用双冒号

单行、多行文本溢出隐藏

单行

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;

如何判断元素是否到达可视区域

通过getBoundingClientRect这个api来获取

z-index属性在什么情况下会失效

两个元素重叠时

还有以下几种情况:

1.父元素position设置为relative，子元素的z-index会失效

2.元素设置了z-index还设置了float属性

3.元素没有设置position属性为非static属性

二、页面布局

常见的CSS布局单位

em,px,rem,vw,vh,%

px、em、rem的区别及使用场景

px:适用于非移动端设备的场景 px相对其他单位来说比较固定

em：适用于响应式布局，相对于父元素的字体大小来设置长度

rem：适用于移动端设备的场景，rem是相较于根元素的字体大小来进行设置

两栏布局的实现

flex布局：
父元素:
display:flex
子元素:
1:
width:200px
2:
flex:1

三栏布局的实现

flex布局：
父元素:
display:flex
子元素:
1:
width:200px
2:
flex:1
3:
width:200px

水平垂直居中的实现

flex:

display:flex;
align-items:center;
justify-content:center;

绝对定位:

父元素:
position:relative;
子元素:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)

父元素
position:relative;
子元素:
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

父元素
position:relative;
子元素:
position:absolute;
left:50%;
top:50%;
margin-left:-50px;//知道父元素宽度 设置一半的宽度
margin-top:-50px;//知道父元素高度 设置一半的高度

对Flex布局的理解及其使用场景

flex包含了两个概念：项目和容器

容器包含了6个属性：

1.flex-direction: 主轴的排列方向

2.flex-wrap: 主轴是否换行

3.flex-flow: flex-direction 和 flex-wrap 的简写 ，默认值是 row nowrap;

4.align-items: 交叉轴的排列位置

5.justify-content: 主轴的排列位置

6.align-content: 定义了多根轴线的对齐方式，如果只有一根轴线 就不会起作用

项目包含了6个属性：

1.order order值越小 排序的方向就往前靠 默认值为0

2.flex-shrink 定义了项目的缩小比例 默认为1 如果空间不足 那项目会继续缩小

3.flex-grow 定义了项目的放大比例 默认为0 如果存在剩下空间 也不放大

4.flex-basis 定义了项目在分配多余空间之前，项目占据的主轴空间，浏览器按照这个属性计算主轴是否有多余的空间，默认值为auto 就是项目原本的大小

5.flex flex-grow flex-shrink flex-basis的简写 默认为0 1 auto

6.align-self 允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性 默认值为auto

flex:1 表示什么

flex:1 代表 flex: 1 1 auto 也即

flex:grow 1 如果存在剩余空间就放大

flex-shrink 1 如果空间存在不足 空间就缩小

flex-basis auto 在给上面两个属性分配多余空间之前 计算是否有多余的空间 在决定分配

三、定位与浮动

什么是margin重叠问题？如何解决？

margin重叠是因为同一个bfc（块级格式化上下文）中的margin会重叠，bfc是单独的一个容器。

父元素加入: overflow: hidden

元素的层叠顺序

position的属性有哪些，区别是什么

absolute : 绝对定位 相较于父元素进行定位

fixed:绝对定位 相对于屏幕窗口进行定位

relative: 相对定位，相对于其原本的位置进行定位

static : 默认值，没有定位

inherit: 继承父属性的值

absolute与fixed共同点与不同点

改变行内元素的呈现位置，将display置为display:inline-block

使元素脱离文档流，不在占据文档物理空间

覆盖非定位文档元素

不同点：

absolute相较于父元素进行定位，fixed相较于浏览器窗口进行定位

absolute会随着滚动条的位置进行移动，fixed会固定在页面的具体位置

四、场景应用

实现一个三角形

div{
	width:0;
	height:0;
	border-top:50px solid red;
	border-right:50px solid red;
	border-left:50px solid red;

}

画一条0.5px的线

transform: scale(0.5,0.5);

如何解决 1px 问题？

思路一： 写0.5px的线

div{
	border:0.5px solid #333;
}

思路二：伪元素先放大在缩小

#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}