网页布局规避脱标流
1.优先考虑标准流进行网页布局。
2.然后考虑使用浮动(块级元素在一行上显示)
3.最后考虑使用定位(元素压着另外一个元素)
4.如果要实现模式转换，必须使用display图片垂直对齐方式
vertical-align:baseline;默认值（基线对齐）
top | middle |bottom;
总结：
1.vertical-align属性只能用在行内块元素或者table标签中。
2.如果其他非行内块元素或者table标签要使用该属性，那么就要将该元素转为行内块元素或者table标签(display:table;)
使用：
1.解决插入图片底部3px的空白(给插入图片设置vertical-align:top |middle |bottom或者给父元素设置高度)
2.实现图片垂直居中(一中方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 600px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
line-height: 400px;
text-align: center;
}
img{
/* 设置元素在垂直方向的对齐方式 */
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="images/bg5.png" alt="">
</div>
</body>
</html>
◆第一步先设置行高等于容器的高度(也就是图片垂直居中对齐的方法)。
◆第二步给图片设置vertical-align:middle属性。
元素的隐藏方式
overflow:hidden;
display:none; 元素隐藏之后不占位置
display:block; 将隐藏的元素显示出来
visibility:hidden; 元素隐藏之后占位置