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. 【Android】Binder的Oneway拦截

    在某些虚拟化,免安装,打点,环境检测,拦截器等场景,针对Android系统服务接口的拦截是常用的技术方案.通常只是针对正向的接口调用,如果涉及被动的服务回调拦截,则实现起来就有些许麻烦. 说明 由于我 ...

  2. python教程3.3：字符和编码

    1.二进制 计算机只能存储和识别二进制,但是人类常用的字母.数字.汉字怎么用计算机存储和识别呢? 人类强行约定一个对应表,把数字.字母和数字进行对应上,这样就可以用二进制表示字母和数字了. 2.ASC ...

  3. html布局浅谈

    现在布局方式主要分为三种 传统css布局方案(position,float,line-height等配合).实现复杂,需要多种属性配合使用,兼容性最好. flex布局方案.弹性布局,实现方便,兼容性较 ...

  4. C++：面向对象

    文章目录 继承与多态 继承 继承的构造与析构 虚继承 多态 ❀虚/纯虚函数❀ 虚析构/纯虚析构 对象的生命周期 实例化对象 构造函数与析构函数 拷贝构造函数 防止拷贝 总结 深拷贝与浅拷贝 初始化列表 ...

  5. CICD详解之gitlab,Jenkins

    持续集成概念 持续集成Continuous Integration 持续交付Continuous Delivery 持续部署Continuous Deployment 什么是持续集成: 持续集成是指开 ...

  6. 模仿jinja2的模板语言实验，可用于简易框架中

    mcw_str=''' wo shi {{ name }} ''' import re class myclass(): def inithtml(self): ret1 = re.search('{ ...

  7. 【C#】使用WebHttpRequest调用Restful带token接口500 返回401 未授权错误

    测试对方的接口,发现单个调用对方接口是可以的,但是多个连续的调用对方接口时,会出现第一条调用一般是200,随后的调用就会报500,401未授权的错误,除了第一条后面的请求数据几乎都不得行. 我于是用f ...

  8. mit 6.824 lab1 思路贴

    前言 为遵守 mit 的约定,这个帖子不贴太多具体的代码,主要聊聊自己在码代码时的一些想法和遇到的问题. 这个实验需要我们去实现一个 map-reduce 的功能.实质上,这个实验分为两个大的板块,m ...

  9. HTML——文本域

    在 HTML 中,使用 <textarea> 标签来表示多行文本框,又叫做文本域.与其它 <input> 标签不同,<textarea> 标签是单闭合标签,它包含起 ...

  10. Excel相关技巧

    (1)如何实现EXCEL某个单元格满足条件整行变色? 链接:https://jingyan.baidu.com/article/75ab0bcba47c19d6864db2cf.html (2)获取表 ...