CSS
css和js两种方式实现div右移1000px动画
// css
#box{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
animation: moveRight 3s linear 1s;
}
@keyframes moveRight {
0%{transform: translateX(0px);}
100%{transform: translateX(1000px);}
}
// js
oBox.onclick = function () {
window.requestAnimationFrame(function cb() {
if (oBox.offsetLeft != 1000) {
oBox.style.left = oBox.offsetLeft + 10 + 'px'
window.requestAnimationFrame(cb)
}
})
}
visibility、display、opacity的区别
opacity : 0 | visibility : hidden | display : none | |
|---|---|---|---|
| 是否占据页面空间 | 是 | 是 | 否 |
| 对子元素的影响 | 覆盖子元素 opacity:1 | 不覆盖子元素 visibility:visible | 覆盖子元素 display:none |
| 监听的事件是否触发 | 是 | 否 | 否 |
| 被遮罩元素的监听事件是否触发（使用绝对定位覆盖） | 否 | 是 | 是 |
单行截断css
// 单行
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
// 多行
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex布局
flex : 1
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩
transition、transform、translate的区别
- transition: 设置过度。
- transform: 一些变换。平移，旋转，斜切等等。
- translate: transform一个属性，用于设置x,y方向的平移。
如何画一条 0.5px 的边框
说一下BFC
parent元素宽高不定，实现scale固定宽高比始终为4：3
- 容器高度设为0，子元素设置
padding-bottom75% - aspect-ratio
CSS垂直居中的方案
伪元素、伪类
position的几个属性和含义
说一下盒模型
响应式布局方案
三栏式布局方案
- flex布局
- 双飞翼布局。
- 圣杯布局。 双飞翼和圣杯都是通过设置浮动，并且将中间内容放在前面展示。这样做的好处之一是在网络不好的情况下，让中间的内容先展示。
二者的区别就是如何让中间元素的内容不被两边布局的容器遮住。
- 双飞翼布局是在外层包裹一个div元素，让其宽度为100%，然后由于盒子模型的特性，内部元素设置margin后，会自动将剩余空间分配给内部元素作为宽度。
- 圣杯布局直接设置padding值，将内容挤出覆盖的部分。但是需要社会中ie的怪异盒子模型。
box-sizing: border-box。
