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. openpyxl模块操作Excel

    1.openpyxl模块了解 1.excel版本问题 03版本之前的excel文件后缀名xls 03版本之后的excel文件后缀名xlsx 2.python操作excel表格的模块 openpyxl ...

  2. 一个可以输出当前移动设备机型（安卓，ios）系统版本的html页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Ollama开发指南

    安装必备工具 确保已安装以下软件的正确版本: CMake 3.24 或更高版本 Go 1.22 或更高版本 GCC 11.4.0 或更高版本 使用 Homebrew 安装这些工具(适用于macOS和L ...

  4. Ubuntu开启root账户登陆

    Ubuntu开启root账户登陆 设置 root 密码:sudo passwd root sudo chmod 777 /usr/share/lightdm/lightdm.conf.d/50-xx ...

  5. docker-compose 安装 mysql:5.7.31

    目录 一.新建一个启动服务的目录 二.新建文件docker-compose.yml 三.新建角本文件 init-mysql.sh 四.实使化目录和配置文件 启动服务 登陆mysql 其它操作 参考文档 ...

  6. 热烈祝贺 Splashtop 赢得最佳远程桌面用户满意度得分

    在 G2 的 2021 年冬季远程桌面网格报告中,Splashtop 的净发起人得分(NPS)为 93,是所有远程桌面工具中最高的. 在一份分析用户对 30 多种远程桌面解决方案的评论的报告中,Spl ...

  7. FolkMq v1.4.6 发布（可以内嵌的消息中间件）

    功能简表 角色 功能 生产者(客户端) 发布消息.定时消息(或叫延时).顺序消息.可过期消息.事务消息.支持 Qos0.Qos1 消费者(客户端) 订阅.取消订阅.消费-ACK(自动.手动) 服务端 ...

  8. 一文搞懂docker容器基础：docker镜像管理，docker容器管理

    目录 一.系统环境 二.docker 2.1 Docker 概述 2.2 Docker 平台 2.3 我可以使用 Docker 做什么? 2.3.1 快速.一致地交付您的应用程序 2.3.2 响应式部 ...

  9. WPF加载GIF的五种方式（Storyboard / WpfAnimatedGif / ImageAnimator / PictureBox / MediaElement）

    部分内容参考博文WPF 如何显示gif 一.使用Storyboard 效果: (1)页面xaml: <Window x:Class="PlayGifDemo.StoryboardWin ...

  10. C# Afroge摄像头翻转90

    1.dll和命名空间就不在此列举了,如下只是将转换方法介绍: 第一个函数: public void Rotate90() { // 计算角度,类变量 //dAngle = dAngle + 90; / ...