web前端vertical-align的作用及对象详解
2017-11-17 00:00
495 查看
摘要: 很多程序员知道web前端技术里的vertical-align是什么意思,但是对于vertical-align到底以什么为对齐标准却一知半解,今天我们就来说说web前端vertical-align.
很多程序员知道web前端技术里的vertical-align是什么意思,但是对于vertical-align到底以什么为对齐标准却一知半解,今天我们就来说说web前端vertical-align.
1、作用
veritical是垂直的意思,而align是对齐的意思,两个合起来就是在垂直方向进行对齐。
2、对象
veritical-align的对象,就是谁要进行垂直方向上进行对齐,对象主要有
inline元素、inline-block元素和普通文本框等。
如果没有设置line-height,linebox的高度取决于linebox元素一起决定,一般由最高的元素决定linebox的高度。
普通文本框的baseline,为里面文本的基线,基线的位置取决font-size和line-height。
inline元素的baseline,为内容盒content-box里面文本框的基线。
那如果content-box里面有两行文本框呢?
没有这种情况,inline元素的文本框只有一行。
从左到右的三幅图片都是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是什么意思,但是对于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是不是有了进一步的了解了呢?那么快去试试吧!!!
相关文章推荐
- css属性之vertical-align详解
- web前端学习,JavaScript中对象继承方法你了解多少呢?
- java_web学习第二天(ServletConfig和ServletContext对象的作用和使用)
- Web前端开发之@ 功能 JS 实现原理详解
- 关于vertical-align:middle使用详解
- 详解JavaScript异步编程中jQuery的promise对象的作用
- 【从0到1学Web前端】javascript中的ajax对象(一) 分类: JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏
- 用WEB技术栈开发NATIVE应用:WEEX 前端SDK原理详解
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- web前端开发笔记:JavaScript面向对象总结
- 前端高质量知识(三)-JS变量对象详解
- 转:web前端面试题合集 (Javascript相关)(js异步加载详解)
- web前端vue之vuex单独一文件使用方式实例详解
- C#面向对象特征的具体实现及作用详解
- 使用反映实现前端WEB窗口控件与后台数据库类对象的动态绑定
- Struts2 获取WEB对象(作用域,request、application、session) 清除Session的值
- 【从0到1学Web前端】javascript中的ajax对象(一)
- web初步三:详解jsp九大内置对象
- web前端中calc属性案例详解
- web开发中的四个域对象生命周期 作用域详细介绍