10-vertical-aligin

已注销
46 阅读2分钟

01 行盒的理解

作用: 将当前行里的所有内容包裹起来

<!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>
    .box .small {
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: orange;
    }
    .box img {
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    xxxxgggx123
    <img src="./imgs/diqiu.jpg" alt="">
    <span class="small"></span>
    每逢春节、中秋节等中华民族传统节日，各族居民便聚在一起，联欢联谊，共庆佳节；每逢开斋节、古尔邦节等少数民族节日，回族居民会带着油香、馓子等特色小吃，请街坊邻里品尝，各族居民其乐融融，像石榴籽一样紧紧抱在一起。
  </div>
</body>
</html>

00118.png

02 行盒里面对齐的方式

浏览器为了美观,默认行盒的对齐方式是基线对齐 00119.png 这也就能解释为什么单独放一张图片的时候,图片下方会有几个像素 00120.png 这是因为只有图片的时候也是按照基线对齐,为了以后可能有文字,预留了空间 还有一种现象

<!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>
    .box {
      background-color: orange;
    }
    .box .small {
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .box img {
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="box">
    123xxggg
    <img src="./imgs/diqiu.jpg" alt="">
    <span class="small">aaaaa</span>
  </div>
</body>
</html>

00121.png 也是因为基线对齐的原因，因为span里有了文字,所以基线变成了文字的底部，就会发生如上图的现象了

03 案例

3.1 vertical-algin解决问题一

<!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>
    /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
    input {
      height: 50px;
      box-sizing: border-box;

      vertical-align: middle;
    }

  </style>
</head>
<body>
  <input type="text"><input type="button" value="搜索">
</body>
</html>

00122.png

3.2 vertical-algin解决问题二

<!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>
   img {
     vertical-align: middle;
   }
  </style>
</head>
<body>
  <img src="../imgs/1.jpg" alt=""><input type="text">
</body>
</html>

00123.png

3.3 vertical-algin解决问题三

<!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>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    input {
      /* vertical-align: middle; */
      vertical-align: top;
    }

  </style>
</head>
<body>
  <div class="father">
    <input type="text">
  </div>
</body>
</html>

00124.png

3.4 vertical-algin解决问题四

<!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>
    .father {
      width: 400px;
      background-color: pink;
    }

    img {
      /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
      /* vertical-align: middle; */
      display: block;
    }

  </style>
</head>
<body>
  <div class="father">
    <img src="../imgs/1.jpg" alt="">
  </div>
</body>
</html>

00125.png

avatar
文章
阅读
粉丝