CSS面试题

1. 实现一个倒三角形

宽高为0，用border控制，其他三边透明

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-top: 10px solid rgb(255, 31, 31);
  position: relative;
  top: 10px
}

2. dispaly:none与visibility：hidden的区别

相同：都是让元素不可见

display会让元素在渲染树上消失，不占据空间，会造成回流

visibility 渲染树上依然占据空间，知识内容不可见，会造成重绘

3. 外边距折叠

两个文档流的块元素垂直方向上的margin会折叠合并成一个margin

浮动、绝对定位不会折叠

创建BFC的元素，不会和它的子元素发生margin折叠

4. 什么是Z-index

设置元素的堆叠顺序

仅在position为relative、absolute、fixed、sticky时候可以触发

5. 简述 box-sizing有效值和规则

三种：content-box，border-box，inherit

content-box：默认盒子模型，元素大小+内边距+边框

border-box：盒子实际宽度 = width - border - padding

inherit：继承父元素属性的值

6. 移动端如何适配

1. meta viewport

​ 默认视口为 980px，手机访问网页文字会变得非常小

<meta name="viewport"
      content="width=device-width,initial-scale=1.0"
></meta>

2. 图片适配

​ img {max-width：100%} 图片会自动缩放，最大只显示其本身

​ 如果使用 {width：100%} 当容器大于图片宽度，会造成拉伸变形

3. 媒体查询

​ CSS3的media query模块，会自动检测屏幕宽度，加载相应的CSS文件

@media screen and (min-width:1200px){}

4. rem

   rem是一个相对单位，根据html根元素的font-size，实现自适应布局

   

5. vw布局：根据当前的视口大小

7. 什么是CSS3 transform？transition？animation？区别是什么？

Transform 主要用于静态效果的变换

Transition 用于控制状态变化时的平滑过渡效果

Animation 通过@keyframes实现，更适用于复杂和灵活的动态动画效果

8. 如何实现垂直居中

flex:

.container {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
}  

父相子绝 + transfrom

.container {  
  position: relative; /* 设置为相对定位 */  
}  
.centered {  
  position: absolute; /* 设置为绝对定位 */  
  top: 50%; /* 从顶部开始，向下移动50% */  
  transform: translateY(-50%); /* 向上移动自身高度的一半 */  
  left: 50%; /* 从左侧开始，向右移动50% */  
  transform: translateX(-50%); /* 向左移动自身宽度的一半 */  
}  

Grid

.parent {
	display: grid;
	place-content: center;
}