CSS：盒子模型

盒子的概念

我的的HTML的网页布局是使用一种矩形的方式来作为基础，先设立一段矩形，然后往这个矩形中添加我们所需的内容，从而达到我们对网页的布局。

边框的构成

在后面的内容中，我们会对边框的大小，内边距，外边距大小的控制进行讲解

我们来用<div></div>来查看一下

我们可以发现<div></div>所占用的边框和<html></html>占有的边框不同，<html></html>包含了<div></div>的边框，这种边框在CSS里面称为盒子

盒子的控制

我们可以通过<style></style>来控制盒子的大小，位置，风格

一般我们的盒子我们是看不到的，但是我们可以通过修改参数来使盒子更加直观

边框大小的控制

border-style

border-style用于定义盒子的边框，一般默认是不会显示的。

使用格式

复制代码

border-style:solid;

border-style常用参数有以下几种

|--------|------|
| 模式 | 作用 |
| soild | 边框实线 |
| dotted | 边框点线 |
| dashed | 边框虚线 |
| groose | 边框细线 |

这里的border-style还有其它的参数，我们就不一一演示了

border-color

border-color用于定义边框的颜色，一般默认是黑色。

使用格式

复制代码

border-color: red;

border-color参数没有什么特别的，就是颜色，会懂得每个颜色的英文名是什么就可以直接用了

border-width

border-width用于定义边框的粗细。单位是px，一般默认单位是2px

使用格式

复制代码

border-width: 2px;

border

border用于对边框设置的简写，有三个参数，书写必须有序

使用格式

复制代码

border: 2px black solid;

这里我们缩短篇幅只演示一下border的用法代码

演示代码

复制代码

<!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>
        .One{
            border: 2px black solid;
        }
    </style>
</head>
<body>
    <div class="One">
        !!!Hello,World!!!
        !!!Hello,World!!!
    </div>
</body>
</html>

演示结果

内边距大小的控制

内边距就是文本内容和边框在边框内部间隔的距离

使用格式

复制代码

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

其中下面四个格式是用来修改某个方向的内边框距，padding是修改所有方向的内边框距离

浏览器提供了用于我们观察盒子数据的调试

在这张图中，我们可以看到内边距全都为'-'也就是零，而这里的本文和边框的距离是零

当我们将所有内边框距离修改为10px时，演示结果如下

这里的内边距被修改成了10，但是修改的代价时边框变大了，文本是不会变小的

CSS盒子类型content-box和border-box

改变盒子类型格式

复制代码

box-sizing: border-box;

content-box：保持文本部分的盒子大小不变，更改内边距的大小时，通过改变整体边框的大小来给改变内边距提供空间

border-box：保持整体边框大小不变，通过改变本文边框的大小来给改变内边框大小提供条件

注意，使用border-box模式时，必须设置好边框的大小，否则还是content-box模式

外边距大小控制

外边距大小控制使用到的是margin，控制单位为px

使用格式

复制代码

margin:2px

这里我们就来展示一下margin的使用示例就可以了吧

这里当我们将margin的参数调大时，文本边框的间距也会跟着调大，而且它们互相之前还会发生嵌套

嵌套块元素垂直外边距塌陷

当我们定义全局外边距时，是非常容易有这种嵌套发生的，往往这种情况容易出现错误

演示代码

复制代码

<!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>
        .One{
            height: 200px;
            width: 200px;
            background-color: aqua;
            margin: 40px;
        }
        .two{
            height: 50px;
            width: 50px;
            background-color: black;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="One"><div class="two"></div>
    </div>
</body>
</html>

演示结果

这里面的黑色区域并没有和外面的蓝色区域保持外边距为20px 这就是塌陷的情况

对于两个嵌套的父子块元素，当他们都有上外边距时，父块元素会选择它们两其中一个最大的值作为它的上外边距，而子块元素的上外边距为0

遇到这种问题有两种解决方式

1.删除字块元素的上外边距，父块元素设置边框大小

2.删除子块元素的上外边距，父块元素设置内边距大小

演示代码

复制代码

<!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>
        .One{
            height: 180px;
            width: 180px;
            background-color: aqua;
            border: 20px aqua solid;
        }
        .two{
            height: 50px;
            width: 50px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="One"><div class="two"></div>
    </div>
</body>
</html>

演示结果

演示代码

复制代码

<!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>
        .One{
            height: 200px;
            width: 200px;
            background-color: aqua;
            padding: 20px;
        }
        .two{
            height: 50px;
            width: 50px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="One"><div class="two"></div>
    </div>
</body>
</html>

演示结果

盒子相关属性

border-radius

border-radius可以修改盒子的弧度，

使用格式

复制代码

border-radius: 10%;

有两种参数，分别是数值型和百分数型

百分数型范围0%~50%

数值型范围为0~120

演示代码

复制代码

<!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>
        .One{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: aqua;
            padding: 20px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="One"></div>
</body>
</html>

演示结果

border-shadow

border-shadow可以用来给盒子添加阴影，并且修改阴影的属性

使用格式

复制代码

box-shadow:h-shadow v-shadow blur spread color/insert

h-shadow：阴影的横向位置
v-shadow：阴影的纵向位置
blur：阴影的模糊程度
spread：阴影的扩散范围
color：阴影的颜色
inset：向内阴影

演示代码

复制代码

<!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>
        .One{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: aqua;
            padding: 20px;
            display: inline-block;
            box-shadow: 20px 10px 3px -1px red;
        }
    </style>
</head>
<body>
    <div class="One"></div>
</body>
</html>

演示结果

内部阴影演示代码

复制代码

<!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>
        .One{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: aqua;
            padding: 20px;
            display: inline-block;
            box-shadow: 20px 10px 10px -10px red inset;
        }
    </style>
</head>
<body>
    <div class="One"></div>
</body>
</html>

演示结果