层级结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级结构</title>
<style type="text/css">
.d5 {
width: 200px;
height: 100px;
background: red;
}
.d2, .d3, .d4 {
width: 80px;
height: 40px;
background: orange
}
/*.d4 {
margin-left: 160px;
margin-top: -80px;
}*/
.d3 {
margin-left: 80px;
margin-top: -40px;
}
.d4 {
margin-left: 160px;
margin-top: -40px;
}
/*没有层级结构情况下:*/
/*1.盒子布局间相互影响程度很大*/
/*2.要严格遵循从上至下布局顺序进行布局*/
/*问题点:牵一发动全身*/
</style>
<style type="text/css">
.menu {
width: 200px;
height: 100px;
background: red;
}
.html, .css, .js {
width: 80px;
height: 40px;
background: orange
}
.nav {
width: calc(80px * 3);
height: 40px;
}
.css {
margin-top: -40px;
margin-left: 80px;
}
.js {
margin-top: -40px;
margin-left: 160px;
}
/*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/
</style>
</head>
<body>
<!-- 无层次结构 -->
<!-- <div class="d1">w3c</div>
<div class="d2">html</div>
<div class="d3">css</div>
<div class="d4">js</div>
<div class="d5">menu</div> -->
<!-- 有层次结构 -->
<div class="title">w3c</div>
<div class="nav">
<div class="html">html</div>
<div class="css">css</div>
<div class="js">js</div>
</div>
<div class="menu">menu</div>
</body>
</html>
