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>

02 行盒里面对齐的方式

浏览器为了美观,默认行盒的对其方式是基线对齐



这也就能解释为什么单独放一张图片的时候,图片下方会有几个像素



这是因为只有图片的时候也是按照基线对齐,为了以后可能有文字,预留了空间

还有一种现象

<!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>


也是因为基线对齐的原因，因为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>

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>

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>

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>

14-vertical-aligin的更多相关文章

  1. LeetCode Binary Tree Vertical Order Traversal

    原题链接在这里:https://leetcode.com/problems/binary-tree-vertical-order-traversal/ 题目: Given a binary tree, ...

  2. atitit.eclipse 新特性总结3.1--4.3

    atitit.eclipse 新特性总结3.1--4.3 Eclipse 3.1 1 Eclipse 3.2 Java开发工具的新特性 2 1. 内容辅助(Ctrl+Space)模板 2 2. 动态地 ...

  3. 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  4. iOS中UITextField 使用全面解析 分类： ios技术 2015-04-10 14:37 153人阅读 评论(0) 收藏

    //初始化textfield并设置位置及大小   UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 13 ...

  5. 14 fragment 创建

    静态展示 注意 静态的开始进入界面的生命周期和动态的不同 详情:14 fragment注意点 步骤一:创建一个类继承 Fragment 代码类型一: package com.fmy.demo1; im ...

  6. win7+python3.6+word_cloud 安装出现Microsoft Visual C++ 14.0 is required

    说明 环境: 已安装Anaconda3 (64-bit) 4.4.0(Python 3.6.1).其中,代码调试在Spyder 3.1.4中进行,安装包则直接打开Anaconda Prompt调用cm ...

  7. Devexpress VCL Build v2014 vol 14.2.1 beta发布

    已经快到2015 年了. 14.2.1 beta 才出来了. 还好,有一些新东西. 官网地址 VCL Gauge Control Designed to clearly convey informat ...

  8. Devexpress VCL Build v2013 vol 14.1.3 发布

    我修,我修,修修修. New Major Features in 14.1 What's New in VCL Products 14.1 Breaking Changes To learn abou ...

  9. 【Android】3.14 公交线路查询功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 利用BusLineSearch方法可查询公交线路的详情信息. 二.运行截图 简介:介绍查询公交线路功 ...

  10. 《DSP using MATLAB》示例 Example 9.14

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

随机推荐

  1. WPF 更改 DrawingVisual 的 RenderOpen 用到的对象的内容将持续影响渲染效果

    在 WPF 里面,可以通过 DrawingVisual 来进行使用底层的绘制方法,此方法需要调用 DrawingVisual 的 RenderOpen 拿到 DrawingContext 类型的对象, ...

  2. JavaScript函数属性，方法，ES6拓展内容总结(箭头函数使用，rest参数)

    引言 函数在js中也是一个对象,所以它也是有着自己的属性和方法的,了解它们能更好的使用函数. // 各种样子的函数 function foo() {} function foo(a) {} funct ...

  3. jqGrid--统计列

    //数据表格 <div class="gridPanel" style="width:100%;"> @* 数据表格 *@ <table id ...

  4. Fiddler在抓取https数据包时如何解决Tunnel to 443的问题？

    学习视频: https://www.bilibili.com/video/BV1zg4y1i7k3?p=2 谷歌浏览器导入证书 1.导出证书到桌面 2.双击安装证书 3.浏览器-->设置--&g ...

  5. k8s证书相关

    1.cfssl 字签证书 查看证书 可以使用以下命令查询CFSSL证书是否过期: 复制代码   cfssl certinfo -cert <certificate_file> 其中,< ...

  6. 【力扣-TS解题】1、回文数

    给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false . 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 例如,121 是回文,而 123 不是 来源 ...

  7. 解决input中输入中文过程中会触发input事件的问题

    问题描述: 监听文本输入框的input事件,在拼写汉字时会触发input事件,如下图: 需求: 选词完成后触发input事件,只触发一次. 解决办法: 通过查阅资料得知在输入中文(包括语音识别时)会先 ...

  8. SCSS随笔-mixin与@extend

    变量 定义变量 $color-white: white; 使用变量 body { background-color: $color-white; } @mixin 与 @include 定义mixin ...

  9. Java应用的优雅停机

    一. 优雅停机的概念 优雅停机一直是一个非常严谨的话题,但由于其仅仅存在于重启.下线这样的部署阶段,导致很多人忽视了它的重要性,但没有它,你永远不能得到一个完整的应用生命周期,永远会对系统的健壮性持怀 ...

  10. 2024 FIC取证比赛wp（更新中）

    本次竞赛容器挂载密码为: 2024Fic@杭州Powered~by~HL! 2024年4月,卢某报案至警方,声称自己疑似遭受了"杀猪盘"诈骗,大量钱财被骗走.卢某透露,在与某公司交 ...