CSS盒模型【框模型】（详解）

最新推荐文章于 2020-11-17 21:04:35 发布

搞前端的小菜

最新推荐文章于 2020-11-17 21:04:35 发布

阅读量510

点赞数

分类专栏： HTML+CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46726346/article/details/107878184

版权

HTML+CSS 专栏收录该内容

8 篇文章 12 订阅

订阅专栏

关于CSS的最后一点，就是盒模型了，也叫CSS的框模型。
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
在这里插入图片描述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式，在之前的例子中也有说过。
提示：背景应用于由内容和内边距、边框组成的区域。

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

一、CSS 内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

我们来举个例子：

    <!-- 内边距 -->
    <style>
        #pad{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
        }
    </style>
<body>
    <div id="pad">div1</div>
</body>

这样就是一个div，并且让他的文字处在中间的位置；
在这里插入图片描述
我们再来看一下它的盒模型。

可以看到只有内容区域是100*100；然后有1px的border；
现在我们来设置一下它的内边距。

    <style>
        #pad{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
            padding:10px
        }
    </style>

然后我们再来看一下效果：
在这里插入图片描述

盒模型中会有一个10px的padding，并且我们的div也变大了10px；
如果这个时候我们加了一个背景颜色，会是什么效果呢。

    <style>
        #pad{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: chartreuse;
            text-align: center;
            line-height: 100px;
            padding:10px
            
        }
    </style>

在这里插入图片描述
那，可以看到，背景会充满内容+内边距。
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left

内边距的百分比数值
前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

这里就不一一演示了。
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度

二、CSS 边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

边框的样式
样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

例如，您可以为把一个div的边框定义为 outset，使之看上去像是“凸起按钮”：

    <!-- 边框 -->
    <style>
        #bod{
            width: 100px;
            height: 100px;
            border-style: outset;
        }
    </style>
<body>
    <div id="pad">div1</div>
    <br>
    <div id="bod">div2</div>
</body>

我们来看一下效果：
在这里插入图片描述
定义多种样式
您可以为一个边框定义多个样式，例如：

p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。
在这里插入图片描述
定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：

border-top-style
border-right-style
border-bottom-style
border-left-style

边框的宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

   <style>
        #bod{
            width: 100px;
            height: 100px;
            border-style: outset;
            border-width: 5px;
        }
    </style>

您也可以通过下列属性分别设置边框各边的宽度：

border-top-width
border-right-width
border-bottom-width
border-left-width

边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。

可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值

    <style>
        #bod{
            width: 100px;
            height: 100px;
            border-style: outset;
            border-width: 5px;
            border-color: chartreuse;
        }
    </style>

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：

border-top-color
border-right-color
border-bottom-color
border-left-color

三、CSS 外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

    <!-- 外边距 -->
    <style>
        #mar{
            width: 100px;
            height: 100px;
            background-color: crimson;
            
        }
    </style>
<body>
    <div id="pad">div1</div>
    <br>
    <div id="bod">div2</div>
    <div id="mar">div3</div>
</body>

我们再定义一个div3，然后给他加点样式。
在这里插入图片描述
现在我们给它加上外边距。

    <style>
        #mar{
            width: 100px;
            height: 100px;
            background-color: crimson;
            margin: 50px;
        }
    </style>

在这里插入图片描述
可以看出它好像是，动了。其实他不是动了，而是变大了。
我们来看一下他的盒模型：

可以看到最外面的margin都加了50px，所以看起来像动了一样。
您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

margin-top
margin-right
margin-bottom
margin-left

四、CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
我们用例子来说明：

    <!-- 外边距合并 -->
    <style>
        #top,#bot{
            width: 200px;
            height: 200px;
        }
        #top{
            background-color:cyan;
            margin-bottom: 50px;
        }
        #bot{
            background-color: darkblue;
            margin-top: 100px;
        }
    </style>
<body>
    <div id="pad">div1</div>
    <br>
    <div id="bod">div2</div>
    <div id="mar">div3</div>
    <div id="top">div4</div>
    <div id="bot">div5</div>
</body>

只看div4和div5就好了。
我给div4加了一个下面的外边距50px；
div5加了一个上面的外边距150px；
那理论上来说是不是应该两个div可见部分应该相距150px；
但事实不是这样的：
在这里插入图片描述
中间是100px，所以这就叫外边距合并，再100和50中选一个大的。

就像这样。

OK，关于CSS的盒模型就这些吧，以后有其他的在进行补充，关于html+css的也全部整理完了。
最后再附上笔记吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
    <!-- 内边距 -->
    <style>
        #pad{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: chartreuse;
            text-align: center;
            line-height: 100px;
            padding:10px
            
        }
    </style>
    <!-- 边框 -->
    <style>
        #bod{
            width: 100px;
            height: 100px;
            border-style: outset;
            border-width: 5px;
            border-color: chartreuse;
        }
    </style>
    <!-- 外边距 -->
    <style>
        #mar{
            width: 100px;
            height: 100px;
            background-color: crimson;
            margin: 50px;
        }
    </style>
    <!-- 外边距合并 -->
    <style>
        #top,#bot{
            width: 200px;
            height: 200px;
        }
        #top{
            background-color:cyan;
            margin-bottom: 50px;
        }
        #bot{
            background-color: darkblue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="pad">div1</div>
    <br>
    <div id="bod">div2</div>
    <div id="mar">div3</div>
    <div id="top">div4</div>
    <div id="bot">div5</div>
</body>
</html>