css深入理解vertical-align
第一讲:vertical-align家族基本认识
了解vertical-align支持的属性值以及组成
属性:
1.inherit
2.线类
baseline,top,middle,bottom
3.文本类
text-top,text-bottom
4.上标下标类
sub,super
5数值百分比类
20px,2em,20%
共性 都带数值 20px 20em 20%,都支持负值 margin,letter-spacing word-spacing vertical-align,行为表现一致 在baseline对齐基础上上下偏移对应数值大小
百分比类的差异
vertical-align的百分比值是相对于line-height计算的。
第二讲vertical-align起作用的前提
探讨各种display值对vertical-align的影响
vertical-align起作用是有条件的,应用于inline水平以及table-cell元素
inline水平的元素
img span strong em
inline-block input
table-cell元素
.table-cell:<td>
默认状态下:图片,按钮,文字,和单元格
1.display:更改元素的显示水平
2.css声明更改元素的显示水平
在一个P标签中的img标签 设置了vertical-align:middle 图片不居中
不是vertical-align没起作用,而是太短,不够居中
实战:多行文字与图片垂直居中
<div class="test-list">
<span>文字</span>
<img src="test.jpg"/>
</div>
.test-list {text-align:justify}
.test-list > span{ display:inline-block; width:210px; vertical-align:middle }
.test-list > img{vertical-align:middle;}
第三讲 vertical-align 与 ling-height
vertical-align百分比是相对于line-height值计算的
{
line-height:30px;
vertical-align:-10%;
}相当于vertical-align=-3px
内联图片里面下边出现了空白,解决方法去掉行高,或者改变vertical-align属性bottom,top,middle都可以
基本现象衍生:垂直居中
vertical-align:middle;line-height:36px;
设置标签应用比图片大的行高,图片就近似垂直居中了。
第四回 vertical-align线类属性值深入理解
底线,顶线,中线的行为表现
vertical-align:bottom
1.inline/inline-block元素:元素底部和整行的底部对齐
2.table-cell元素:单元格底padding边缘和表格行底部对齐
vertical-align:top
vertical-middle
1.inline/inline-block元素:元素的垂直中心点和父元素基线上1/2 x-height处对齐
2.table-cell元素:单元格填充盒子相对于外面的表格行居中对齐。
近似垂直居中
完全垂直居中:设置font-size:0
第五回 深入理解vertical-align文本类属性值
vertical-align:text-top/text-bottom
定义
1.vertical-algin:text-top
盒子的顶部和父级centent-area的顶部对齐
2.vertical-align:text-bottom
盒子的底部和父级content area的底部对齐
1.元素vertical-align垂直对齐的位置与前后的元素都没有关系;
2.元素vertical-align垂直对齐的位置与行高line-height没有关系,至于字体大小与font-size有关
实际作用
表情图片与文字的对齐效果 图片(16x16)
使用基线的问题在于图标偏上
使用顶线/底线的问题在于受其他内联元素影响,造成巨大定位偏差
使用中线也是不错的选择,单需要恰好的字体大小以及兼容性要求不高
使用文本底部较合适不受行高以及其他内联元素影响;
第六回 vertical-align上标下标类
1.html中的上标 <sup>
2.html中的下标 <sub>
变小的是原来字体的75%大小
1.<sup> -->vertical-align:super
2.<sub> -->vertical-align:sub
定义
1.vertical-align:super
提高盒子的基线到父级合适的上标基线位置。
2.vertical-align:sub
降低盒子的基线到父级合适的下标基线位置。
实际应用
第七回:vertical-align前后不一的作用机制
相邻元素不同vertical-align的行为表现
当出现前后不一致的时候
关注当前元素和父级,
前后并没有直接影响
第八回 vertical-align糟糕的兼容性
IE6/7
firefox/chrome
css深入理解vertical-align的更多相关文章
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解之absolute(HTML/CSS)
absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- css深入理解padding
padding 中规中矩,性格温婉平和! 第一节:CSS padding与容器的尺寸——了解padding与元素尺寸之间关系 CSS padding与容器的尺寸关系复杂 对于block水平元素 没有p ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
随机推荐
- 文本编辑器Vim技巧
1. 导入文件内容 :r 文件名 2. 插入当前日期 :r !date 3. :!which ls 4. :r !命令
- 旧文备份:windows下编译和使用IT++
1.下载IT++最新版:<a href="http://sourceforge.net/projects/itpp/">http://sourceforge.net/p ...
- Java关键字transient和volatile小结
转自:http://heaven-arch.iteye.com/blog/1160693 transient和volatile两个关键字一个用于对象序列化,一个用于线程同步,都是Java中比较高阶的话 ...
- typeid操作符
typeid() operator返回type_info,返回值不可拷贝.不可赋值 // Illustrates the typeid operator. #include <iostream& ...
- macOs 使用Homebrew升级到MySQL 8系列之后,php无法连接解决方法
当前时间2018-9-28 在使用brew install mysql 默认安装为 MySQL 8,但是使用php连接到数据库之后,出现了这种错误 (Unexpected server respose ...
- HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)
BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...
- Delphi中DLL的创建和使用(转)
Delphi中DLL的创建和使用 1.DLL简介: 2.调用DLL: 3.创建DLL: 4.两个技巧: 5.初始化: 6.例外处理. 1.DLL简介 ...
- VUE前端无法启动
cd 到client中,使用npm run dev ,一直卡着也不报错,启动不了项目 可以直接使用 ,需要进入root目录进行 cnpm install npm -g
- [BZOJ2734][HNOI2012] 集合选数(状态压缩+思维)
Description 题目链接 Solution 可以根据条件构造出一个矩阵, 1 3 9 27 81... 2 6 18.... 4 12 36... 这个矩阵满足\(G[i][1]=G[i-1] ...
- 使用Windows Live Writer写文章时不要用360清除垃圾
ref:http://www.zhengsiwei.com/write-an-article-to-use-windows-live-writer-dont-use-360-to-remove-rub ...