web进阶之八:盒子模型1，内外边距边框和垂直重叠

作者: 甚得朕心 | 来源:发表于2018-09-10 19:02 被阅读3次

在有的编程语言中有这么一句话：一切皆对象。

其实在网页中“一切皆是盒子”

盒子

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。

为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

盒子模型

一个盒子我们会分成几个部分：

内容区(content) 放东西用
内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。
内边距(padding)
顾名思义，内边距指的就是元素内容区与边框以内的空间。
边框(border)
可以在元素周围创建边框，边框是元素可见框的最外部。
外边距(margin)
外边距是元素边框与周围元素相距的空间。

这个要熟记。

图片1.png

首先我们来画个盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <title>边框</title>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1{  
            /*宽度和背景颜色，就是给内容区contene设置大小
            在box1的外面就是body
            */
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*如果要给盒子加边框的话，
            边框的宽度默认值为极细，颜色默认为黑色。
            但是边框的样式极border-style必须要写.
            */
            border-width: 10px;
            /*
            使用border-width可以分别指定四个边框的宽度
            如果在border-width指定了四个值
                则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的
            如果指定三个值
                则三个值会分别设置给上、左右、下。（这个是相对对称）
            如果指定两个值
                则两个值会分别设置给上下、左右
            如果指定一个值，则四边全都是该值
            除了border-width，CSS中还提供了四个border-xxx-width
                xxx的值可能是top right bottom left
                专门用来设置指定边的宽度
            */
            border-color: red;
            /*边框的颜色也能和边框的宽度一样的设置*/
            border-style:solid;
            /*设置边框的样式style：
                可选值：
                    none 默认值，没有边框
                    dotted（点线）
                    dashed（虚线）
                    solid（实线）
                    double（双线）
                    groove（槽线）
                    ridge（脊线）
                    inset（凹边）
                    outset（凸边）
            */
            /*由于这样也会觉得麻烦，所以这里也有简单的形式
            border: 颜色 宽度 样式;
            */
    }
    .box2{
        width: 50px;
        height: 50px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"><!-- fds --></div>
    </div>
</body>
</html>

盒子套了一个盒子

盒子.JPG

内边距

内边距这里有点意思了，有一个应该特别注意，不然会想不明白。

内边距会影响整个盒子的大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /*设置边框*/
            border: 10px red solid;
            /*
            内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：
                padding-top
                padding-right
                padding-bottom
                padding-left
            内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

            盒子的大小由内容区、内边距和边框共同决定
            盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
            盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
            */
            /*设置上内边距*/
            /*padding-top: 100px;*/
            /*设置右内边距*/
            /*padding-right: 100px;
            padding-bottom: 100px;
            padding-left: 100px;*/
            /*
            使用padding可以同时设置四个边框的样式，规则和border-width一致
            */
            /*padding: 100px;*/
            /*padding: 100px 200px;*/
            /*padding: 100px 200px 300px;*/
            /*padding: 100px 200px 300px 400px;
            修改内边距的时候，会影响整个盒子的大小
            即当你设置的内边距大于盒子的时候，就会撑开盒子，改变了盒子的大小。
            */
            padding: 10px;
        }
        /*创建一个子元素box2占满box1*/
        .box2{
            /*width: 100%;*/
            /*height: 100%;*/
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

请注意看代码中注释的内容。

外边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

盒子有四个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px solid red;
            /*设置上外边距，即盒子的上边框与其他盒子的距离*/
            /*margin-top: 100px;*/
            /*左外边距*/
            /*margin-left: 100px;*/
            /*设置右和下外边距*/
            /*margin-right: 100px;
            margin-bottom: 100px;*/
            /*外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动 ，
            不论上面是边框还是盒子，都会移动我设置的距离，或者移除边框或者重叠盒子*/
            /*margin-left: -100px;
            margin-top: -100px;
            margin-bottom: -100px;*/
            /*margin-bottom: -100px;*/
            /*
            margin还可以设置为auto，auto一般只设置给水平方向的margin
            如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
            垂直方向外边距如果设置为auto，margin-top: auto，则外边距默认就是0---》这个要注意
            如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中
            所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
            */
            /*margin-left: auto;
            margin-right: auto;
            /*
            外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样
            */
            /*margin: 10px 20px 30px 40px;*/
            margin: 0 auto;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

外边距的重叠

当我们在设置外边距的时候，会遇到一个重叠的问题，有垂直方向的重叠和父子元素的相邻重叠。

垂直方向的重叠

<!-- 垂直方向的重叠 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边框重叠</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            /*设置一个下外边距*/
            margin-bottom: 100px;
        }
        /*当我给box1设置一个下外边距同时也给box2设置一个上外边距的时候，
        就会发现其实变化和设置单一的外边距是一样的*/
        /*因为这里会涉及一个垂直外边距的问题，即:
        在网页中相邻的垂直方向的外边距会发生外边距的重叠
        所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
        */
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
                /*这里垂直方向设置外边距的时候，如果上下数值的一样的，那么一个就行，如果数值不一样，会取最大值，而不是相加*/
            /*margin-top: 100px;*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

父子元素的外边距重叠

<!-- 父子元素的外边距重叠 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边框重叠之父子元素的重叠</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
       /*
        如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
        */
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 100px;
        }
    </style>
</head>
<body>
        <div class="box1">
            <div class="box2"></div>
        </div>
</body>
</html>

那么如何解决不让父子元素出现这个问题呢？
其实在我们的注释中可以看出，出现上面的问题的一个必要条件就是相邻，所以我们不让它们相邻就可以了。

<body>
<div class="box1">
a
<div class="box2"></div>
</div>
</body>
我们在box1下面加了一个a效果虽然是子元素自己移动但是我们看的出，很难看，而且也用不上，本身a也是有默认高度的。

加a的效果.JPG
给父类元素设置一个上边框或者上内边距

.box1{
            width: 200px;
            height: 199px;
            background-color: red;
            /*border-top:1px blue solid;*/
            padding-top: 1px;
        }

同时需要注意的是，由于我们设置的高度原本是200px如果在加一个上边框或者上内边距的时候，其实box2还是超出的边界，只是我们肉眼看不出，所以这里我把高度改为了199px，这样就可以了。

有任何问题请给我留言，或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。

web进阶之八:盒子模型1，内外边距边框和垂直重叠

盒子

盒子模型

内边距

外边距

外边距的重叠

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

web进阶