前端-盒子模型

夏~辰

已于 2022-04-02 22:58:47 修改

阅读量1.3k

点赞数 2

分类专栏：网安学习之路文章标签： html 前端 css

于 2022-03-28 00:06:28 首次发布

本文链接：https://blog.csdn.net/weixin_52555162/article/details/123783423

版权

网安学习之路专栏收录该内容

15 篇文章 3 订阅

订阅专栏

0x00:

前端学习记录第三话

总结这个系列前面的文章，我发现存在一些逻辑不清楚和冗余的地方，所以我决定尝试换一种方式，希望我的文章能对各位小伙伴们有所帮助

另外我也会不断总结改进，向着更加优秀的方向行进

推荐：

在这里给大家推荐一个浪漫主义的公众号--- 十一点睡，欢迎小伙伴们踊跃关注哦！

0x01:什么是盒模型？

盒子模型：

当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。

比如我们常用的edge搜索页面：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

可以看到我们的页面都是一块一块的，最右边那个黄色的方框就是我们所要学习的盒模型，也是所有页面的基本组成方式，下面让我们一起来学习方框里的每一个元素吧

0x02:内外边距

这里我们需要学习到两个关键词：

我们先来写这样的代码：

<!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>
        div{
            width:100px;
            height:100px;
            /* 给个背景色方便我们能看的清楚 */
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

我做了一下注释，方便一些零基础的小伙伴理解，上面代码产生效果如下：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_10,color_FFFFFF,t_70,g_se,x_16

我们建了一个小盒子

01:padding：内边距

我们来写这样的代码：

<!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>
        div{
            width:100px;
            height:100px;
            /* 给个背景色方便我们能看的清楚 */
            background-color: pink;
            /* 下面开始对内边距进行操作 */
            padding:30px 40px 50px 60px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_13,color_FFFFFF,t_70,g_se,x_16

很明显比刚才大了一圈，这是因为我们加入了内边距，这会改变盒模型的面积：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

由此我们可以看到padding:30px 40px 50px 60px;这串代码时按照顺时针顺序分别对上、右、下、左各个方向进行改变

我们也可以对单个方向进行改变，上面的代码等价于：

padding-left:60px;

padding-right:40px;

padding-top:30px;

padding-bottom:50px;

margin:这是外边距

我们来看这样的代码：

<!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>
        div{
            width:100px;
            height:100px;
            /* 给个背景色方便我们能看的清楚 */
            background-color: pink;
            /* 下面开始对内边距进行操作 */
            /* padding:30px 40px 50px 60px; */
            margin:20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

margin:20px 30px 40px 50px;和内边距一样，这也是按照顺时针方向对盒子的四个方向边距进行改变，我们也可以这样写

margin-top:20px;

margin-bottom:40px;

margin-left:50px;

margin-right:30px;

margin:20px 30px; //这样写就是将上下边距设置为20px,左右边距设置为30px

margin:20px 30px 40px; //这样写就是将上边距设置成20px,将下边距设置为40px,将左右边距都设置成30px

值得注意的是，外边距存在这样的几个特殊现象：

叠压现象：常态下，兄弟标签的上下间距以大值为准

<!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>
        div{
            width:100px;
            height:100px;
            /* 给个背景色方便我们能看的清楚 */
            background-color: pink;
            /* 下面开始对内边距进行操作 */
            /* padding:30px 40px 50px 60px; */
            /* margin:20px 30px 40px 50px; */
        }
        .d1{
            margin-bottom:100px;
        }
        .d2{
            margin-top:150px;
        }
    </style>
</head>
<body>
    <div class="d1">C1</div>
    <div class="d2">C2</div>
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_17,color_FFFFFF,t_70,g_se,x_16

可以看到，c1和c2此时之间的间距是150px,而不是250px

塌陷问题：这个问题我们会经常遇见

<!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>
        div{
            width:100px;
            height:100px;
            /* 给个背景色方便我们能看的清楚 */
            background-color: pink;
            /* 下面开始对内边距进行操作 */
            /* padding:30px 40px 50px 60px; */
            /* margin:20px 30px 40px 50px; */
        }
        /* .d1{
            margin-bottom:100px;
        }
        .d2{
            margin-top:150px;
        } */

        .fa{
            width:300px;
            height:300px;
            background-color: cyan;
        }
        .son{
            margin-top:50px;
        }

    </style>
</head>
<body>
    <!-- <div class="d1">C1</div>
    <div class="d2">C2</div> -->

    <div class="fa">
        <div class="son"></div>
    </div>
    
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

这串代码里面我们本来想让粉红色的儿子块距离青色的父亲块的上边界为50px,但是我们不但没有做到，反而使所有的块都下移了50px,这就是塌陷问题，

造成这个问题的原因是：常态下，父级的第一个子级标签是个块标签，并且使用了margin或者margin-top，

解决方式有三种：

1.在父级标签里面使用overflow:hidden -----这也是我推荐的使用方式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

可以看到问题被解决

2.在父级使用border

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

3.在父级使用padding-top

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

0x03:border边框

border:1px solid tomato;

我们来看看外边距的这串代码：

1px是设置边框的宽度

solid:是设置边框的样式，这里是单线，我们还可以设置成double双线等等

tomato：是设置边框的颜色

同样的我们也可以进行单个的设置：

border-width:1px;

border-style:solid;

border-color:tomato;

这里我们还可以使用boreder-radius来设置圆角效果：

我们来看这样的代码：

<!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>
        div{
            width:100px;
            height:100px;
            /* 给个背景色方便我们能看的清楚 */
            background-color: pink;
            /* 下面开始对内边距进行操作 */
            /* padding:30px 40px 50px 60px; */
            /* margin:20px 30px 40px 50px; */
        }
        /* .d1{
            margin-bottom:100px;
        }
        .d2{
            margin-top:150px;
        } */

        .fa{
            width:300px;
            height:300px;
            background-color: cyan;
            /* overflow:hidden; */
            /* padding-top:50px; */
            border:5px double tomato;
        }
        .son{
            width:100px;
            height:50px;
            margin-top:50px;
            border-radius:50px;
        }

    </style>
</head>
<body>
    <!-- <div class="d1">C1</div>
    <div class="d2">C2</div> -->

    <div class="fa">
        <div class="son"></div>
    </div>
    
</body>
</html>

然后产生效果如下：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_14,color_FFFFFF,t_70,g_se,x_16

我们还可以画个圆：

<!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>
        div{
            width:100px;
            height:100px;
            /* 给个背景色方便我们能看的清楚 */
            background-color: pink;
            /* 下面开始对内边距进行操作 */
            /* padding:30px 40px 50px 60px; */
            /* margin:20px 30px 40px 50px; */
        }
        /* .d1{
            margin-bottom:100px;
        }
        .d2{
            margin-top:150px;
        } */

        .fa{
            width:300px;
            height:300px;
            border-radius: 50%;
            background-color: cyan;
            /* overflow:hidden; */
            /* padding-top:50px; */
            border:5px double tomato;
        }
        .son{
            width:100px;
            height:100px;
            margin:100px 100px;
            border-radius:50px;
        }

    </style>
</head>
<body>
    <!-- <div class="d1">C1</div>
    <div class="d2">C2</div> -->

    <div class="fa">
        <div class="son"></div>
    </div>
    
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

0x04: 怪异盒模型

正常的模型都是向外拓展的，但是怪异盒模型是向内拓展的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>怪异盒模型</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color:cyan;
            margin:10px;

            padding:10px;
            border:10px solid pink;
        }
        .d2{
            /* 怪异盒模型   正常盒模型向外拓展，怪异盒模型向内拓展*/
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSPfui-sA==,size_20,color_FFFFFF,t_70,g_se,x_16

本来d1和d2应该是一样的大小，但是我们使用：border-sizing:border-box把d2设置成了怪异盒模型，使其本来向外拓展的部分全部向内塌陷

End：以上就是这一部分内容，碍于时间限制，这里有很多知识点没有细讲，有兴趣的小伙伴可以深入研究，当然如果你有什么问题，欢迎给我私信

夏~辰

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端-盒子模型

0x00:前端学习记录第三话总结这个系列前面的文章，我发现存在一些逻辑不清楚和冗余的地方，所以我决定尝试换一种方式，希望我的记录能对各位小伙伴们有所帮助另外我也会不断总结改进，争取把每一个知识点写清楚推荐：在这里给大家推荐一个浪漫主义的公众号，希望给小伙伴们能带来一波视觉享受哈哈哈，欢迎小伙伴踊跃关注哦！目录0x00:0x01:什么是盒模型？0x02:内外边距01:padding：内边距0x03:border边框0x04: 怪异盒模...
复制链接

扫一扫