【盒子嵌套和基本布局】

最新推荐文章于 2023-07-12 10:43:27 发布

今夜鸣风

最新推荐文章于 2023-07-12 10:43:27 发布

阅读量1w

点赞数 9

分类专栏：菜鸟学习前端文章标签： css html

本文链接：https://blog.csdn.net/akisi/article/details/121771365

版权

菜鸟学习同时被 2 个专栏收录

56 篇文章 7 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

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

定义两个盒子的样式之后，在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>

今夜鸣风

关注

9
点赞
踩
72

收藏

觉得还不错? 一键收藏
0
评论
【盒子嵌套和基本布局】

首先是盒子嵌套的一般步骤：定义两个盒子的样式之后，在body里面这样写： <div class="zuo">大盒子 <div class="gao">小</div> </div>这样大盒子就可以包裹住小盒子了，例如：这个盒子嵌套的代码如下：<!DOCTYPE html><html lang="en"><head> <met...
复制链接

扫一扫