1.z-index的层级关系及css中的层叠上下⽂
- 用来描述一个元素再文档中的层级顺序，用于确认元素再当前层叠上下文中的层叠级别，拥有更高堆叠顺序的元素总是处于层叠顺序较低的元素的前面
- z-index属性只有和定位元素（position不为static的元素）
复制代码
2.尽量多的⽔平垂直居中，分是否已知道⽗⼦dom宽⾼的情况
- {display: absolute; top: 50%; left: 50%; transform: translate(-50%, %50%); }
- {dispaly: flex; jusity-content: center; align-items: middle; }
3.如何触发BFC，以及⽤法和IFC区别
- 触发:
1. float
2. table 和display: table-*
3. positon: absolute fixed sticky
4. display: inline-block/flex/inline-flex/grid/inline-grid
5. overflow不为 visible 的元素
- https://www.jianshu.com/p/b750122cd669
4.简单介绍下box-sizing属性
- box-sizing 属性定义了user agent 是如何计算一个元素的总宽（width）高（height）
- 它有两个属性值：
1. content-box(默认值) width = content-width
2. border-box : width = border + padding + content-width
5.css优先级如何计算
- important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
6.top、left是相对于padding还是border
- position: static; top/left 无效
- position: fixed; top/left 相对于浏览器视口
- position: relative; top/left 相对于父元素的border
- position: absolute; top/left 相对于父元素的padding
7.flex布局的使⽤及在平时中哪些时候会⽤到
8.display:none和visibility:hidden的区别
- display:none 元素不显示，占据的空间消失
- visibility:hidden 元素不显示，占据的空间依然存在
9.清除浮动的⽅法
- 父元素 overflow: hidden
- 父元素为元素的方法
div:after {
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
10.::before和:after中双冒号和单冒号有什么区别
- :: 在css3中表示为元素, : 在css3中表示伪类
11.1像素边框在移动端的实现
- 1px 变宽的原因是因为，css 中逻辑像素和 显示器设备的物理像素不一致造成
- 解决：
1. 媒体查询 min-device-pixl-ratio
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
2.为元素边框
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}
3. 1px线
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
4.
12.rem和em区别及使⽤⽅法
- rem 以html标签的font-size 为基准值
- em 以相对于使用em单位的元素的font-size, 父元素的字体大小可以影响 em 值，纯粹是因为继承。
13.CSS中哪些属性可以继承？
-
14.CSS3动画的实现步骤
- 定义 ransform-origin，transition，ransition-delay和transition-timing-function 等属性
- animation-name：动画名字。
- @keyframes ani { 动画效果 }
15.css3中的动漫, 过渡事件
- transition 只有webkitTransitionEnd事件
- ele.addEventListener('webkitAnimationIteration',function(){
console.log('触发循环')
})
ele.addEventListener('webkitAnimationEnd',function(){
console.log('触发结束')
})
ele.addEventListener('webkitAnimationStart',function(){
console.log('触发开始')
})
ele.addEventListener('webkitTransitionEnd', function(){
console.log('触发过度动画结束')
})
