border大法无敌

1.当文字超出时，如何显示...

white-space: nowrap;  //不折行显示
overflow: hidden;        //超出隐藏
text-overflow: ellipsis;  //文本超出变为省略号

2.white-space: pre //会保留输入过程中的空格，输入多个空格后不会只转化为一个空格

3.如何去除checkbox和radio的默认输入框

visibility: hidden;

4.outline: 0 清除button选中时的边框

5.当鼠标移动上去时实现发大功能,利用transition和transform:scale(2,2)//放大2倍

6.border-collpase;//将表格变为一个单一的边框

7.box-shadow: 5px 5px 5px #ccc;//数字分别表示x轴偏移，y轴偏移，阴影模糊度，颜色

8.background相关
background-attachment:fixed;//表示背景图片固定在浏览器中的某个位置，不随滚动条滚动
background-size:cover;//完全覆盖背景区域
background-size:contain;//适应背景区域

9.cursor: pointer;//改变鼠标的样式 详见cursor

10.box-shadow: 0 0 10px 5px black inset;//前两个表示xy轴的偏移量，当设置为0的时候四边都有阴影，第三个值指的是阴影的模糊距离，第四个值指的是模糊尺寸，inset值阴影产生在盒子内部。

11.设置paddiing上下距离为某个值可以实现垂直居中
transform: translate(-50%,-50%);实现垂直居中（自适应）
例子： 垂直居中

12.伪元素实现垂直居中
.xxx:before {
content:''
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.要居中的元素 {
display: inline-block;
vertical-align: center;
}

13.width和max-width的区别：
width:500px; //当浏览器缩小到小于500px时会出现滚动条
max-width:500px; //当浏览器缩小到小于500px时不会出现滚动条

14.对于inline-block的缝隙问题 先对其父元素font-size设置0，再对子元素设置font-size就可以消除间隙

15.b标签和strong标签的区别两者在实现的效果上是一样的，但是b标签仅仅是指bold加粗没有其他语义，而strong标签着重表示强调，可以给strong改变样式为下划线来强调内容

16.font-weight: 700 相同与font-weight: bold;

17.如何实现满屏 body,html都设置height:100%,再在需要满屏的元素上设置100%

18.当要使用hover属性来显示字体图标时，不要使用伪元素而是使用实体标签来替代，

19.当border-radius无效时，可能是子元素的背景遮盖了圆角，此时在父元素上加overflow:hidden可解决

20.transition属性实现渐变效果：
1.设置初始状态如： background-color: #FFF;
2.设置transition: background-color 0.5s ease 0.2s; //从左到右依次为要改变的属性 几秒后达到目标值 (ease规定慢速开始，然后变快，然后慢速结束的过渡效果) 延迟0.2s执行
3.设置目标属性值 如 div:hover {background-color: #666}
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

21.z-index:-1;让一个层在所有层下当背景

22.text-align和float并不冲突

23.使用opacity做透明度时，子元素也会继承opacity，解决方法:使用rgba

24.去除h1标签的加粗为font-weight: normal;而不是none或者0 //这两者都无效

25.对于a标签的默认颜色color: inherit;可以解决

26.有关rgba和opacity的区别：
前者只设置了背景色，当包含块中有内容时，内容并不会透明，而opacity可以继承给后代元素，后代也会透明

27.user-select: none;用户将无法选中文字

28.loading效果

.xxx {
  width: 100px;
  height: 100px;
  border: 20px solid green;
  border-radius: 50%;
  border-top: 20px solid red;
  animation: 1s infinite linear  round ;
}
@keyframes round {
  from{
      transform: rotate(0)
  }
  to{
    transform: rotate(360deg)
  }
}

29.设置flex和绝对定位四个方向都设置为0，通常用来做垂直居中的dialog

.xxx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

30.表单的autofoucus表示自动获取焦点

31.有关几种请求的Method
(1) get '/users' 获取某个用户的数据
(2) get '/users/id' 获取某个用户的id
(3) post '/users' 新增数据
(4) patch/put '/users/id' 更新某个用户的数据
(5) delete '/users' 删某个用户的数据

31.~的用法
w3School

32.css往复动画 alternate

33.cc:ie用来解决ie兼容性 browserhacks

伪元素伪类大全
flex布局

34.osi七层模型
从上到下依次是 应用层 表现层 会话层 传输层 网络层 数据链路层 物理层