1.图层的嵌套设计
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图层嵌套</title>
<style type="text/css">
.inline_div{display:inline-block;}
#wrap{width=400px;height=250px;border:2px solid black;}
#d1,#d2{height:100px;width:45%;background-color:green;margin:20px;}
#d2{background-color:yellow;}
#d3{height:100px;width:95%;border:2px solid black;background-color:#66FF33;margin:0 auto;}
h3{font-size:28px;color:#0033FF;}
</style>
</head>
<body>
<h3>图层嵌套的应用</h3>
<div id="wrap">
<div id="d1" class="inline_div">div1</div>
<div id="d2" class="inline_div">div2</div>
<div id="d3">div3</div>
</div>
</body>
</html>
（1）多个div既可以各自使用，也可以相互包含，嵌套调用，这样就会更加有利于整体页面的布局
（2）body里面外层的div嵌套了3对内层的div,id是CSS里面的id选择器，class是类选择器
（3）id选择器是由#和id选择器的名字组成的，在style标记里面被定义，和body里面相互对应
（4）class里面的inline，对应style里面由点和名字组成的类选择器，两者也是相互对应的
2.层叠效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层叠效果</title>
<style type="text/css">
body{margin:0;}
div{position:absolute;width:200px;height:200px;}
#d1{background-color:black;color:white;z-index:0;}
#d2{background-color:red;top:25px;left:50px;z-index:1;}
#d3{background-color:yellow;top:50px;left:100px;z-index:2;}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</body>
</html>
（1）想要实现层叠的效果，必须要先把position属性的值设置为absolute,在使用z-index设计它们之间的层数关系
（2）margin表示的是边界
（3）25----50；50---100的便宜定位的数值设计成等比例的更能够凸显效果
（4）这里同样使用了选择器，#加上选择起的名字和body里面的相互对应，z-index越大，月位于最上方。
3，三行三列的效果
（1）三行三列的布局效果里面把HTML和CSS内容分割开来，各自放在不同的文件夹里面
（2）使用link标记，但是link标记里面的href要作为CSS里面的文件名称，只有这样2这才能相互
关联，实现布局效果；
（3）CSS里面的页脚footer要先清除前面使用的页面格式，然后设计自己的样式，CSS里面的
left,center right的width比例相加的和应该是100才能够和上面的对齐，同时中间的三张设置成
向左边进行浮动，这样就可以让他们进行同行显示
![[CSS]文字旁边的竖线以及布局知识](https://img-blog.csdnimg.cn/direct/5b17a8fc220e47e089ea7e98374d63b5.png)
