盒子布局:
1.主要利用margin
2.margin为负值,元素会移动位置;
3.默认下面的元素这招在上面元素;
4.可以通过给元素加position:relative 实现改变层级关系z-index
5:理解即可
盒子的底层是margin,一个盒子浏览器中占据的位置:是margin所以margin为负值;
就会给其他元素【让出位置】
注意:
1.千万不要使用margin拉开两个【间距大】的元素,可以使用浮动或者绝对定位
错误案例: .navTop
2.只要给元素添加position属性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
color: #000;
}
header{
width: 100px;
}
.navTop{
width: 100%;
height: 45px;
background-color: #f3f3f3;
}
.navTop>nav{
width: 93%;
height: 45px;
margin: 0 auto;
}
nav li{
display: inline-block;
height: 45px;
/* 设置行高可以使文本上下居中对齐,值小于等于当前容器的高度 */
line-height: 45px;
padding-right: 8px 2px;
}
locationNav{}
nav li{
/* 对行内块如果不设置宽高,都是由子元素撑起来 */
display: inline-block;
background-color: aqua;
}
.main_header{
width: 90%;
height: 200px;
background-color: red;
margin: -10px auto 0px auto;
/* z-index 值对position 有用 */
/* z-index:10 */
}
.list{
width: 90%;
height: 200px;
background-color: aqua;
margin: -10px auto 0px auto;
/* z-index: 1 */
}
</style>
<body>
<header>
<div class="navTop">
<nav>
<div class="locationNav">
<img src="" alt="">
<span>南京</span>
</div>
<ul>
<li><a href="">优享购</a></li>
<li><a href="">优享购</a></li>
<li><a href="">优享购</a></li>
<li><a href="">优享购</a></li>
<li><a href="">优享购</a></li>
<li><a href="">优享购</a></li>
<li><a href="">优享购</a></li>
<li><a href="">优享购</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>