19、CSS基础——盒模型以及块盒的组成部分

lvh98

已于 2022-08-02 16:19:17 修改

阅读量498

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html html5

于 2021-10-13 16:54:52 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/120747547

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

1. 盒子类型(display)

1.行盒，display等于inline的元素
2.块盒，display等于block的元素

之前在文本元素的span元素部分提到过块级元素和行级元素：
1.以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级（行内）元素）；
2.现在：到了HTML5，已经弃用这种说法。“块级”类别大致相当于HTML5当中的流内容类别，而“行内”类别相当于措辞内容类别。
是否独占一行，完全可以用CSS语言来设置。

行盒在页面中不换行，块盒独占一行。

display默认值为inline。也就是说，如果浏览器默认样式表中没有写出display的值，那么这个元素的盒模型为行盒。

浏览器中默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

各个元素在样式表中display的值可以修改，上面所说的常见的行盒或块盒不过是该元素在浏览器的默认样式表中的display值为inline或block。

例如：下面程序给出了h1、div、p、span元素

<!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>Document</title>
</head>
<body>
    <h1>
        h1：Lorem, ipsum dolor.
    </h1>

    <div>
        div：Lorem, ipsum dolor sit amet consectetur adipisicing.
    </div>

    <p>
        p：Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates minus recusandae ex!
    </p>

    <span>
        span：Lorem ipsum dolor sit.
    </span>

    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
    <span>span5</span>
    
</body>
</html>

默认效果：

可以看到，h1、div、p元素独占一行，span元素不换行。

如果我们给h1、div、p添加样式display: inline;，给span添加样式display: block;，如下：

<!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>Document</title>
    <style>
        h1{
            display: inline;
        }
        div{
            display: inline;
        }
        p{
            display: inline;
        }
        span{
            display: block;
        }
    </style>
</head>
<body>
    <h1>
        h1：Lorem, ipsum dolor.
    </h1>

    <div>
        div：Lorem, ipsum dolor sit amet consectetur adipisicing.
    </div>

    <p>
        p：Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates minus recusandae ex!
    </p>

    <span>
        span：Lorem ipsum dolor sit.
    </span>

    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
    <span>span5</span>
    
</body>
</html>

显示效果则变为：
display更改
可以看到，原本独占一行的元素不再不占一行，原本不换行的的元素现在独占一行。

2. 盒子的组成部分（对于块盒）

无论使行盒还是块盒，都由下面几个部分组成，从内到外分别是：

盒模型

2.1 内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的

内容盒 content-box

2.2 填充（内边距） padding

盒子边框到盒子的距离

padding-left、padding-right、padding-top、padding-bottom(左右上下内边距)，默认值为0。

padding：简写（速写属性）属性，

padding:上右下左（顺序）;

padding: 50px 40px 30px 20px;

相当于

padding-top: 50px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 20px;

如果padding只写一个值，那么上下左右的距离一样。

如果padding写了两个值，前面的值控制上下，后面的值控制左右。

padding: 50px;

相当于

padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;

又比如：

padding: 50px 40px;

相当于

padding-top: 50px;
padding-right: 40px;
padding-bottom: 50px;
padding-left: 40px;

填充区+内容盒 = 填充盒 padding-box

2.3 边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style
边框宽度：border-width
边框颜色：border-color

边框样式border-style默认值为none，在border-style: none;的情况下，就算设置了边框宽度和颜色，页面上也是不显示边框的。

常用的边框样式：none、solid（实线）、dashed（虚线）、dotted（圆点）、double（双实线）、hidden（隐藏）等。

border-width的默认值是0。

在不设置边框颜色的情况下，若边框样式不是none，即边框是显示的，那么边框的颜色默认和内容盒中的字体颜色一致。当设置过边框颜色后，边框颜色为设置值。

上面三个都是简写属性，可以分开设置四个边的样式。

若四个边的样式、颜色、宽度一样，则可以使用简写属性border。

例如

border: solid 10px red;

相当于

border-style: solid;
border-width: 10px;
boeder-color: red;

更具体一点，相当于

border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;

border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;