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. 使用sqlcmd命令行执行.sql文件

    用微软自带的sqlcmd命令行工具,可以执行导入.以SQL Server 2016版本为例: 第一步:Win+R 键入:cmd 命令,开启命令行工具: 第二步:键入:sqlcmd -S . -U sa ...

  2. aspnetcore项目中kafka组件封装

    前段时间在项目中把用到kafka组件完全剥离开出来,项目需要可以直接集成进去.源代码如下: liuzhixin405/My.Project (github.com) 组件结构如下,代码太多不一一列举, ...

  3. EPAI手绘建模APP常用工具栏_1

    1.常用工具栏 图 1 常用工具栏 (1) 撤销 (2) 重做 (3) 删除 (4) 复制 ① 选中场景中的模型后,复制按钮变成可用状态,否则变成禁用状态.可以选择多个模型一起复制. (5) 变换 图 ...

  4. 九、DataArts Studio

    功能总览: 基本概念: 主题设计:通过分层架构表达对数据的分类和定义,帮助理清数据资产,明确业务领域和业务对象的关联关系. 主题域分组:基于业务场景对主题域分组. 主题域:互不重叠数据的高层面的数据分 ...

  5. @Async异步失效的9种场景

    前言 最近星球中有位小伙伴问了我一个问题:他在项目某个方法使用@Async注解,但是还是该方法还是同步执行了,异步不起作用,到底是什么原因呢? 伪代码如下: @Slf4j @Service publi ...

  6. LogAgen的工作流程

    LogAgen的工作流程: 一.读日志 --tailf 第三方库 新建tail_test/main.go package main import ( "fmt" "git ...

  7. Linux — 物理内存管理

    物理内存的组织方式 物理内存是由连续的一页一页的块组成,每个物理页都有页号 每个页由struct page表示,放进数组里--平坦内存模型 SMP和NUMA SMP中,总线会称为瓶颈,因为数据都要经过 ...

  8. ansible(13)--ansible的lineinfile模块

    1. lineinfile模块 功能:修改或删除文件内容,与系统中的 sed 命令类似: 主要参数如下: 参数 说明 path 指定要操作的文件 regexp 使用正则表达式匹配对应的行 line 修 ...

  9. C 语言编程 — 输入/输出与文件操作

    目录 文章目录 目录 前文列表 输入/输出 scanf() 和 printf() getchar() 和 putchar() 文件操作 打开文件 关闭文件 写入文件 读取文件 二进制 I/O 函数 前 ...

  10. C 语言编程 — 函数

    目录 文章目录 目录 前文列表 函数 函数的声明 函数的定义 函数的形参与实参 值传递 引用传递 可变长形参列表 函数的调用 函数的指针 回调函数 递归函数 数的阶乘 斐波那契数列 构造函数(Cons ...