# CSS 盒子模型

# 盒子模型介绍

盒子模型的概念 :
1. 页面中的每一个标签，都可以看作是一个 “盒子”, 通过盒子的视角更方便的进行布局
2. 浏览器在渲染 (显示) 网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子
盒子模型
- CSS 中规定每个盒子分别由 : 内容区域 (content), 内边距区域 (padding), 边框区域 (border), 外边距区域 (margin) 构成，这就是盒子模型
记忆：可以联想现实中的包装盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 20px;
            border: 10px solid black;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

# 内容的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子内容区域的大小
属性 : width/height
常见取值：数字 + px

# 边框 (border) - 连写形式

属性名 : border
属性值：单个取值的连写，取值之间以空格隔开
- 如 border: 10px solid red;
快捷键 : bd + tab

# 边框 (border) - 单方向设置

场景：只给盒子的某个方向单独设置边框
属性名 : border - 方位名词
属性值：连写的取值

# 内边距 (padding)

属性名 : padding
属性值 :
- padding 可以当作复合属性使用分别对应四个方向：上，右，下，左 (顺时针)
- 如果只写三值，那么就是：上，左右，下
- 如果只写两值，那么就是：上下，左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /*padding: 50px;*/
            /*padding可以当作复合属性使用 分别对应四个方向 : 上, 右, 下, 左(顺时针)*/
            /*padding: 30px 20px 10px 40px;*/

            /*如果只写三值, 那么就是 : 上, 左右, 下*/
            /*padding: 30px 80px 10px;*/

            /*如果只写两值, 那么就是 : 上下, 左右*/
            padding: 30px 10px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

# 外边距 (margin)

属性名 : margin
属性值 :
- margin 可以当作复合属性使用分别对应四个方向：上，右，下，左 (顺时针)
- 如果只写三值，那么就是：上，左右，下
- 如果只写两值，那么就是：上下，左右

# 外边距折叠现象 - ① 合并现象

场景 : 垂直布局的块级元素，上下的 margin 会合并
结果：最终两者距离为 margin 的最大值
解决方法：避免就好
- 只给其中一个盒子设置 margin 就好

# 清除默认内外边距

场景：浏览器会默认给部分标签设置默认的 margin 和 padding, 但一般在项目前需要先清除这些标签默认的 margin 和 padding, 后续自己设置
- 比如 : body 标签默认有上下的 margin: 8px
- 比如 : p 标签默认有上下的 margin
- 比如 : ul 标签默认由上下的 margin 和 padding-left
- ……

解决方法 :

* {

    margin: 0;

    padding: 0;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56





## 新浪导航案例

效果图 : 

![image-20220301165737686](https://cdn.jsdelivr.net/gh/Wongbuer/typora/202203011657731.png)
代码 : 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪导航优化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 40px;
            border-bottom: 1px solid #edeef0;
            border-top: 3px solid orange;
        }

        div a {
            line-height: 40px;
            display: inline-block;
            text-decoration: none;
            font-size: 12px;
            height: 80px;
            width: 40px;
            color: grey;
        }

        div a:hover {
            background-color: #edeef0;
            color: orange;
        }
    </style>
</head>
<body>
  <div>
      <a href="#">新浪导航</a>
      <a href="#">我就是一个新浪导航</a>
      <a href="#">新浪导航</a>
      <a href="#">新浪导航</a>
      <a href="#">新浪导航</a>
  </div>
</body>
</html>

但是这样会出现问题，当字数过多的时候，固定的设置 a 标签的大小就会出现问题了

# 新浪导航案例优化

为了解决上面的问题，使用内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪导航优化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 40px;
            border-bottom: 1px solid #edeef0;
            border-top: 3px solid orange;
        }

        div a {
            line-height: 40px;
            display: inline-block;
            text-decoration: none;
            font-size: 12px;
            padding: 0 10px 10px 0;
            color: grey;
        }

        div a:hover {
            background-color: #edeef0;
            color: orange;
        }
    </style>
</head>
<body>
  <div>
      <a href="#">新浪导航</a>
      <a href="#">我就是一个新浪导航</a>
      <a href="#">新浪导航</a>
      <a href="#">新浪导航</a>
      <a href="#">新浪导航</a>
  </div>
</body>
</html>

这样就可以规避问题了

# CSS3 盒模型 (自动内减)

需求：盒子尺寸 300 * 300, 背景粉色，边框 10px 实线黑色，上下左右 20px 的内边距
解决方法① : 手动内减
- 操作：自己计算多余大小，手动在内容中减去
- 缺点：项目中计算量太大，很麻烦
解决方法② : 自动内减
- 操作：给盒子设置属性 box-sizing : border-bx 即可
- 有点：浏览器会自动计算多余大小，自动在内容中减去

# 版心居中

版心：网页的有效内容

实现方式 :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>版心居中</title>

    <style>

        div {

            width: 700px;

            height: 300px;

            background-color: pink;

            margin: 0 auto;

    </style>

</head>

<body>

<!--    版心：网页的有效内容 -->

    <div>版心</div>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19





## 圆角边框原理

> border-radius: length;
>
> length : 圆的半径

```css
.box {
    background-color: #edeef0;
    color: orange;
    width: 100px;
    height: 100px;
    border-radius:
}

# 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性来为盒子添加阴影
语法 : box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影 (outset) 改为内部阴影

# 文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本
语法 : text-shadow: h-shadow v-shadow blur color ;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色

# CSS 盒子模型

# 盒子模型介绍

# 内容的宽度和高度

# 边框 (border) - 连写形式

# 边框 (border) - 单方向设置

# 内边距 (padding)

# 外边距 (margin)

# 外边距折叠现象 - ① 合并现象

# 清除默认内外边距

# 新浪导航案例优化

# CSS3 盒模型 (自动内减)

# 版心居中

# 盒子阴影

# 文字阴影

标准流

结构伪类选择器