五、CSS盒子模型（下）

目录

1、内边距padding

1.1、介绍

1.2、示例代码

2、外边距

2.1、介绍

示例代码

2.2、技巧

示例代码

2.3、外边距折叠与塌陷

示例代码

3、尺寸计算

3.1、介绍

示例代码

4、盒子背景

5、背景渐变

5.1、介绍

线性渐变

文字背景线性渐变

5.2、示例代码

6、盒子阴影

6.1、介绍

6.2、过渡

6.3、示例代码

1、内边距padding

1.1、介绍

内边距(padding)位于边框和内容区域之间。

使用场景：让盒子内容和边框保留一定距离，更美观。

内边距（padding）多个值用空格隔开。（顺时针记忆）

内边距写法作用

padding: 10px; 上下左右4个内边距都是10px

padding: 10px 20px; 上下内边距是10px，左右内边距是20px

padding: 10px 20px 30px; 上是10px，左右是20px，下是30px

padding: 10px 20px 30px 40px; 上是10px，右是20px，下是30px，左是40px（顺时针）

单边设置：根据方位名词

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

padding-bottom: 10px;

内边距写法	作用
padding: 10px;	上下左右4个内边距都是10px
padding: 10px 20px;	上下内边距是10px，左右内边距是20px
padding: 10px 20px 30px;	上是10px，左右是20px，下是30px
padding: 10px 20px 30px 40px;	上是10px，右是20px，下是30px，左是40px（顺时针）

1.2、示例代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型-内边距</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 一个值，代表 上下左右 */
      /* padding: 10px; */
      /* 两个值代表 上下 左右 */
      /* padding: 10px 20px; */
      /* 三个值代表上，左右，下 */
      /* padding: 10px 20px 30px; */
      /* 四个值代表上 右 下 左 */
      padding: 10px 20px 30px 40px;

    }

    .title {
      width: 240px;
      height: 35px;
      border: 1px solid #d0e0ee;
      border-top: 2px solid #ff8400;
      /* 文字垂直居中，行高等于高（height） */
      line-height: 35px;
      /* 只需要设置左右内边距 */
      /* padding: 0 10px; */
      padding-left: 10px;
      font-size: 14px;

    }
  </style>
</head>

<body>
  <div class="box1">一个值，代表上下左右，两个值代表上下 左右；三个值代表上，左右，下；
    四个值代表上 右 下 左。
  </div>
  <hr>
  <div class="title">美妆时尚热榜</div>
</body>

</html>

2、外边距

2.1、介绍

外边距(margin)是盒子周围一圈看不到的空间。它会把其它元素退离盒子。

使用场景：让元素保留一定距离，更美观。

外边距写法作用

margin: 10px; 上下左右4个外边距都是10px

margin: 10px 20px; 上下外边距是10px，左右外边距是20px

margin: 10px 20px 30px; 上是10px，左右是20px，下是30px

margin: 10px 20px 30px; 上10px，右20px，下30px，左40px

单边设置：根据方位名词。

margin-left: 10px;

margin-right: 10px;

margin-top: 10px;

margin-bottom: 10px;

注意：

1.行内元素左右外边距生效，上下外边距无效。

2.行内元素设置宽度和高度也无效。

外边距写法	作用
margin: 10px;	上下左右4个外边距都是10px
margin: 10px 20px;	上下外边距是10px，左右外边距是20px
margin: 10px 20px 30px;	上是10px，左右是20px，下是30px
margin: 10px 20px 30px;	上10px，右20px，下30px，左40px

示例代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子边框-外边距</title>
  <style>
    [class*="box"] {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .box1 {
      /* margin: 10px; */
      /* margin: 10px 20px; */
      /* margin: 10px 20px 30px; */
      /* margin: 10px 20px 30px 40px; */
      margin-bottom: 10px;
    }

    .box2 {
      background-color: skyblue;
    }

    span {
      /* 1.行内盒子的宽高是无效的 */
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 2.行内盒子上下外边距无效 */
      margin: 10px 20px;
      /* 3.行内盒子边框和内边距有效 */
      padding: 10px;
      border: 5px solid red;
    }
  </style>
</head>

<body>
  <!-- 控制盒子之间的距离 -->
  <div class="box1">第一个盒子</div>
  <div class="box2">第二个盒子</div>
  <span>行内盒子</span>
  <span>行内盒子</span>

</body>

</html>

2.2、技巧

区块元素可以利用marign实现水平居中。

块级盒子必须有宽度。

只需要设置左右外边距为auto就可以。

示例代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>块级盒子水平居中</title>
  <style>
    /* 必须是块级盒子，必须有宽度，有宽度的原因是如果没有宽度，就默认和页面一样宽，不存在居中这个说法 */
    [class*="box"] {
      width: 150px;
      height: 150px;
      background-color: pink;
    }

    .box1 {
      /* margin: 0 auto; B站 */
      /* margin: auto; 京东*/
      margin-left: auto;
      margin-right: auto;
    }

    .box2 {
      background-color: skyblue;
      margin-left: auto;
    }

    .box3 {
      background-color: red;
      margin-right: auto;
    }

    /* 行内盒子写margin auto是无效的 */
    /* span {
      margin: auto;
    } */
    /* 让行内元素居中可以把他写在块级元素内 */
    p {
      background-color: pink;
      /* 行内元素水平居中 */
      text-align: center;

    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <span>123</span>
  <p><span>123</span></p>
</body>

</html>

2.3、外边距折叠与塌陷

区块元素上下外边距会出现折叠（合并）情况。

并列关系（兄弟）的区块元素。

两个上下外边距将合并为一个外边距。其大小等于最大的单个外边距。

这个是浏览器特性，我们通常只设置一个盒子外边距即可。

区块盒子上下外边距会出现塌陷情况。

嵌套关系（父子）的区块元素。

给字盒子设置上下外边距会让父盒子塌陷移动。

解决方案：

1.给父盒子添加上边框。（父盒子本身有边框则不会出现问题）

2.给父盒子添加上内边距。（同上）

3.给父盒子添加overflow: hidden;（属性）

示例代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外边距合并和塌陷</title>
  <style>
    /* 必须是块级盒子，必须有宽度，有宽度的原因是如果没有宽度，就默认和页面一样宽，不存在居中这个说法 */
    [class*="box"] {
      width: 150px;
      height: 150px;
      background-color: pink;
    }

    .box1 {
      margin-bottom: 100px;
    }

    .box2 {
      background-color: skyblue;
      margin-top: 150px;
    }

    /* 外边距塌陷 */
    .father {
      /* 3.给父亲添加 overflow:hidden; */
      /* overflow: hidden; */
      width: 150px;
      height: 150px;
      background-color: pink;
      /* 1.给父亲添加边框(上边框) */
      /* border: 1px solid red; */
      /* 2.父亲有上padding(推荐)*/
      padding-top: 1px;
    }

    .son {
      width: 50px;
      height: 50px;
      background-color: purple;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

3、尺寸计算

3.1、介绍

在 CSS 盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding 和 border 都会让盒子变大。

这样我们在计算盒子大小的时候都会带来困扰。

box-sizing用于定义元素的盒模型计算方式，控制元素的width和height是否包含padding和border。

语法：
css 复制代码
box-sizing: 属性值;
|-------------|-------------------------------------------------------------------------------|
| 属性值 | 描述 |
| content-box | 默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。理解： width = 内容的宽度 |
| border-box | 元素的 width 和 height 包含内容、padding和 border。理解： width = border + padding + 内容的宽度 |

实际开发中，也更提倡使用border-box，可以直接让所有标签修改。

示例代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子尺寸计算</title>
  <style>
    /* 开发这么写 */
    /* * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    } */

    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      box-sizing: content-box;
      padding: 50px;
      border: 10px solid red;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      box-sizing: border-box;
      padding: 50px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box1">content-box</div>
  <div class="box2">border-box</div>
</body>

</html>

4、盒子背景

background 用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等。

使用场景：

给盒子添加背景图片，更加精美。

给列表添加相同的小图标，装饰效果。

给页面添加大的背景图片展示更震撼。

纯CSS实现背景渐变效果。

属性作用常用值

background-color 设置元素背景颜色颜色名称、十六进制、RGB、透明度

background-image 设置背景图片 url(image.jpg)

background-repeat 控制背景图片是否重复 repeat(默认)、no-repeat、repeat-x、repeat-y

background-position 定位背景图片位置 x y（如center top，或者px、%单位）

background-size 调整背景图片尺寸默认auto、cover(覆盖)、contain(包含)或者跟px、%

background-attachment 背景是否随页面滚动 scroll(默认滚动的)、fixed(固定)

注意：

背景固定是相对于当前页面视口来说的，并不是某个盒子。

background 用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等

背景复合写法：
css 复制代码
background: 颜色 图片 重复 固定 位置/尺寸;

属性	作用	常用值
background-color	设置元素背景颜色	颜色名称、十六进制、RGB、透明度
background-image	设置背景图片	url(image.jpg)
background-repeat	控制背景图片是否重复	repeat(默认)、no-repeat、repeat-x、repeat-y
background-position	定位背景图片位置	x y（如center top，或者px、%单位）
background-size	调整背景图片尺寸	默认auto、cover(覆盖)、contain(包含)或者跟px、%
background-attachment	背景是否随页面滚动	scroll(默认滚动的)、fixed(固定)

5、背景渐变

5.1、介绍

在CSS中，可以通过linear-gradient (线性渐变)和radial-gradient(径向渐变)为元素添加渐变背景。

场景：

1.文字底色渐变。

2.盒子美化。

|----------------------------------------|---------------|
| 属性/方法 | 描述 |
| linear-gradient(方向, 颜色1 位置, 颜色2 位置...) | 线性渐变（反向可控） |
| radial-gradient(形状, 颜色1,颜色2...) | 径向渐变（形状和位置可控） |

线性渐变

方向。可以是方位名词，也可以是 deg(角度）

位置。色标的位置。不是必须写的。

文字背景线性渐变

background: linear-gradient(to right, pink, red); 设置背景渐变

-webkit-background-clip: text; 兼容性写法，照顾谷歌老版本浏览器 -webkit-

background-clip: text; 文字范围裁剪背景

-webkit-text-fill-color: transparent; 文本填充颜色设置为透明

5.2、示例代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景渐变</title>
  <style>
    .box {
      width: 300px;
      height: 200px;

      /* background-color: pink; */
      /* background: linear-gradient(to top, pink, red); */
      /* deg 角度  90deg 就是 90度 */
      /* background: linear-gradient(90deg, pink, red); */
      /* 位置 是色标的位置 */
      /* background: linear-gradient(90deg, pink 50%, red 50%); */
      /* background: linear-gradient(180deg, #3ECEC5D8 0%, #26BCC6 100%); */
      background-image: linear-gradient(180deg, #3ECEC5D8 0%, #26BCC6 100%);


    }

    .text {
      font-size: 30px;
      font-weight: 700;
      /* 渐变背景文字 */
      background-image: linear-gradient(97deg, #0096FF, #BB64FF 42%, #F2416B 74%, #EB7500);
      /* -webkit- 前缀  谷歌浏览器老版本的兼容性写法 */
      -webkit-background-clip: text;
      /* 背景裁剪 以文字的形式裁剪 */
      background-clip: text;
      /* 文本填充颜色 为透明 */
      -webkit-text-fill-color: transparent;
    }

    /* 添加按钮渐变样式 */
    .gradient-btn {
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="text">我是渐变的文字，你喜欢吗？</div>
  <button class="gradient-btn">搜索</button>
</body>

</html>

6、盒子阴影

6.1、介绍

CSS box-shadow 属性用于在元素的框架上添加阴影效果。

使用场景：

盒子添加阴影，效果更立体。

鼠标经过元素显示阴影，更加突出元素。

语法：
css 复制代码
box-shadow: X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色;
多个属性用空格隔开。

X轴偏移量和Y轴偏移量是必须要写，其余可以省略采取默认值。

默认是外阴影，如果改为内阴影要写 inset。

6.2、过渡

过渡效果（Transition）用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）。

场景：

鼠标经过图片放大。

表单获得焦点，输入框变宽。

语法：
css 复制代码
transition: 过渡属性 过渡时间;
属性值中间空格隔开。

过渡属性如果都要变化可以写 all

过渡时间单位是秒s，比如 0.2s 等

6.3、示例代码

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子阴影</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      /* 盒子阴影: 水平偏移量  垂直偏移量  模糊距离  扩散距离  阴影颜色 */
      /* box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5); */
      /* box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px; */
      /* 过渡写到盒子身上。 谁做过渡给谁加 */
      transition: all .3s;
    }

    .box:hover {
      width: 220px;
      height: 220px;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 15px 30px;
    }
  </style>
</head>

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

</html>