【盒子嵌套和基本布局】-阿南达文事网

【盒子嵌套和基本布局】

首先是盒子嵌套的一般步骤：

定义两个盒子的样式之后，在body里面这样写：

<div class="zuo">大盒子

</div>

这样大盒子就可以包裹住小盒子了，例如：

这个盒子嵌套的代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.big {width: 500px;height: 500px;border: 1px dashed black;position: relative;overflow: hidden;background: white;}.small {width: 300px;height: 300px;border: 1px dashed white;position: absolute;margin-top: 4px;margin-left: 4px;background: rgb(148, 24, 24);overflow: hidden;}.small1 {width: 450px;height: 450px;border: 2px solid black;position: absolute;margin-top: 22px;margin-left: 22px;overflow: hidden;background: white;}.small2 {width: 310px;height: 310px;border: 1px dashed white;position: absolute;margin-top: 47px;margin-left: 47px;background: rgb(161, 11, 11);overflow: hidden;}.box2 {width: 400px;height: 400px;position: absolute;margin-top: 25px;margin-left: 25px;background: rgb(161, 11, 11);}.box3 {width: 150px;height: 150px;border: 5px solid black;position: absolute;margin-top: 72px;margin-left: 72px;background: white;}
</style><body><div class="big"><div class="small1"><div class="box2"><div class="small2"><div class="small"><div class="box3"></div></div></div></div></div></div>
</body></html>

接下来是基本布局:

我们首先要了解如何定位：

语法如下：position：定位方式；

定位方式有以下几种：

positon：static；定位的默认值，没有定位

position：relative；生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative

元素的位置通过top、right、bottom、left 控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

position：absolute；生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

position：fixed； 生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)

元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

之后根据需要选择定位方式，以下演示的是fixed的例子，实现之后布局大概类似如下：

实现后生成的网页布局可以上下移动。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子</title>
</head>
<style>.head {width: 1500px;height: 200px;background: rgb(201, 198, 198);}.zuo {width: 300px;height: 800px;background: orange;float: left;}.gao {width: 100px;height: 300px;background: greenyellow;float: left;position: fixed;left: 100px;}.zhu {width: 900px;height: 800px;background: rgb(223, 196, 179);float: left;}.you {width: 300px;height: 800px;background: orange;float: left;}.yougao {width: 100px;height: 300px;background: greenyellow;float: left;position: fixed;right: 100px;}.wei {float: left;width: 1500px;height: 200px;background: rgb(201, 198, 198);}
</style><body><div class="head">头部内容</div><div><span class="zuo">左侧边栏<span class="gao">左侧广告</span></span><span class="zhu">主体内容</span><span class="you">右侧边栏<span class="yougao">右侧广告</span></span></div><div class="wei">底部内容</div>
</body></html>

【盒子嵌套和基本布局】