CSS深入理解学习笔记之vertical-align
1、vertical-align基本認(rèn)識(shí)
支持的屬性值：
①線類：baseline（默認(rèn)），top，middle，bottom
②文本類：text-top，text-bottom
③上標(biāo)下標(biāo)類：sub，super
④數(shù)值百分比類：
數(shù)值和百分比的共性：ⅰ都帶數(shù)字；ⅱ都支持負(fù)值；ⅲ行為表現(xiàn)一致（都是在baseline基礎(chǔ)上上下偏移數(shù)值大小，百分比類以line-height計(jì)算，IE6/IE7下vertical-align百分比值不支持小數(shù)line-height）。
2、vertical-align起作用的前提
應(yīng)用于inline水平以及“table-cell“元素。
默認(rèn)狀態(tài)下支持vertical-align的元素：圖片、按鈕、文字和單元格。
table-cell的vertical-align只會(huì)作用在自身，對(duì)子元素設(shè)置vertical-align是沒(méi)有意義的：
3、vertical-align與line-height
流式布局多余的空白處理：
?4、vertical-align底線、頂線、中線的行為表現(xiàn)
vertical-align:bottom
定義：①inline/inline-block元素：元素底部和整行的底部對(duì)齊；②table-cell元素：單元格padding邊緣和表格行的底部對(duì)齊
vertical-align:top
定義：①inline/inline-block元素：元素頂部和整行的頂部對(duì)齊；②table-cell元素：單元格頂padding邊緣和表格行的頂部對(duì)齊。
vertical-align:middle
定義：①inline/inline-block元素：元素的垂直中心點(diǎn)和父元素基線往上1/2x-height處對(duì)齊；②table-cell元素：單元格填充盒子相對(duì)于外面的表格行居中對(duì)齊。
inline/inline-block元素如果單純的設(shè)置middle，由于文字的下沉特性，圖片只能夠近似垂直居中，如果想要完全垂直居中，font-size需要設(shè)置為0。
5、說(shuō)說(shuō)vertical-align:text-top/text-bottom
? 定義：盒子的頂部/底部和父級(jí)content area的頂部/底部對(duì)齊。?
注：vertical-align僅與父級(jí)的font-size有關(guān)。
應(yīng)用環(huán)境：
6、深入理解vertical-align:sub/super
html中<sup>和<sub>功效相同，同時(shí)字體也會(huì)略微縮小，是原字號(hào)的75%大小。
定義：提高/降低盒子的基線到父級(jí)合適的上/下標(biāo)基線位置。
7、vertical-align前后不一的行為機(jī)制
應(yīng)用：
注：關(guān)注當(dāng)前元素和父級(jí)，前后并沒(méi)有直接影響。
8、vertical-align糟糕的兼容性
chrome和IE7下就有明顯的不同。
原因：①IE7下圖文一體；②middle的解釋有問(wèn)題
解決方案：
使用inline-block破壞圖文一體；
?
9、vertical-align的實(shí)際應(yīng)用
⑴小圖標(biāo)和文字的對(duì)齊
使用vertical-align負(fù)值沒(méi)有兼容性差異。
⑵不定尺寸圖片或多行文字的垂直居中：①主體元素inline-block化；②0寬度100%高度輔助元素；③vertical-align：middle
?
轉(zhuǎn)載于:https://www.cnblogs.com/tinyTea/p/7218651.html
總結(jié)
以上是生活随笔為你收集整理的CSS深入理解学习笔记之vertical-align的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： spark整合hadoop安装
- 下一篇： Spring Cloud Zuul网关