本文是个人的经验，下面我将所遇到和知道的面试问题进行归类总结，希望对大家有所帮助。（未完待续。。。）
目录
一、关于HTML
1.用纯CSS画出一个三角形？
下面是用CSS写出的一个三角形，原理就是让div的高度和宽度为0，只让边框显示。首先给所有的边框填充一个透明颜色transparent，然后在三角形斜边的方向填充一个非透明颜色，即可写出一个三角形。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 0;
height: 0;
border:50px solid transparent;
border-bottom-color:deepskyblue ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
然后这是进阶版本，用上述方法画出一个风车。原理类似，保留俩个边框。下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 0;
height: 0;
border: 100px solid orange;
border-top: none;
border-left-color: transparent;
margin-top: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
需要注意的是，如果不把顶部的边框设置为none而设置为透明色，则会出现一个直角三角形，结果如图：
把梯形拼接好后，就会形成风车的形状了。下面是写好的风车代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
border: 1px solid black;
}
.top_left,.top_right{
float: left;
width: 0;
height: 0;
}
.top_left{
border: 100px solid orange;
border-top: none;
border-left-color: transparent;
margin-top: 100px;
}
.top_right{
border: 100px solid blue;
border-right:none ;
border-top-color: transparent;
}
.bottom_left{
width: 0;
height: 0;
clear: both;
float: left;
margin-left: 100px;
border: 100px solid yellow;
border-left: none;
border-bottom-color: transparent;
}
.bottom_right{
width: 0;
height: 0;
float: left;
border: 100px solid greenyellow;
border-bottom: none;
border-right-color: transparent;
}
</style>
</head>
<body>
<div class="box">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</div>
</body>
</html>
2.如何让子元素在父元素水平和垂直居中
方法一、弹性布局居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.father {
width: 400px;
height: 400px;
background: red;
display: flex;
justify-content: center;
/*x轴对齐方式*/
align-items: center;
/*y轴对滴方式*/
}
.son {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>方法二、将子元素的元素类型转换为行内块类型
需要注意是的，将父元素的字体大小设置为0，父元素的行高和高度一样。子元素设置垂直对齐方式为
中线对齐vertical-align:middle;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.father {
width: 400px;
height: 400px;
background: red;
font-size:0;
text-align:center;
line-height:400px;
}
.son {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>还有一些方法，比如设置父元素的元素类型为 table-tell类型（标签td的显示规则）、通过外边距margin进行固定数值的居中（需要计算）等等，这里就不一 一介绍了。
3、圣杯布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
body,html{height:100%;}
*{margin:0; padding:0;}
.top{width:100%; height:100px; background:#096; position:absolute; top:0; left:0;}
.center{width:100%; background:#30C; position:absolute; top:100px; bottom:0;}
.left{width:200px; height:100%; background:#FF0; float:left; }
.right{background:#CF3; overflow:hidden; height:100%;}
.aside{width:100px; height:100%; background:#F9C; float:right; }
</style>
</head>
<body>
<div class="top"></div>
<div class="center">
<div class="left"></div>
<div class="aside"></div>
<div class="right"></div>
</div>
</body>
</html>
效果图如下：
4、BFC？BFC能解决什么？BFC如何使用
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC所解决的问题
1. 自适应两栏布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>效果为下
根据BFC布局规则第3条：
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
根据BFC布局规则第四条：
BFC的区域不会与float box重叠。
我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。
.main {overflow: hidden;}
当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：
2.清除内部浮动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>页面如下：
因为子元素浮动，半脱离文档流，导致父元素之中无内容且父元素没有设置固定高度，导致了父元素的高度不是预期效果，这就是高度塌陷
根据BFC布局规则第六条：
计算
BFC的高度时，浮动元素也参与计算
为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。
代码：
.par {overflow:hidden;}
效果如下：
3、防止垂直方向的margin重叠问题
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: orangered;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
</html>页面效果：
按照代码效果，俩个P之间的距离应该为200px，可结果标签P之间的间距只有100px。
根据BFC布局规则第二条：
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: orangered;
}
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
</html>
效果如下：
BFC的生成条件
既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
注意：看到有朋友认为display：table也可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC
由于时间关系，本文暂时写道此处，以后会继续补充。
1988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
