css面试汇总题

• 边框0.5px（ zoom: 0.5;）
  
  
  

• 画一个三角形
  .triangle{
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-left-color: red;
  }
  

移动端1px边框怎么设置

/* 方法1 /
.border{
width: 100%;
height: 1px;
background: red;
}
/ 方法2 /
.border{
border-image: url(border.png)
}
/ 方法3 */
.border{
box-shadow: 0 0 0 1px #000;
}

• px、em、rem、vh、vw分别是什么
  px物理像素，绝对单位；em相对于自身字体大小，如果自身没有大小则相对于父级字体大小，如果父级也没有则一层一层向上查找，直到找到html为止，相对单位；rem相对于html的字体大小，相对单位；vh相对于屏幕高度的大小，相对单位；vw相对于屏幕宽度的大小，相对单位。

• 如何实现6px字体
  .font{
  font-size: 12px;
  transform: scale(.5);
  }

• 浮动 float的考题

.column{ float: left; } #left{ width: 100px; } #right{ width: 200px; } #center{ width: calc(100% - 100px - 200px); }

• 等高布局（真等高）弹性盒子
  .parent{
  display: flex;
  }
  .child{
  flex: 1;
  }
  

• 等高布局（假等高）互补的内外边距 跟据内容自动撑开
  
  

• 如何水平垂直居中一个元素

5.1、弹性盒子

.box{
display: flex;
justify-content: center;
align-items: center;
}
5.2、定位

.box{
position: relative;
}
.box .sub{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/margin-left: 负的宽度的一半/
/margin-top: 负的高度的一半/
}

• 如何实现左边固定宽，右边自适应布局

#container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; } #center { width: 100%; } #left { width: 200px; margin-left: -100%; position: relative; right: 200px; } #right { width: 150px; margin-right: -150px; } 7.2、双飞翼布局

#container { width: 100%; } ​ .column { float: left; }

#center {
margin-left: 200px;
margin-right: 150px;
}

#left {
width: 200px;
margin-left: -100%;
}

#right {
width: 150px;
margin-left: -150px;
}