<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer {
width: 1000px;
margin: 100px auto;
/* 实现行内元素、行内块元素进行居中 */
height: 100px;
/* 利用line-height实现垂直居中适合于单行 */
line-height: 100px;
background-color: red;
position: relative;
/* 开启BFC */
overflow: hidden;
}
img{
width: 50px;
height: 50px;
background-color: yellow;
/* 以中基线为基准,此时就是垂直居中了。对块元素不生效 */
vertical-align: middle;
}
ul{
background-color: yellow;
/* 开启BFC */
overflow: hidden;
/* 将ul变成行内块元素 */
display: inline-block;
/* 以中基线为基准 */
vertical-align: middle;
}
/* 即使开启浮动脱离文档流，就算是高度塌陷，仍旧会被父元素影响*/
ul li{
float: left;
/* 覆盖继承的height以及行高 */
height: 20px;
line-height: 1;
list-style: none;
}
/* 绘制中线当参考 */
.middle{
width: 100%;
height: 1px;
background-color: #bbffaa;
top: 50px;
position:absolute;
}
.inner{
width: 1000px;
height: 10px;
background-color: #bbffaa;
margin-top: 10px;
/* 不生效针对 块元素 */
/* vertical-align: middle; */
}
</style>
</head>
<body>
<!-- 头部容器 -->
<div class="outer">
哈哈哈哈哈
<img src="./img/mi-home.png"/>
<input type="text"/>
<button>
喜喜
</button>
<ul>
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>嘿嘿</li>
</ul>
<div class="middle"></div>
</div>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>