面试中经常问到的代码题

1、盒子左右固定中间自适应 （方法不止一种 ）

首先我们要知道 它的css样式怎么写

<div> //最大的盒子
	<div></div> //左边的盒子
	<div></div>	//中间的盒子
	<div></div>	//右边的盒子
</div>

开始布局 可以使用 弹性盒子

.box{
	//最大的盒子
	width:200px;
	display:flex: 
}
.left{
	//左边的盒子
	width:50px
	height:100px
	background:red;
}
.center{
	//中间的盒子
	flex：1； //flex表示占据剩下的位置
	height:100px
	background:red;
}
.right{
	//右边的盒子
	width:50px
	height:100px
	background:blue;
}

2、盒子 上下左右居中 （定位 方法不止一种）

大家在面试的过程中 一定要说的详细 最好先从盒子开始
第一步：css样式

<div></div> //单单一个盒子

第二步 ：直接上代码 都是一些基础的

 div{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            background: lightsteelblue;
        } 

3、三角形的写法
也是一样的 先从样式开始

<div></div> //单单一个盒子

代码

  div{
            width: 0;
            height: 0;
            border-top: 200px solid red;
            border-right: 200px solid transparent;
            border-bottom: 200px solid green;
            border-left: 200px solid transparent; //想让谁隐藏 就给谁加 transparent
        }

好了！如果大佬们喜欢 能如你们法眼 就给小老弟点点关注 ！！！ 我会不定时的更新 最新面试有关的东西