web前端vertical-align的作用及对象详解
很多程序员知道web前端技术里的vertical-align是什么意思,但是对于vertical-align到底以什么为对齐标准却一知半解,今天我们就来说说web前端vertical-align.
1、作用
veritical是垂直的意思,而align是对齐的意思,两个合起来就是在垂直方向进行对齐。
2、对象
veritical-align的对象,就是谁要进行垂直方向上进行对齐,对象主要有
inline元素、inline-block元素和普通文本框等。
inebox是什么?
1、位置
linebox主要存在于block元素和inline-block元素中。linebox中可以含有普通文本框、inline-block元素、inline元素。
2、宽度和高度
linebox的宽度取决于内部元素的宽度,最大为父元素的宽度。
如果没有设置line-height,linebox的高度取决于linebox元素一起决定,一般由最高的元素决定linebox的高度。
vertical的默认属性baseline
1、baseline是什么?
简单地来说,baseline是小写字母x下面的一条线。
2、linebox里面的元素的基线baseline
2.1、 普通文本框的baseline
普通文本框的baseline,为里面文本的基线,基线的位置取决font-size和line-height。
2.2、inline元素的baseline
inline元素的baseline,为内容盒content-box里面文本框的基线。
那如果content-box里面有两行文本框呢?
没有这种情况,inline元素的文本框只有一行。
2.3、 inline-block元素的baseline
从左到右的三幅图片都是inline-block元素,不同的是,左面包含着没有脱离正常流的内容c,中间的除了没有脱离正常流的内容以外还加了overflow:hidden,右面的没有内容但是内容区还有高度 。红线代表了margin-box的边界。黄色代表的是border,绿色的是padding,蓝色的是content,蓝色的线代表的是baseline。inline-block元素的外边缘就是margin-box的边缘。
inline-block元素的baseline的位置要看该元素有没有处于正常流之内的内容。
(1)在有处于正常流内容的情况下,inline-block元素的baseline就是最后一个作为内容存在的元素的baseline,这个元素的baseline的确定就要根据他自身来确定了。
(2)在overflow属性不为visible的情况下,baseline就是margin-box的下边界了。
(3)在没有内容但是内容区还有高度 的情况下,baseline还是margin-box的下边界。
3、再添加一种情况
其baseline也是margin-box,这种元素是内联替换元素,例如img标签,不管img标签的display设置为inline还是inline-block,其baseline都为margin-box,大家可以尝试一下。
大家现在对于vertical-align是不是有了进一步的了解了呢?那么快去试试吧!!!
web前端vertical-align的作用及对象详解的更多相关文章
- Java Web学习总结(5)——HttpServletResponse对象详解
一.HttpServletResponse常见应用--生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类, 生成随机图片范例: package gacl.r ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- mvc-servlet---ServletConfig与ServletContext对象详解(转载)
ServletConfig与ServletContext对象详解 一.ServletConfig对象 在Servlet的配置文件中,可以使用一个或多个<init-param>标签为s ...
- JavaWeb学习----JSP内置对象详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- 基于Java的打包jar、war、ear包的作用与区别详解
本篇文章,小编为大家介绍,基于Java的打包jar.war.ear包的作用与区别详解.需要的朋友参考下 以最终客户的角度来看,JAR文件就是一种封装,他们不需要知道jar文件中有多少个.cla ...
- Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697
详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...
- jQuery的deferred对象详解(一)
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- python引用和对象详解
python引用和对象详解 @[马克飞象] python中变量名和对象是分离的 例子 1: a = 1 这是一个简单的赋值语句,整数 1 为一个对象,a 是一个引用,利用赋值语句,引用a指向了对象1. ...
- [转] jQuery的deferred对象详解
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
随机推荐
- Python3常用学习网站总结(随时更新)
Python资源大全 http://python.jobbole.com/84464/ https://github.com/jobbole/awesome-python-cn scrapy: h ...
- QQ--基于TCP/UDP协议的通讯原理
QQ是一个基于TCP/UDP协议的通讯软件 发送消息的时候是UDP打洞,登陆的时候使用HTTP~因为登陆服务器其实就是一个HTTP服 务器,只不过不是常用的那些,那个服务器是腾讯自行开发的! 一 ...
- 构造函数,This关键字
构造函数: 即构建创造对象时调用的函数.在new的时候自动执行,给对象进行初始化.创建对象都必须要通过构造函数初始化.(有参和无参) 一个类中如果没有定义过构造函数,那么类中会有一个默认的空参数构造函 ...
- 【ASP.NET MVC 学习笔记】- 07 使用 Entity Framework
本文参考:http://www.cnblogs.com/willick/p/3304534.html 1.ORM(Object Relation Mapping)工具,是为了解决“关系数据库”和“面向 ...
- 237. Delete Node in a Linked List(leetcode)
Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...
- IDEA + Maven + JavaWeb项目搭建
前言:在网上一直没找到一个完整的IDEA+Maven+Web项目搭建,对于IDEA和Maven初学者来说,这个过程简单但是非常痛苦的,对中间的某些步骤不是很理解,导致操作错误,从而项目发布不成功,一直 ...
- Judge Route Circle --判断圆路线
Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...
- LeetCode 448. Find All Numbers Disappeared in an Array (在数组中找到没有出现的数字)
Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...
- Maven 设置Maven源/镜像
在Eclipse/ InteliJ Idea使用Maven时,企业提供的本地仓库经常有些Jar包下载不下来,所以.配置Maven设置国内镜像对开发人员来说是必不可少的.今天写一篇自己配制的Maven镜 ...
- babel从入门到入门
babel从入门到入门 来源 http://www.cnblogs.com/gg1234/p/7168750.html 博客讲解内容如下: 1.babel是什么 2.javascript制作规范 3. ...