前端基础面试题之CSS篇
最近出去面了一次试。去之前信心满满，去之后灰头土脸，因为连最简单的“css居中方式有多少种”、“说说js数据类型”这种入门问题竟然回答的支支吾吾，也怪不得面试官20分钟就优雅的把我送了出来。
痛定思痛，总结了一些基础面试题，望壮士你出门迎敌时，不要像我一样尴尬……
清除浮动方式
1、使用伪类。
也可以在父级标签最后添加一个div，div中的属性同伪类。原理其实和伪类是一样的，都是利用clear：both
.father :after {
clear:both;
content:"";
display:block;
}
.father{
zoom:1;//IE专有属性，解决ie6、7浮动问题
}
2、父级标签触发BFC(下面有专门介绍)
.father :after {
clear:both;
content:"";
display:block;
}
.father{
zoom:1;//IE专有属性，解决ie6、7浮动问题
}
未知宽高的元素实现水平垂直居中
方法一：父元素dispaly:table,子元素display:cell-table。
优势：父元素可以动态改变高度。
劣势：table属性容易造成多次reflow,IE8以下不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法一</title>
</head>
<style>
.parent1{
display: table;
height:300px;
width: 300px;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}
</style>
<body>
<div class="parent1">
<div class="child">hello world-1</div>
</div>
</body>
</html>
方法二：利用空元素或伪类
•下面代码中的注释部分为替代after伪类的另一种写法，原理一样
优点：兼容性好
缺点：多出来个空元素、麻烦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.wrap {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
background: #92b922;
}
.test {
background: #de3168;
display: inline-block;
color: #fff;
padding: 20px;
}
.wrap:after {
display: inline-block;
content: '';
width: 0px;
height: 100%;
vertical-align: middle;
}
/* .vamb{
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
} */
</style>
<div class="wrap">
<!-- <b class="vamb"></b> -->
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</div>
</html>
方法三：绝对定位+transform
优点：方便，支持webkit内核
缺点：transform兼容性差，IE9以下不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
position: relative;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
<div class="child">hello world</div>
</div>
</body>
</html>
方法4:flexbox布局
优点：方便
缺点：兼容性不好,IE支持很差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
background: #FD0C70;
}
.parent4 .child{
color:#fff;
}
</style>
<body>
<div class="parent4">
<div class="child">hello world</div>
</div>
</body>
</html>
BFC
BFC(block formatting context)翻译为“块级格式化上下文”，它会生成一个独立的渲染区域(不影响外面的元素，同时也不受外面元素的影响)，它的生成有以下规则：
•内部的box会在垂直方向上一个接一个的放置
•内部box在垂直方向上的距离由margin决定，同属一个BFC内的相邻box会发生margin重叠
•每一个内部box的左边，与BFC的的左边相接触，即使存在浮动也是一样
•BFC的区域不会与float box发生重叠
•计算BFC的高度时，浮动元素也参与计算(上面清除浮动的问题就是这个原理)
触发BFC的条件：
•根元素
•float属性不为none
•position为absolute或者fixed
•display为inline-block、table-cell、table-caption、flex、inline-flex
•overflow不为hidden
前端精选文摘：BFC 神奇背后的原理 这篇文章说的很清楚，也有相应的原理和例子，可以仔细看看。
实现自适应两列布局
方法一：右边元素触发BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.father {
background-color: lightblue;
}
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
overflow: auto;
height: 500px;
background-color: lightseagreen
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='right'>
right
</div>
</div>
</body>
</html>
方法二：margin-left实现
•局限性：这种方法必须知道左侧的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.father {
background-color: lightblue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.right {
margin-left: 100px;
background-color: lightseagreen
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='right'>
right
</div>
</div>
</body>
</html>
三列布局
flex
优点：方便
缺点：还是flex兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.father {
display: flex;
height: 100%;
}
.left,
.right {
flex: 0 1 100px;
background-color: red;
}
.middle {
flex: 1;
height: 100%;
background-color: green;
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='middle'>middle</div>
<div class='right'>center</div>
</div>
</body>
</html>
负margin布局(双飞翼)
优点：市面上使用最多的一个
缺点：麻烦，这是多年前淘宝的老技术了
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局/双飞翼布局</title>
<style>
.mainWrap {
width: 100%;
float: left;
}
.main {
margin: 0 120px;
}
.left,
.right {
float: left;
width: 100px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -100px;
}
</style>
</head>
<div class="parent" id="parent" style="background-color: lightgrey;">
<div class="mainWrap">
<div class="main" style="background-color: lightcoral;">
main
</div>
</div>
<div class="left" style="background-color: orange;">
left
</div>
<div class="right" style="background-color: lightsalmon;">
right
</div>
</div>
</html>
列举HTML5新特性
•语意化标签(nav、aside、dialog、header、footer等)
•canvas
•拖放相关api
•Audio、Video
•获取地理位置
•更好的input校验
•web存储(localStorage、sessionStorage)
•webWorkers(类似于多线程并发)
•webSocket
列举Css3新特性
•选择器
•边框(border-image、border-radius、box-shadow)
•背景(background-clip、background-origin、background-size)
•渐变(linear-gradients、radial-gradents)
•字体(@font-face)
•转换、形变(transform)
•过度(transition)
•动画(animation)
•弹性盒模型(flex-box)
•媒体查询(@media)
transition和animation的区别是什么？
过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；
动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
总结
以上就是我要说的内容，希望以上的内容可以帮助到正在默默艰辛的大家，希望大家在往后的工作与面试中一切顺利。
那如何学习才能快速入门并精通呢？
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有一套实用的视频课程用来跟着学习是非常有必要的。
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：866109386，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。