前端实训之-----盒子模型（附习题）

最新推荐文章于 2023-04-20 09:28:31 发布

智商欠费不死也废i

最新推荐文章于 2023-04-20 09:28:31 发布

阅读量2.4k

点赞数 8

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_45174301/article/details/121776551

版权

一、网页布局的过程

二、盒子模型的组成（Box Model)

border 边框content 内容padding 内边距margin 外边距

一、网页布局的过程

先准备好相关的网页元素，网页元素基本都是盒子box
利用css设置好样式，摆放到合适的位置上去
往盒子里面装内容
本质就是利用css摆放盒子

二、盒子模型的组成（Box Model)

border 边框
content 内容
padding 内边距
margin 外边距

三、边框border

边框有三部分组成：宽度、样式、颜色
border-width:单位一般是px
border-style：solid、dotted、dashed、double
border-color：颜色

边框的复合写法

border：1px solid red ;没有顺序

边框分开写法：

border-top:1px solid red;//只设定上边框，其余的同理
border-bottom:10px dashed purple
边框会影响实际盒子的大小
padding 内边距
边框和内容区之间的距离
padding-left
padding-right
padding-top
padding-bottom

padding简写：

1、一个值：上下左右
2、两个值：上下、左右
3、三个值：上，左右，下
4、四个值：上、右、下、左

padding也会影响盒子的实际大小

margin 外边距，控制黑子和盒子之间的距离
margin-left
margin-right
margin-top
margin-bottom
margin的简写意义和padding完全一样

块级元素水平居中

margin:0 auto

行内元素和行内块元素的水平居中：给父元素添加text-align:center

相邻块元素垂直外边距合并：
当上下相邻的两个块元素（兄弟关系）相遇时，如果过上面的元素的有margin-bottom,下面的元素有上外边距margin-top,
则他们之间的垂直距离不是两者之和，而是取较大的那个值，这就是相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：
1、为父元素设置上外边框
2、为父元素设置上内边距
3、为父元素设置overflow:hidden

清除内外边距:

*{
margin:0;
padding:0;
}

四、盒子模型练习题

1、制作婚纱首页

<!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>
    <style>
        .box1 {
            width: 700px;
            float: left;
            text-align: center;
            border: 5px solid white;
        }
        
        .box2 {
            width: 1500px;
            float: left;
            text-align: center;
            border: 5px solid white;
        }
        
        .box3 {
            background-color: gray;
            color: white;
            width: 100px;
            float: left;
            border: 5px solid white;
        }
        
        .box4 {
            width: 490px;
            height: 200px;
            float: left;
            border: 5px solid white;
        }
        
        .box5 {
            width: 490px;
            border: 5px solid white;
            background-color: whitesmoke;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box3">艺术摄影</div>
        <div class="box3">婚纱摄影</div>
        <div class="box3">纪实摄影</div>
        <div class="box3">儿童摄影</div>
        <div class="box3">摄影器材</div>
        <div class="box3">创意摄影</div>
    </div>
    <div class="box2">
        <img src="C:\Users\高\Desktop\实训\images/objpic07.jpg" alt="" class="box4">
        <img src="C:\Users\高\Desktop\实训\images/objpic02.jpg" alt="" class="box4">
        <img src="C:\Users\高\Desktop\实训\images/objpic03.jpg" alt="" class="box4">
        <div class="box5">
            摄影艺术
        </div>
        <div class="box5">
            摄影艺术
        </div>
        <div class="box5">
            摄影艺术
        </div>
        <img src="C:\Users\高\Desktop\实训\images/objpic04.jpg" alt="" class="box4">
        <img src="C:\Users\高\Desktop\实训\images/objpic05.jpg" alt="" class="box4">
        <img src="C:\Users\高\Desktop\实训\images/objpic06.jpg" alt="" class="box4">
        <div class="box5">
            摄影艺术
        </div>
        <div class="box5">
            摄影艺术
        </div>
        <div class="box5">
            摄影艺术
        </div>
        <img src="C:\Users\高\Desktop\实训\images/objpic01.jpg" alt="" class="box4">
        <img src="C:\Users\高\Desktop\实训\images/objpic08.jpg" alt="" class="box4">
        <img src="C:\Users\高\Desktop\实训\images/objpic09.jpg" alt="" class="box4">
        <div class="box5">
            摄影艺术
        </div>
        <div class="box5">
            摄影艺术
        </div>
        <div class="box5">
            摄影艺术
        </div>
    </div>
</body>

</html>

运行结果展示：

2、盒子练习（首页布局）

<!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>
    <style>
        .box1 {
            background-color: rgb(133, 139, 133);
            text-align: center;
            width: 1500px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .box2 {
            background-color: rgb(228, 195, 11);
            width: 400px;
            height: 1000px;
            float: left;
        }
        
        .box3 {
            background-color: rgb(228, 195, 11);
            width: 400px;
            height: 1000px;
            float: right;
        }
        
        .box4 {
            background-color: wheat;
            width: 700px;
            height: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .box5 {
            background-color: greenyellow;
            width: 100px;
            height: 300px;
            margin: auto;
            margin-top: 50px;
            position: fixed;
            left: 100px;
        }
        
        .box6 {
            background-color: greenyellow;
            width: 100px;
            height: 300px;
            margin: auto;
            margin-top: 50px;
            position: fixed;
            right: 100px;
        }
    </style>


    <body>
        <div class="box1">头部内容</div>
        <div class="box2">左侧边框</div>
        <div class="box5">左侧广告</div>
        <div class="box3">右侧边框</div>
        <div class="box6">右侧广告</div>
        <div class="box4">主题内容</div>

    </body>