非零基础自学前端最后一遍一 HTML+CSS 18 额外知识补充

梦里梦外; 2024-03-22 19:35 48阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  18 额外知识补充
         *   *  18.1 transform的介绍以及常见transform-function
             *   *  18.1.1 CSS属性 - transform
                 *  18.1.2 transform的用法
             *  18.2 transform-translate的使用
             *   *  18.2.1 位移 - translate
                 *  18.2.2 translate的补充
             *  18.3 元素水平和垂直居中的方案总结
             *  18.4 transform-scale的使用
             *   *  18.4.1 缩放 - scale
             *  18.5 transform-rotate的使用
             *   *  18.5.1 缩放 - rotate
                 *  18.5.2 rotate补充
             *  18.6 transform-origin改变形变原点
             *   *  18.6.1 transform-origin
             *  18.7 transform-skew和transform设置多个值
             *   *  18.7.1 倾斜 - skew
                 *  18.7.2 transform设置多个值
             *  18.8 CSStransition的介绍和可动画属性
             *   *  18.8.1 认识transition动画
                 *  18.8.2 哪些CSS属性可以做动画呢？
             *  18.9 CSStransition的常见属性使用
             *   *  18.9.1 过渡动画 - transition
             *  18.10 transform、translate、transition的区分
             *   *  18.10.1 几个英语词汇的区分
             *  18.11 元素的宽度和高度变化问题
             *   *  18.11.1 宽度的变化方向
             *  18.12 transition动画的缺点以及Animation
             *   *  18.12.1 认识CSS Animation
             *  18.13 keyframes和animation的序列帧
             *   *  18.13.1 @keyframes规则
                 *  18.13.2 animation属性
             *  18.14 块级元素中行盒的概念和作用
             *   *  18.14.1 块级元素中行盒的理解
                 *  18.14.2 行盒中的多种行内元素
             *  18.15 行内级元素在行盒中baseline对齐
             *   *  18.15.1 行盒内包裹多个内容如何对齐
                 *  18.15.2 CSS属性 - vertical-align
                 *  18.15.3 深入理解vertical-align – line boxes
                 *  18.15.4 深入理解vertical-align – 不同情况分析
                 *  18.15.5 vertical-align的baseline
                 *  18.15.6 vertical-align的其他值

![在这里插入图片描述][3e6d9ad44e154906adc6bdfa3e817d8a.png_pic_center]

#### 一 HTML+CSS ####

#### 18 额外知识补充 ####

##### 18.1 transform的介绍以及常见transform-function #####

###### 18.1.1 CSS属性 - transform ######

*  CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。
 *  Transform是形变的意思，transformer就是变形金刚
 *  常见的函数transform function有： 、
    
     *  平移：translate(x, y)
     *  缩放：scale(x, y)
     *  旋转：rotate(deg)
     *  倾斜：skew(deg, deg)
 *  通过上面的几个函数，我们可以改变某个元素的形变

###### 18.1.2 transform的用法 ######

transform属性的语法如下

![在这里插入图片描述][9541144211ac4a988ee376b56ac1103b.png_pic_center]

常见的函数transform function有：

*  平移：translate(x, y)
 *  缩放：scale(x, y)
 *  旋转：rotate(deg)
 *  倾斜：skew(deg, deg)

通过上面的几个函数，我们可以改变某个元素的形变

![在这里插入图片描述][8573c7808ae54e659314eaacfcba04e5.png_pic_center]

##### 18.2 transform-translate的使用 #####

###### 18.2.1 位移 - translate ######

*  平移：translate(x, y)
 *  值个数
    
     *  一个值时，设置x轴上的位移
     *  二个值时，设置x轴和y轴上的位移
 *  值类型：
    
     *  数字：100px
     *  百分比：参照元素本身（ refer to the size of bounding box ）

![在这里插入图片描述][9f967c7d3b774843ab6e7cab80993d0c.png_pic_center]

渲染效果

![在这里插入图片描述][2b85ff44f21b45a582da326604f743a4.png_pic_center]

百分比形式

渲染效果

![在这里插入图片描述][eb43565782b54c539e6fbebfdb8da64f.png_pic_center]

###### 18.2.2 translate的补充 ######

*  补充一：translate是translateX和translateY函数的简写。
    
     *  translate3d后续了解；
 *  补充二：translate的百分比可以完成一个元素的水平和垂直居中
    
    ![在这里插入图片描述][dd1f3e20959d43b583dbab60b7b9bd72.png_pic_center]
 *  translate函数相对于flex布局的兼容性会好一点点
    
     *  不过目前flex布局已经非常普及，直接使用flex布局即可；

##### 18.3 元素水平和垂直居中的方案总结 #####

<!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>
        .container {
         
          /* position: relative; */
          /* display: flex;
          align-items: center; */
    
          height: 300px;
          background-color: orange;
        }
    
        .box1 {
         
          position: absolute;
          width: 100px;
          /* height: 100px; */
          top: 0;
          bottom: 0;
          margin: auto 0;
          background-color: #f00;
        }
    
        .box2 {
         
          background-color: #f00;
        }
    
        .box3 {
         
          display: inline-block;
          height: 100px;
          background-color: #f00;
    
          /* 两件事情:
              1.让元素向下位移父元素的50%
              2.让元素向上位移自身的50% 
          */
          /* margin-top的百分比是相对于包含块(父元素)的宽度 */
          /* margin-top: 50%; */
          position: relative;
          top: 50%;
          transform: translate(0, -50%);
        }
      </style>
    </head>
    
    <body>
    
      
    
      
      
      
    
      
      
    
      
      <div class="container">
        <div class="box3">coderwhy</div>
        aaaaa
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][b126293abb3f4f689c5580c9cd3082ab.png_pic_center]

##### 18.4 transform-scale的使用 #####

###### 18.4.1 缩放 - scale ######

*  缩放：scale(x, y)
 *  值个数
    
     *  一个值时，设置x轴上的缩放
     *  二个值时，设置x轴和y轴上的缩放
 *  值类型：
    
     *  数字：
        
         *  1：保持不变
         *  2：放大一倍
         *  0.5：缩小一半
     *  百分比：不支持百分比
 *  scale函数时scaleX和scaleY的缩写：
    
     *  scale3d后续再了解；

![在这里插入图片描述][4a718d843e94456ea2932ae0a1eb7d88.png_pic_center]

<!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>
        body {
         
          text-align: center;
          padding-top: 200px;
        }
    
        .container {
         
          display: inline-block;
          border: 20px solid #f00;
        }
    
        .box {
         
          border: 20px solid #0f0;
          width: 200px;
          height: 200px;
          background-color: orange;
    
          /* 形变 */
          transform: scale(60%, 60%);
        }
    
        .box1 {
         
          border: 20px solid #0f0;
          width: 200px;
          height: 200px;
          background-color: purple;
    
          /* 形变 */
          /* 0~1 对元素进行缩小 */
          /* 大于1 对元素进行放大 */
          /* transform: scale(1.2, 1.2); */
        }
    
        .box1:hover {
         
          transform: scale(1.1, 1.1);
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="box"></div>
      </div>
    
      <div class="container">
        <div class="box1"></div>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][a3f689bfe6c64e84abb43fa225324d81.png_pic_center]

##### 18.5 transform-rotate的使用 #####

###### 18.5.1 缩放 - rotate ######

*  旋转：rotate(deg)
 *  值个数
    
     *  一个值时，表示旋转的角度
 *  值类型：
    
     *  deg：旋转的角度
     *  正数为顺时针
     *  负数为逆时针
 *  注意：旋转的原点受transform-origin的影响

![在这里插入图片描述][d3c5dbaa0b8543048b307f75ea03c689.png_pic_center]

<!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>
        body {
         
          text-align: center;
          padding-top: 200px;
        }
    
        .container {
         
          display: inline-block;
          border: 10px solid #f00;
        }
    
        .box {
         
          width: 200px;
          height: 100px;
          background-color: orange;
        }
    
        .box:hover {
         
          transform: rotate(-45deg);
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="box"></div>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][bad9b7d42ea34aef8467c7f9980174fe.png_pic_center]

###### 18.5.2 rotate补充 ######

![在这里插入图片描述][872149010db24f8a837f51f9e835f40a.png_pic_center]

##### 18.6 transform-origin改变形变原点 #####

###### 18.6.1 transform-origin ######

*  transform-origin：变形的原点
 *  一个值：
    
     *  设置x轴的原点
 *  两个值：
    
     *  设置x轴和y轴的原点
 *  必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个
    
     *  left, center, right, top, bottom关键字
     *  length：从左上角开始计算
     *  百分比：参考元素本身大小

![在这里插入图片描述][c334f2588c5e439187ccaac7f7bd618a.png_pic_center]

![在这里插入图片描述][f3cdf831aab6463a92b9d31509535787.png_pic_center]

<!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>
        body {
         
          text-align: center;
          padding-top: 200px;
        }
    
        .container {
         
          display: inline-block;
          border: 10px solid #f00;
        }
    
        .box {
         
          width: 200px;
          height: 100px;
          background-color: orange;
    
          /* 修改当前元素的形变的原点位置 */
          /* transform-origin: center top; */
          /* transform-origin: 20px 20px; */
          transform-origin: 10% 10%;
        }
    
        .box:hover {
         
          transform: rotate(45deg) scale(0.5);
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="box"></div>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][48967fee75ce4b5ea2ec752a53c90059.png_pic_center]

##### 18.7 transform-skew和transform设置多个值 #####

###### 18.7.1 倾斜 - skew ######

*  旋转：skew(x, y)
 *  值个数
    
     *  一个值时，表示x轴上的倾斜
     *  二个值时，表示x轴和y轴上的倾斜
 *  值类型：
    
     *  deg：旋转的角度
     *  正数为顺时针
     *  负数为逆时针
 *  注意：旋转的原点受transform-origin的影响

![在这里插入图片描述][5f7107023db544ab94c8d9e6e1a37ce8.png_pic_center]

<!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>
        .box {
         
          font-style: italic;
          width: 200px;
          height: 100px;
          background-color: orange;
        }
    
        .box:hover {
         
          transform: skew(10deg, 10deg);
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">我是div元素</div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][14eef511a86048279e60f02fe4db8a14.png_pic_center]

###### 18.7.2 transform设置多个值 ######

transform的语法，它可以设置多个transform-function

这就意味着，我们可以给transform设置多个形变的函数

![在这里插入图片描述][4d504f8ccd3d4f2998eeeea6540c0b6d.png_pic_center]

![在这里插入图片描述][43671ad625bb43529b54d90ef22a8c6d.png_pic_center]

<!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>
        .box {
         
          width: 200px;
          height: 100px;
          background-color: orange;
        }
    
        .box:hover {
         
          /* transform: translateX(50px);
          transform: scale(1.2);
          transform: rotate(45deg); */
    
          /* 
            <transform-function>+
              +: 一个或者多个, 并且多个之间以空格分隔
              transform: scale() translate();
    
            <box-shadow>#
              #: 一个或者多个, 多个之间以, 分隔
              box-shadow: 1px 1px 1px 1px #f00, 
          */
          transform: translate(50px) scale(1.2) rotate(45deg);
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][e3eaf2b7b7f6489eb0f9846397c9d608.png_pic_center]

没问题

##### 18.8 CSStransition的介绍和可动画属性 #####

###### 18.8.1 认识transition动画 ######

*  什么是transition动画呢？
    
     *  CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。
     *  可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的；
     *  比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效；
     *  但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；
 *  通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。
    
    ![在这里插入图片描述][26a8b026c2df439ea77e99bdb90fdf6e.png_pic_center]
 *  CSS transitions 可以决定
    
     *  哪些属性发生动画效果 (明确地列出这些属性)
     *  何时开始 (设置 delay）
     *  持续多久 (设置 duration)
     *  如何动画 (定义timing function，比如匀速地或先快后慢)。

###### 18.8.2 哪些CSS属性可以做动画呢？ ######

*  并非所有的CSS属性都可以执行动画的，那么我们如何知道哪些属性支持动画呢？
 *  方法一：在MDN可执行动画的CSS属性中查询
    
     *  https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS\_animated\_properties
        
        ![在这里插入图片描述][4b1fe35b441e4917bbeb8494a4fbb75d.png_pic_center]
 *  方法二：阅读CSS属性的文档说明

##### 18.9 CSStransition的常见属性使用 #####

###### 18.9.1 过渡动画 - transition ######

*  transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简 写属性。
    
    ![在这里插入图片描述][ac0cf3596e0e43a482d643d9054c7263.png_pic_center]
    
     *  transition-property：指定应用过渡属性的名称
        
         *  all：所有属性都执行动画；
         *  none：所有属性都不执行动画；
         *  CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；
     *  transition-duration：指定过渡动画所需的时间
        
         *  单位可以是秒（s）或毫秒（ms）
     *  transition-timing-function：指定动画的变化曲线
        
         *  https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
            
            ![在这里插入图片描述][dc645c98879a4e2baf26c16709dd622b.png_pic_center]
     *  transition-delay：指定过渡动画执行之前的等待时间

渲染效果

![在这里插入图片描述][fc6b4bb4848a4c34b558133c2d64ed3a.png_pic_center]

##### 18.10 transform、translate、transition的区分 #####

###### 18.10.1 几个英语词汇的区分 ######

*  transform是形变：
    
     *  一个CSS属性，该CSS属性用于设置形变；
     *  后面的值是形变的函数，比如scale、rotate、translate；
 *  translate是其中一个transform-function
    
     *  用于对元素进行平移；
 *  transition是过渡的意思
    
     *  它本身也有转变的含义，但是更多表示的是过渡的过程；

##### 18.11 元素的宽度和高度变化问题 #####

###### 18.11.1 宽度的变化方向 ######

<!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>
        .box {
         
          position: fixed;
          right: 0;
          width: 400px;
          height: 100px;
          background-color: orange;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][75289ad22723430aa4b857dc7a303518.png_pic_center]

##### 18.12 transition动画的缺点以及Animation #####

###### 18.12.1 认识CSS Animation ######

*  之前我们学习了transition来进行过渡动画，但是过渡动画有如下的缺点：
    
     *  transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态；
     *  transition不能重复执行，除非一再触发动画；
     *  transition需要在特定状态下会触发才能执行，比如某个属性被修改了；
 *  如果我们希望可以有更多状态的变化，我们可以使用CSS Animation。
 *  CSS Animation的使用分成两个步骤：
    
     *  步骤一：使用keyframes定义动画序列（每一帧动画如何执行）
     *  步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

##### 18.13 keyframes和animation的序列帧 #####

###### 18.13.1 @keyframes规则 ######

*  可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：
    
     *  关键帧使用percentage来指定动画发生的时间点；
     *  0%表示动画的第一时刻，100%表示动画的最终时刻；
     *  因为这两个时间点十分重要，所以还有特殊的别名：from和to；
 *  也就是说可以使用from和to关键字：
    
     *  from相当于0%
     *  to相当于100%

###### 18.13.2 animation属性 ######

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animationiteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

*  animation-name：指定执行哪一个关键帧动画
 *  animation-duration：指定动画的持续时间
 *  animation-timing-function：指定动画的变化曲线
 *  animation-delay：指定延迟执行的时间
 *  animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
 *  animation-direction：指定方向，常用值normal和reverse
 *  animation-fill-mode：执行动画最后保留哪一个值
    
     *  none：回到没有执行动画的位置
     *  forwards：动画最后一帧的位置
     *  backwards：动画第一帧的位置
 *  animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）

<!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>
        .box {
         
          width: 200px;
          height: 100px;
          background-color: orange;
    
          /* box要执行moveAnim的动画 */
          animation-name: moveAnim;
          animation-duration: 3s;
          animation-timing-function: ease-in-out;
    
          /* 其他属性: */
          /* 动画执行的次数 */
          /* animation-delay: 2s; */
          /* animation-iteration-count: 2; */
          /* animation-direction: reverse; */
          /* 元素停留在动画的哪一个位置 */
          /* animation-fill-mode: forwards; */
    
          /* js动态修改 */
          /* animation-play-state: paused; */
          animation: moveAnim 3s linear 1s 2 normal forwards, ;
        }
    
        @keyframes moveAnim {
         
          0% {
         
            transform: translate(0, 0) scale(0.5, 0.5);
          }
    
          33% {
         
            transform: translate(0, 200px) scale(1.2, 1.2);
          }
    
          66% {
         
            transform: translate(400px, 200px) scale(1, 1);
          }
    
          100% {
         
            transform: translate(400px, 0) scale(0.5, 0.5);
          }
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
    
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][925fd544e3a84e99864382c0b72f276a.png_pic_center]

##### 18.14 块级元素中行盒的概念和作用 #####

###### 18.14.1 块级元素中行盒的理解 ######

<!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>
        /* 当前box有没有高度: 会有高度 */
        /* 为什么有高度: 由内容的撑起来 */
        /* 本质: 内容的行高撑起来 */
        .box {
         
          background-color: orange;
        }
    
        .small {
         
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: #f00;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        我是div元素 <span class="small"></span>
        虽然说，现在想吃什么用什么海外产品，都能代购，但是自己去购买，感觉还是不同。
        一个人在路上，心情也会不同，路上的行程，可以听书看书，到达后，疯狂的游玩。书的种类很多，旅行的书本真的不少，常常看到人们去各地游玩，自己心中也跟着想去。有时间，可以试着一个人去旅行，那是一种享受一种幸福。女人不必限制于单身生活，才会各地旅行，婚后的女性，有时间，也可以一个人去旅行，那是一种不同的感受，有些人也可以带小孩老公一起去旅行。独自游玩是一种幸福，家庭一起去旅行，也是一种幸福。单身的女性，可以一个人独游。婚后的女性，也可以一个人独游。当然，婚后若是自己一个人不方便，那就全家人旅行。
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][cd607ae8dbcf48558907f6237ec42d12.png_pic_center]

###### 18.14.2 行盒中的多种行内元素 ######

<!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>
        .box {
         
          background-color: orange;
        }
    
        .box img {
         
          width: 200px;
        }
    
        .box .small {
         
          display: inline-block;
          width: 100px;
          height: 200px;
          background-color: #f00;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        我是普通的文本, 323fdafdafxxxx322
        <img src="../images/kobe01.jpg" alt="">
        <span class="small"></span>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][8005f63eef424585a548e58a90202cf4.png_pic_center]

##### 18.15 行内级元素在行盒中baseline对齐 #####

###### 18.15.1 行盒内包裹多个内容如何对齐 ######

<!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>
        .box {
         
          background-color: orange;
        }
    
        .box img {
         
          width: 200px;
        }
    
        .box .small {
         
          display: inline-block;
          width: 100px;
          height: 200px;
          background-color: #f00;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        我是普通的文本, 323fdafdafxqgxxx322
        <img src="../images/kobe01.jpg" alt="">
        <span class="small"></span>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][bb258c0b8da341abb97d36e4c2e600a6.png_pic_center]

###### 18.15.2 CSS属性 - vertical-align ######

![在这里插入图片描述][cb9b48336b3d4bd5b690a9e6add5fda2.png_pic_center]

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level  
element.

此属性影响由内联级生成的框的行框内的垂直位置元素。

###### 18.15.3 深入理解vertical-align – line boxes ######

*  官方文档的翻译：vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置
 *  思考：一个div没有设置高度的时候，会不会有高度？
    
     *  没有内容，没有高度
     *  有内容，内容撑起来高度
 *  但是内容撑起来高度的本质是什么呢？
    
     *  内容有行高（line-height），撑起来了div的高度
 *  行高为什么可以撑起div的高度？
    
     *  这是因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level
     *  而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level
 *  那么，进一步思考：
    
     *  如果这个div中有图片，文字，inline-block，甚至他们设置了margin这些属性呢？

###### 18.15.4 深入理解vertical-align – 不同情况分析 ######

情况一：只有文字时，line boxes如何包裹内容？（注意：红色是包裹的div，下面也都一样）

![在这里插入图片描述][cda7107b5285489f9b1c748b275d62ec.png_pic_center]

情况二：有图片，有文字时，line-boxes如何包裹内容？

![在这里插入图片描述][1c1466855146485e870472c08dcefc24.png_pic_center]

情况三：有图片，有文字，有inline-block（比图片要大）如何包裹内容？

![在这里插入图片描述][7a7dfe6613b24bf582b7b302505d7c3d.png_pic_center]

情况四：有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom，如何包裹内容？

![在这里插入图片描述][ee794bd848564238aefbfffbfb9b9c1c.png_pic_center]

情况五：有图片、文字、inline-block（比图片要大）而且设置了margin-bottom并且有文字，如何包裹内容？

![在这里插入图片描述][e8951f40e7f840a6aa986f17f7cd184d.png_pic_center]

###### 18.15.5 vertical-align的baseline ######

*  结论：line-boxes一定会想办法包裹住当前行中所有的内容。
 *  但是，但是为什么对齐方式千奇百怪呢？
    
     *  你认为的千奇百怪，其实有它的内在规律
     *  答案就是baseline对齐
 *  我们来看官方vertical-align的默认值：没错，就是baseline
    
    ![在这里插入图片描述][a4979d4fbf154bd1b7886c114063f02c.png_pic_center]
 *  但是baseline都是谁呢？
    
     *  文本的baseline是字母x的下方
     *  Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）
     *  Inline-block有文本时，baseline是最后一行文本的x的下方
 *  一切都解释通了

###### 18.15.6 vertical-align的其他值 ######

*  现在，对于不同的取值就非常容易理解了
    
     *  baseline(默认值)：基线对齐（你得先明白什么是基线）
     *  top：把行内级盒子的顶部跟line boxes顶部对齐
     *  middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
     *  bottom：把行内级盒子的底部跟line box底部对齐
     *  <percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\\元素高度）， 0%意味着同baseline一 样
     *  <length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样
 *  解决图片下边缘的间隙方法:
    
     *  方法一: 设置成top/middle/bottom
     *  方法二: 将图片设置为block元素

[3e6d9ad44e154906adc6bdfa3e817d8a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b9ea970d3d384cff81923752427cb1b7.png
[9541144211ac4a988ee376b56ac1103b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c68091b76a944792a05d64702f4130b4.png
[8573c7808ae54e659314eaacfcba04e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6cd5928334544db3b60415ff414ea3a1.png
[9f967c7d3b774843ab6e7cab80993d0c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ad88875cb5444a4bbf82891fbccf9dd0.png
[2b85ff44f21b45a582da326604f743a4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/374f7698aab241f389bbc1cceb907a0a.png
[eb43565782b54c539e6fbebfdb8da64f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c1b28702df9f4ebba45beaddf8c63b6b.png
[dd1f3e20959d43b583dbab60b7b9bd72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4d7f1baa60984e16b1942f8fdb8a3030.png
[b126293abb3f4f689c5580c9cd3082ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b2d490043ac24fee8201acdad3633c8d.png
[4a718d843e94456ea2932ae0a1eb7d88.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a08f7b5bdefc4b859d59cbf76f9ab53d.png
[a3f689bfe6c64e84abb43fa225324d81.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/5b1432158603458ab6b6396c0990a384.png
[d3c5dbaa0b8543048b307f75ea03c689.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7fa671307d0640bab0b8973f7304ec82.png
[bad9b7d42ea34aef8467c7f9980174fe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/30cac84da8234f6d9e04ea78e6c414d2.png
[872149010db24f8a837f51f9e835f40a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1099a69060a94222a07fc9b838ae5c29.png
[c334f2588c5e439187ccaac7f7bd618a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/62a90a3d21e7434f8712980ed553493e.png
[f3cdf831aab6463a92b9d31509535787.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2db9f9c200d845fbac0f9e621ffa40fd.png
[48967fee75ce4b5ea2ec752a53c90059.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/74ca2d2a55954672bbb1cbff0f4cd29e.png
[5f7107023db544ab94c8d9e6e1a37ce8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/82d25b041e0c4639837685da88516462.png
[14eef511a86048279e60f02fe4db8a14.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2f6f3051b837493eb05e2ea8ee774207.png
[4d504f8ccd3d4f2998eeeea6540c0b6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7222e293da2b4100af72f279ab82845a.png
[43671ad625bb43529b54d90ef22a8c6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/bf344cb7f5cd43df96ff79379abef88a.png
[e3eaf2b7b7f6489eb0f9846397c9d608.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/63b450dc62f94d4b8c423b7f92be45ba.png
[26a8b026c2df439ea77e99bdb90fdf6e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/970478f2c43645e78bed73bb3c6eec00.png
[4b1fe35b441e4917bbeb8494a4fbb75d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/261a7f5dc6544b10b46578d1a8ef0f39.png
[ac0cf3596e0e43a482d643d9054c7263.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1bf886dfb19d472b8bf2c7401a9aaf1a.png
[dc645c98879a4e2baf26c16709dd622b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/66842b8a91974073bd2b44dfcd60dd8c.png
[fc6b4bb4848a4c34b558133c2d64ed3a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/64d1bb2efc3c4cc6b7a4a584c7c2ae56.png
[75289ad22723430aa4b857dc7a303518.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a3c500655eda48579afaed5df0f64017.png
[925fd544e3a84e99864382c0b72f276a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/357955c65b5e4dbb9930579c8a7e6175.png
[cd607ae8dbcf48558907f6237ec42d12.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ee3510d241ca4ef88fa4a2e77ef279af.png
[8005f63eef424585a548e58a90202cf4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/39edba23258945509859f34d6aa33744.png
[bb258c0b8da341abb97d36e4c2e600a6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/74f90c19107b4292afd5115f3e0a9393.png
[cb9b48336b3d4bd5b690a9e6add5fda2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8f8fdc5b68e341929ba6a6741bf749d7.png
[cda7107b5285489f9b1c748b275d62ec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/74f96378301b4aac9ffba9f744599044.png
[1c1466855146485e870472c08dcefc24.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e2cd7d017be94d2fae4d197662f30f2e.png
[7a7dfe6613b24bf582b7b302505d7c3d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/faabd9141ec3481b99da8579d1e87884.png
[ee794bd848564238aefbfffbfb9b9c1c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0d628babf67e4d788daac7268b3d5ecb.png
[e8951f40e7f840a6aa986f17f7cd184d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/91cbebcf6ce9455bbc7bea7011beb2a9.png
[a4979d4fbf154bd1b7886c114063f02c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d6937468f7244ad291e8513f09636650.png