php响应式网站,网页游戏浏览器,专做尼泊尔的旅行网站,短视频网站的动画是怎么做的1. 前置知识
在真正讲解vertical-align属性之前#xff0c;我们需要了解下面一些前置的知识
1.1 x-Height
在各种内联相关模型中#xff0c;凡是涉及垂直方向的排版或者对齐的#xff0c;都离不开最基本的基线#xff08;baseline#xff09;。例如#xff0c;line-he…1. 前置知识
在真正讲解vertical-align属性之前我们需要了解下面一些前置的知识
1.1 x-Height
在各种内联相关模型中凡是涉及垂直方向的排版或者对齐的都离不开最基本的基线baseline。例如line-height 行高的定义就是两基线的间距vertical-align 的默认值就是基线 字母 x 的下边缘线就是我们的基线。 通俗地讲x-height 指的就是小写字母 x 的高度术语描述就是基线和等分线mean line也称作中线midline之间的距离。 注意 在 CSS 世界中vertical-align: middle的middle 指的是基线往上 1/2 x-height 高度。我们可以近似理解为字母 x 中间的交叉点那个位置。跟上面的 median中线不是一个意思。 由此可见vertical-align:middle 并不是绝对的垂直居中对齐我们平常看到的middle 效果只是一种近似效果。主要是因为不同字体的文字在行内盒子中的位置是由些许不一样的。 1.2 line-height
对于非替换元素即不包括input,img,select,textarea元素的纯内联元素其可视高度完全由 line-height 决定对于块级元素line-height 对其本身是没有任何作用的我们平时改变 line-height块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。无论内联元素 line-height 如何设置最终父级元素的高度都是由数值大的那个 line-height 决定的
示例
.box { line-height: 96px;
}
.box span { line-height: 20px;
}
和
.box { line-height: 20px;
}
.box span { line-height: 96px;
}
假如文字就 1 行上述两种情况.box 元素的高度都是96px
2. vertical-align
2.1 生效前提
vertical-align 属性只能作用在 display 计算值为 inline、inline-blockinline-table 或 table-cell 的元素上 浮动和绝对定位会让元素块状化因此这两种情况也不会使vertical-align属性生效 2.2 各种属性值
1px数值/百分比值
当我们给内联元素设置 vertical-align:10px则内容就会在当前基线位置再往上精确偏移 10px。该数值是相对于当前元素的基线baseline的位置即正数则上移负数则下移。从这一点来看vertical-align:baseline等同于vertical-align:0。
当为百分比值时其相对的是当前元素line-height的百分比。假设某元素的 line-height 是 20px那么此时 vertical-align:-25%相当于设置vertical-align:-5px。但是在如今的网页布局中line-height 的计算值都是相对固定并且已知的因此直接使用具体的数值反而更方便。
2baseline
vertical-align 属性的默认值 baseline 表示当前元素的基线和父元素的基线位置对齐基线即父元素中英文小写x的下沿位置。对于替换元素则是替换元素的下边缘
div classfatherspan classx小写的x/spanspan classvavertical-align/span
/div.father {line-height: 40px;}.x{background-color: green;}.va{vertical-align: baseline;background-color: red;}3middle
vertical-align 属性值 middle表示当前元素的垂直中心点和父元素的基线往上 1/2 x-height 处对齐。 换句话说vertial-align:middle可以让内联元素的真正意义上的垂直中心位置和字符 x 的交叉点对齐
div classfatherspan classx小写的x/spanspan classvavertical-align/span
/div.father {line-height: 40px;}.x{background-color: green;}.va{vertical-align: middle;background-color: red;}需要注意如果是 inline-block 元素则规则要复杂了一个 inline-block 元素如果里面没有内联元素或者 overflow不是 visible则该元素的基线就是其 margin 底边缘否则其基线就是元素里面最后一行内联元素的基线 4top和bottom
div classfatherimg src./test.jpg altspan classvabottom/span
/div.father {/*!*父元素字体设置为0解决缝隙问题*!*/font-size: 0;}img{width: 50px;height: 50px;/*单独再设置font-size解决缝隙问题*/font-size: 12px;}.va{vertical-align: top;/*vertical-align: bottom;*/background-color: red;font-size: 12px;}vertial-align:top 就是使当前元素和父元素垂直上边缘对齐或者说使当前元素及其后代元素的顶部与整行的顶部对齐。
vertial-align:bottom 就是使当前元素和父元素垂直下边缘对齐或者说使当前元素及其后代元素的底部与整行的底部对齐。。 需要注意区分top/bottom是与当前元素和父元素边缘有关而middle/baseline是和字符 x 打交道。 5text-top和text-bottom
div classfatherspan classtext父元素内文字/spanspan classvatext-bottom/span
/div.father {/*父元素字体设置较大点*/font-size: 28px;}.text{background-color: green;}.va{vertical-align: text-top;/*vertical-align: text-bottom;*/background-color: red;/*va元素字体设置较小点*/font-size: 12px;}vertial-align:text-top 就是使使当前元素的顶部与父元素的字体顶部对齐。
vertial-align:text-bottom 就是使使当前元素的底部与父元素的字体底部对齐。
疑问top/bottom和text-top/text-bottom的具体区别在哪 top的顶部对齐的参考对象为当前整行的顶部受line-height影响而text-top只看父元素内文字字体的顶部而不关心行高。bottom与text-bottom区别同理 6sub和super
vertical-align:super提高盒子的基线到父级合适的上标基线位置。
vertical-align:sub降低盒子的基线到父级合适的下标基线位置。
这两个属性值使用场景很少基本用于一些数学公式或化学符号。
sup标签默认的 vertical-align 属性值就是 supersub标签默认的 vertical-align 属性值就是 sub。
zhangxinxusup[1]/sup NHsub4/subHCOsub3/sub
