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. C# 采集知网

    采集知网 WebClient /// <summary> /// 支持 Session 和 Cookie 的 WebClient. /// </summary> public ...

  2. 【内存优化】Oracle 的SGA与Linux的shmall和shmmax的关联

    查看linux下的Oracle共享内存段 [oracle@oradb ~]$ ipcs -m ------ Shared Memory Segments -------- key shmid owne ...

  3. 【人脸识别】OpenCV获取自己的图像

    思路:先获取10000张自己的图像,然后通过CNN神经网络进行学习. 第一步:先获取自己的脸的数据.如何做? 代码如下: import cv2 import os import sys import ...

  4. htts证书申请

    https://freessl.cn/ 教程: https://www.bilibili.com/video/BV1Ug411673P/?spm_id_from=333.337.search-card ...

  5. 使用 Splashtop 启用员工远程访问

    使员工进行远程工作似乎是一项耗时.不安全且昂贵的任务.但是,借助 Splashtop,您可以快速.轻松.安全地使您的员工从任何位置以最高 价值远程访问其工作站. ​ 如何使用 Splashtop 启用 ...

  6. Java面试题：如果你这样做，你会后悔的，两次启动同一个线程~~~

    当一个线程被启动后,如果再次调start()方法,将会抛出IllegalThreadStateException异常. 这是因为Java线程的生命周期只有一次.调用start()方法会导致系统在新线程 ...

  7. vue.js的M-V-VM思想

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式. Model 指代的就是vue对象的data属性里面的数据.这里的数据要显示到页面中. View 指代的就 ...

  8. WPF 不透明蒙板概述

    本文内容 先决条件 使用不透明蒙板创建视觉效果 创建不透明蒙板 将渐变用作不透明蒙板 显示另外 4 个 不透明蒙板能够使部分元素或视觉对象透明或部分透明. 要创建不透明蒙版,请将 Brush 应用于元 ...

  9. 005. gitlab安装

    1. gitlab介绍 官方网站: www.gitlab.com gitlab是一款使用ruby编写的代码版本管理系统,他可以通过web界面来管理代码. 2. gitlab安装 官方安装文档: htt ...

  10. MQTT服务器连接不上的问题

    问题描述 环境:阿里云服务器Ubuntu 22.04.3 LTS,安装mosquitto后,在虚拟机端订阅消息出现报错(以前用阿里云Ubuntu20.04 LTS的服务器装上就能用),以下服务器ip是 ...