14-vertical-aligin
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的更多相关文章
- LeetCode Binary Tree Vertical Order Traversal
原题链接在这里:https://leetcode.com/problems/binary-tree-vertical-order-traversal/ 题目: Given a binary tree, ...
- 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. 动态地 ...
- 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成
原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...
- iOS中UITextField 使用全面解析 分类： ios技术 2015-04-10 14:37 153人阅读 评论(0) 收藏
//初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 13 ...
- 14 fragment 创建
静态展示 注意 静态的开始进入界面的生命周期和动态的不同 详情:14 fragment注意点 步骤一:创建一个类继承 Fragment 代码类型一: package com.fmy.demo1; im ...
- 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 ...
- Devexpress VCL Build v2014 vol 14.2.1 beta发布
已经快到2015 年了. 14.2.1 beta 才出来了. 还好,有一些新东西. 官网地址 VCL Gauge Control Designed to clearly convey informat ...
- 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 ...
- 【Android】3.14 公交线路查询功能
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 利用BusLineSearch方法可查询公交线路的详情信息. 二.运行截图 简介:介绍查询公交线路功 ...
- 《DSP using MATLAB》示例 Example 9.14
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
随机推荐
- 2019-9-27-微软的-P2P-下载方式
title author date CreateTime categories 微软的 P2P 下载方式 lindexi 2019-09-27 09:44:44 +0800 2019-09-27 09 ...
- 火山引擎ByteHouse：OLAP如何支持超高QPS点查？
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在当今高速发展的互联网时代,信息传播迅速,用户数量激增.在面对如此庞大的用户群体和高频的访问需求时,系统高并发访问 ...
- Go-Zero微服务快速入门和最佳实践（一）
前言 并发编程和分布式微服务是我们Gopher升职加薪的关键. 毕竟Go基础很容易搞定,不管你是否有编程经验,都可以比较快速的入门Go语言进行简单项目的开发. 虽说好上手,但是想和别人拉开差距,提高自 ...
- 一键自动化博客发布工具,用过的人都说好(segmentfault篇)
segmentfault是我在这些平台中看过界面最为简洁的博客平台了. 今天就以segmentfault为例,讲讲在blog-auto-publishing-tools中的实现原理. 前提条件 前提条 ...
- Failed to download metadata for repo ‘PowerTools‘: Cannot prepare internal mirrorlist: No URLs in mi
Failed to download metadata for repo 'AppStream' [CentOS] - Techglimpsehttps://techglimpse.com/faile ...
- 在Linux下想要删除一个目录需要怎样的权限
场景一 在Home目录下创建一个目录dirtest,然后使用chmod 333 dirtest修改目录权限.这时候dirtest的权限为d-wx-wx-wx,如果执行rm -r dirtest可以进行 ...
- tomcat（2）- tomcat目录结果和配置文件
目录 1 Tomcat目录结构 2 Tomcat的配置文件 2.1 server.xml配置文件 2.2 server.xml配置文件结构 2.3 WEB应用自动部署 2.4 配置文件各个组件的关联 ...
- 线程中使用for循环的add或remove方法的两种方案
简介 (Introduction): 背景 在使用线程中添加list的元素时,使用add或remove就会产生异常. 分析 该list每当删除/添加一个元素时,集合的size方法的值都会减小1,这将直 ...
- mini-centos7 环境安装部署，各种踩坑。。。
最小Linux系统,安装Java环境 想想就生气,去面试个运维,面试官让我上机装个centos7,还是个最小安装包连界面都没有,只有命令行模式,我都哭了,然后让把一些环境装一下,然后再部署个sprin ...
- 表单设计——《HTML5 CSS3从入门到精通》
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...