3、文本行高与盒子高度关系
三、完整代码示例
代码示例
显示效果
一、标签显示模式示例
----
实现 横向导航栏 , 要求如下 :
每个导航按钮都有指定的宽高 ,
有默认背景 ,
鼠标移动上去背景和文字都会改变..., 显示的样式 ;
二、文字垂直居中
----
在 CSS 中没有文字垂直居中的 设置 , 需要结合 行高 和 元素高度 进行设置 ;
1、行高测量
单行文字显示 , 存在四条线 :
顶线 : 文字上边界...上边距 + 下边距
上边距 与 下边距 是 相等的 , 因此只要 盒子的高度 与 文本高度 相同 , 就可以做到文字内容垂直居中 ;
设置 文本的行高 等于 盒子标签 的高度 , 就可以实现 文本的...与 盒子高度 关系 :
文本行高 = 盒子高度 : 文本垂直居中 ;
文本行高 > 盒子高度 : 文本偏下 ;
文本行高 < 盒子高度 : 文本偏上 ;
之前的 文本样式 :
文本偏上 , 说明...默认状态 :
鼠标移动到链接上的样式 :
点击按钮 , 在新窗口中打开页面 :