您的位置: 首页  >  文章  >  夜光带你走进 前端工程师（九）

夜光带你走进 前端工程师（九）

分类: 文章 • 2024-12-08 10:06:28

夜光序言：

 

 

你给了她温柔和肩膀依靠，

为何却只教会我强颜欢笑。

 

 

 

 

 

夜光带你走进 前端工程师（九）

 

正文：

 

外边框和中间内容用padding来限制距离

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div{
            width: 600px;
            height:600px;
            background-color: aqua;

        }

    </style>
</head>
<body>
    <div class="div">
         <div class="diva"></div>
         <div class="divb"></div>
    </div>
</body>
</html>

夜光带你走进 前端工程师（九）

下面介绍一个经典布局程序：如何在一个盒子中设置三部分

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div{
            width: 600px;
            height:600px;
            background-color: aqua;
        }
        .diva{
            width:300px;
            height: 300px;
            background-color: aliceblue;
        }
        .divb{
            width: 300px;
            height:300px;
            background-color: #fbcaff;
        }
    </style>
</head>
<body>
    <div class="div">
         <div class="diva"></div>
         <div class="divb"></div>
    </div>
</body>
</html>

夜光带你走进 前端工程师（九）

 

//帅气

 

<style type="text/css">
    .div{
        width: 600px;
        height:600px;
        background-color: aqua;
    }
    .diva{
        float: left;
        width:300px;
        height: 300px;
        background-color: aliceblue;
    }
    .divb{
        float:left;
        width: 300px;
        height:300px;
        background-color: #fbcaff;
    }
</style>

 

灵活思考：这里运用到float这个属性来设置：

 

夜光带你走进 前端工程师（九）

思考：如何居中显示：

在最外边div语句中加入一个 margin:0 auto

.div{
    width: 600px;
    height:600px;
    margin: 0 auto;    //   居中效果
    background-color: aqua;
}

夜光带你走进 前端工程师（九）

.div div{
    padding: 10px; //显示如下效果，为什么呢？,因为距离原因
}

夜光带你走进 前端工程师（九）

.div{
    width: 600px;
    height:600px;
    margin: 0 auto;
    background-color: aqua;
}
.diva{
    float: left;
    width:280px;   //300修改成280即可，完成效果
    height: 280px;        //300修改成280即可，完成效果
    background-color: aliceblue;
}
.divb{
    float:left;
    width: 280px;              //300修改成280即可，完成效果
    height:280px;               //300修改成280即可，完成效果
    background-color: #fbcaff;
}
.div div{
    padding: 10px;          //因为10 所以为20，那么300就应该修改成280即可，完成效果
}

夜光带你走进 前端工程师（九）

看是不是这个效果，应该灵活思考

 

 

 

再来一个：举一反三

 

下面这个是需要三个宽度

夜光带你走进 前端工程师（九）

 

 <style type="text/css">
        .div{
            width: 600px;
            height:600px;
            margin: 0 auto;
            background-color: aqua;
        }
        .diva{
            float: left;
            width:240px;
            height: 240px;
            background-color: aliceblue;
        }
        .divb{
            float:left;
            width: 240px;
            height:240px;
            background-color: #fbcaff;
        }
        .div div{
            margin: 10px;
            padding: 10px;
            border: solid 10px;
        }
    </style>
</head>
<body>
    <div class="div">
         <div class="diva"></div>
         <div class="divb"></div>
    </div>

 

   其中核心部分

 

  <style type="text/css">
        .div{
            width: 600px;
            height:600px;
            margin: 0 auto;
            background-color: aqua;
        }
        .diva{
            float: left;
            width:240px;  //为何240，因为20【三个宽度】*3=60
            height: 240px;        //为何240，因为20【三个宽度】*3=60
            background-color: aliceblue;
        }
        .divb{
            float:left;
            width: 240px;        //为何240，因为20【三个宽度】*3=60
            height:240px;             //为何240，因为20【三个宽度】*3=60
            background-color: #fbcaff;
        }
        .div div{         //为何240，因为20【三个宽度】*3=60
            margin: 10px;   
            padding: 10px;
            border: solid 10px;
        }
    </style>

 

 

 

相关推荐