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
34.osi七层模型
从上到下依次是 应用层 表现层 会话层 传输层 网络层 数据链路层 物理层
网友评论