面试题面试题 1.CSS 布局实现9宫格布局垂直居中效果还可以用flex以及栅格布局传送门:https://www.

面试题

1.CSS 布局实现9宫格布局垂直居中效果


<!DOCTYPE html>   
<html>   
<head>   
<meta charset="utf-8">   
<title>九宫格布局</title>   
<meta http-equiv="X-UA-Compatible" content="IE=edge">   
</head>   
<body>   
<html>   
<head>   
<style type="text/css">   
body{
    margin:0;padding:0;
}   
.grid_wrapper{   
 width: 170px;   
 height: 170px;   
 margin-left: auto;   
 margin-right: auto;   
}   
.grid{   
 margin-left: 5px;   
 margin-top: 5px;   
}   
.grid:after{   
 content: ".";   
 display: block;   
 line-height: 0;   
 height: 0;   
 clear: both;   
 visibility: hidden;   
 overflow: hidden;   
}   
.grid a,.grid a:visited{   
 float: left;   
 display: inline;   
 border: 5px solid #ccc;   
 width: 50px;   
 height: 50px;   
 text-align: center;   
 line-height: 50px;   
 margin-left: -5px;   
 margin-top: -5px;   
 position: relative;   
 z-index: 1;   
}   
.grid a:hover{   
 border-color: #f00;   
 z-index: 2;   
}   
</style>   
</head>   
<body>   
<div class="grid_wrapper">   
 <div class="grid">   
  <a href="#" title="1">1</a>   
  <a href="#" title="2">2</a>   
  <a href="#" title="3">3</a>   
  <a href="#" title="4">4</a>   
  <a href="#" title="5">5</a>   
  <a href="#" title="6">6</a>   
  <a href="#" title="7">7</a>   
  <a href="#" title="8">8</a>   
  <a href="#" title="9">9</a>   
 </div>   
</div>   
  
</body>   
</html>

还可以用flex以及栅格布局传送门:www.cnblogs.com/padding1015…

2.已知arr=[{name:'张三',sex:1},{name:'李四',sex:2}];

打印:[{name:'张三',sex:1,sexText:'男'},{name:'李四',sex:2,sexText:'女'}]

let arr = [{name:'张三',sex:1},{name:'李四',sex:2}];
arr.map((item,index) => {
    item.sex === 1 ? item.sexText = '男' : item.sexText = '女'
}) 
console.log(arr,'arr')