CSS盒模型

2021/9/14 23:07:58

编程Tag： css 元素模型边框 width border margin padding

本文主要是介绍CSS盒模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS盒模型

在css中，所有元素都被一个个盒子 box 所包围。

一、两种常用盒子

在了解盒模型前，需要知道盒模型所针对的两种常用盒子，块级盒子（block box） 和 内联盒子（inline box）。

1.内部和外部显示类型

css的box模型有一个外部显示类型，来决定盒子是块级还是内联，另一个内部显示类型决定了该盒子内部元素的布局，常用display属性来修改盒子的显示类型。

1.1外部显示类型

display属性的下列取值，用于改变元素的外部显示类型：

block 该值会生成一个块级盒子，即该元素会被设为块级元素。
inline 该值会生成一个内联盒子，即该元素会被设为行内元素。
inline-block

1.2内部显示类型

display属性的下列取值，用于改变元素的内部显示类型：

flex 设置该值的元素，元素本身将表现为一个块级元素，而其内部元素将会根据flex布局模型的特性进行布局排列。
grid 设置该值的元素，元素本身将表现为一个块级元素，而其内部元素将会根据grid布局模型的特性进行布局排列。

2.常见的块级和行内元素（盒子）

2.1块级元素

dl、dt、div、form、h1~h6、p、ol、ul、li、hr
html5新增：article、aside、header、footer、nav、section、audio、vedio

2.2行内元素

b、big、i、small、tt
abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var
a、bdo、br、img、map、object、q、script、span、sub、sup
button、input、label、select、textarea

3.块级和内联盒子的区别

3.1块级盒子的特征

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
盒子会独占一行
width和height属性能够发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开

3.2内联盒子的特征

盒子不会独占一行
width和height属性不会发挥作用
垂直方向的内边距、外边距以及边框会被应用但是不会把其他盒子推开（包括块级盒子）

<!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>
        div {
            background-color: darkblue;
            margin: 20px;
        }
        span {
            background-color: darkcyan;
            padding: 30px;
        }
    </style>
</head>

<body>
    <div>123</div>
    <span>456</span>
</body>

</html>

效果如图

水平方向的内边距、外边距以及边框会被应用且会把其他内联盒子推开

二、CSS盒模型

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。此外，盒模型有两种形式：标准的和替代（IE）的。

1.盒模型的组成

1.1各个组成部分

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置
Border box: 边框盒包裹内容和内边距。大小通过 ==border ==相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过== margin ==相关属性设置

1.2包含块

一个元素的尺寸和位置经常受其包含块(containing block)的影响。包含块通常是这个元素最近的祖先块级元素的内容区，但不总是这样。
确定一个元素的包含块，由该元素的position属性决定：

如果position的值为static、relative和sticky时，包含块可能由它的最近的祖先块元素（比如说inline-block,
block 或 list-item元素）的内容区的边缘组成，也可能会建立格式化上下文(比如说 a table container,
flex container, grid container, 或者是 the block container 自身)。
如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static的祖先元素的内边距的边缘组成。
如果 position 属性是 fixed，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。
如果 position 属性是 absolute 或 fixed，包含块也可能是由属性transform或perspective的值不是none的最近祖先元素的内边距的边缘组成。

1.3Content box

1.width 设置盒子的宽度，默认值为auto

width的%：定义基于包含块宽度的百分比宽度，会突破父级的限制
width的auto：尽量被父级包裹，即width+padding+border+margin = 包含块的width

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #dcdcdc;
        }

        .box {
            width: 400px;
            border: 3px solid red;
            padding: 0 50px;
        }

        .box1 {
            width: auto;
            height: 100px;
            background: pink;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }

        .box2 {
            width: 100%;
            height: 100px;
            background: gold;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>

</html>

2.height 设置盒子的高度，默认值为auto

height的%：定义基于包含块（父元素）高度的百分比宽度，会突破父级的限制
height的auto：尽量被父级包裹，由内容区中的内容的高度决定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #dcdcdc;
        }

        .box {
            width: 400px;
            border: 3px solid red;
            padding: 0 50px;
        }

        .box1 {
            width: auto;
            height: 100px;
            background: pink;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }

        .box2 {
            width: 100%;
            height: 100px;
            background: gold;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>

</html>

1.4Padding

1.一个元素的内边距区域指的是其内容与其边框之间的空间。
2.使用padding属性控制元素的内边距大小，取值不能为负

当只指定一个值时，该值会统一应用到全部四个边的内边距上。
指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

3.padding值的类型

具体数值，例如20px
百分比，相对于包含块的宽度

4.padding为下列属性的简写：

padding-left、padding-top、padding-right、padding-bottom

1.5Border

1.border属性用于设置元素所有边框，是border-color、border-style、border-width的简写属性。

border：width style color，例如：border：2px solid #ccc，值的顺序没有严格要求，且可以省略
如果省略style，边框将无法显示

2.可以使用以下属性为每条边框设置不同的样式，用法类似于border

border-top：上边框，为border-top-width、border-top-style、border-top-color属性的简写属性
border-right：右边框，同上
border-bottom：下边框，同上
border-left：左边框，同上

3.border-width
(1) 指定一个明确的值

当给定一个值时，该值作用于选定元素的所有边框，例：border-width: 5px;
当给定两个值时，该值分别依次作用于选定元素的横边与纵边，例：border-width: 5px 10px;
当给定三个值时，该值分别依次作用于选定元素的上横边、纵边、下横边，例：border-width: 5px 10px 12px;
当给定四个值时，该值分别依次作用于选定元素的上横边、右纵边、下横边、左纵边（即按顺时针依次作用），例：border-width: 5px 10px 12px 13px;

(2) 使用全局关键字

inherit：继承
initial：初始值
unset：不设置

(3) 使用作用于 border-width 的关键字

thin：细边框
medium：中等边框
thick：宽边框

4.border-style
(1) 指定不同数目的值

当给定一个值时，该值作用于选定元素的所有边框，例：border-style: solid;
当给定两个值时，该值分别依次作用于选定元素的横边与纵边，例：border-style: solid dashed;
当给定三个值时，该值分别依次作用于选定元素的上横边、纵边、下横边，例：border-style: solid dotted dashed;
当给定四个值时，该值分别依次作用于选定元素的上横边、右纵边、下横边、左纵边（即按顺时针依次作用），例：border-style: none solid dashed dotted;

(2) 可选值

none：不显示边框，在这种情况下，如果没有设定背景图片，border-width 计算后的值将是0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
hidden：不显示边框，与none类似，不同在于，在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。

<!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>
        table {
            width: 100px;
            height: 40px;
            border: 2px solid red;
            border-collapse: collapse;
        }

        .b1 {
            border-style: none;
        }

        .b2 {
            border-style: dotted;
        }

        .b3 {
            border-style: hidden;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td class="b1">none</td>
            <td class="b2">dotted</td>
            <td class="b3">hidden</td>
        </tr>
    </table>
</body>

</html>

效果如图

dotted：显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。
dashed：显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
solid：显示为一条实线。
double：显示为一条双实线，宽度为border-width

5.border-color

确定border的颜色。如果这个值没有设置，它的默认值是元素的color属性值（是文字颜色而非背景色）

6.border-image
(1) 用于在元素边框上绘制图像或实现渐变效果，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式，然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。
(2) border-image是下列属性的简写形式

border-image-source：指定用于绘制边框图像的位置
border-image-slice：将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
border-image-width：设置图像边框的大小
border-iamge-outset：定义边框图像可超出边框盒的大小
border-iamge-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）

(3) border-image的用法，即border-image: source slice width outset repeat|initial|inherit;

<!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>
        #gradient {
            border: 30px solid;
            border-image: linear-gradient(red, yellow) 10;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="gradient">The image is stretched to fill the area.</div>
</body>

</html>

效果如下

1.6Margin

1.使用margin属性控制元素的外边距大小，取值可以为负

当只指定一个值时，该值会统一应用到全部四个边的外边距上。
指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

2.margin值的类型

具体数值，例如20px
百分比，相对于包含块的宽度
auto，让浏览器自己选择一个合适的外边距，常用用于让元素居中

3.margin为下列属性的简写：

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

4.外边距重叠
(1) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
(2) 有三种情况会形成外边距重叠：

同一层相邻元素之间：相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix清除浮动。如下，两个div之间的外边距只有50px。

<!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>
        div {
            height: 100px;
            width: 500px;
            margin: 50px 0;
        }

        div:first-child {
            background-color: darkcyan;
        }

        div:nth-child(2) {
            background-color: darkgoldenrod;
        }
    </style>
</head>

<body>
    <div>123</div>
    <div>456</div>
</body>

</html>

没有内容将父元素和后代元素分开：没如果没有边框，内边距，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
a.上边界重叠

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上边界重叠</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: darkgoldenrod;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: darkmagenta;
            margin: 20px 0;
        }

        .outer {
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
    </style>
</head>

<body>
    <div class="outer"></div>
    <div class="father">
        <div class="son">123</div>
    </div>
</body>

</html>

b.下边界重叠，父元素不设置高度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上边界重叠</title>
    <style>
        .father {
            width: 300px;
            background-color: darkgoldenrod;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: darkmagenta;
            margin-bottom: 20px;
        }

        .outer {
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">123</div>
    </div>
    <div class="outer"></div>
</body>

</html>

在这里插入图片描述

空的块级元素：当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框、内边距、高度、最小内容设定为inline的时候。

<!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>
        .box {
            width: 300px;
            height: 100px;
            background-color: darkmagenta;
        }

        .test {
            margin: 100px 0;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="test"></div>
    <div class="box"></div>
</body>

</html>

设为浮动和绝对定位的元素不会发生外边距折叠问题

5.margin为下列属性的简写：

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

2.标准盒模型

在标准盒模型中，设置的width和height属性是给content box，不包括border和padding
margin 不计入实际大小，虽然它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止不会延伸到margin
下面盒子的宽高为，宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

3.IE（替代）盒模型

在IE盒模型中，设置的width和height属性不仅包括content box，还包括border和padding
默认浏览器会使用标准模型。如果需要使用替代模型，可以通过为其设置 box-sizing: border-box；来实现。
下面盒子内容区的宽度 = 290px (350 - 25 - 25 - 5 - 5)，高度 = 90px (150 - 25 - 25 - 5 - 5)，盒子的宽高就为width和height

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

参考

CSS中width和height的默认值auto与%案例详解：https://www.jb51.net/css/747255.html
MDN盒模型：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

这篇关于CSS盒模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS盒模型

CSS盒模型

一、两种常用盒子

1.内部和外部显示类型

1.1外部显示类型

1.2内部显示类型

2.常见的块级和行内元素（盒子）

2.1块级元素

2.2行内元素

3.块级和内联盒子的区别

3.1块级盒子的特征

3.2内联盒子的特征

二、CSS盒模型

1.盒模型的组成

1.1各个组成部分

1.2包含块

1.3Content box

1.4Padding

1.5Border

1.6Margin

2.标准盒模型

3.IE（替代）盒模型

参考

相关编程文章