09 - vertical-align和line-height

最新推荐文章于 2022-07-07 00:52:44 发布

xyyojl

最新推荐文章于 2022-07-07 00:52:44 发布

阅读量132

点赞数

分类专栏：前端 html+css 文章标签： vertical-align line-height

本文链接：https://blog.csdn.net/xyyojl/article/details/82619869

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html+css

21 篇文章 0 订阅

订阅专栏

vertical-align和line-height

文本水平对齐方式text-align

.para{
    width: 500px;
    background-color: #ccc;
    text-align: justify;/*左右均分对齐,文字必须不是处于最后一行,必须有换行*/
}
<p class='para'>页面的主体内容展示区域</p>

什么是基线?

以x的下面的两个端点形成的直线

PS.把页面中的文字删掉,其实基线还是存在的,就相当于在即使没有在英文本上写字,基线还是会存在

基线的作用:

行高指的是上一行基线与下一行基线的距离

一个标签是由什么决定的它的高度?

标签的高度是line-height决定的

例子说明:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高度是由行高撑起来的</title>
    <style>
        .para{
            background-color: #f60;
            line-height: 0;/* 当设置行高为0,p标签的的盒子高度为0 */
            /*line-height: 16px;
            font-size: 0;*/
            /* p标签的高度是16px  */
            /* 高度是由行高撑起来的 */
        }
    </style>
</head>
<body>
    <p class='para'>页面的主体内容展示区域</p>
</body>
</html>

css中的单位:(ex)

ex是长度单位1ex = x-height 即字母x的高度

基线确实存在,我们自己把文字写上去

line-height定义

上下两行文字的基线之间的距离,其实文字可以理解成依附于基线而放置的

默认值是normal,默认的行高跟font来

line-height:normal在不同的浏览器上是不一样的,需要做样式初始化

行间距是什么?

上下两行文字之间的间距:行距 = 行高 - 文字大小

line-height调整行与行之间的间距

line-height的值

normal : 默认值(自动调整合力的行间距,和字体有关…)
number: 具体的数值(无单位),以字体的尺寸乘积设置行间距,继承倍数
lenght: 具体的数字(带单位px/em等),固定的行间距,继承数值
%: 类似于number(但在继承上不一致)
inherit: 继承父元素line-height
line-height: 支持0,不支持负值,但是行距可以被计算出负值

number和%的区别:

那一个比较好?

%是相对的概念,最后计算出来,设置成具体的数值,最后会被转化成数值

一个是倍率,一个就是数值

vertical-align

定义行内元素的基线相对于该元素所在行的基线的垂直对齐

数值,元素基线超过父元素的基线指定高度,可以取负值
百分比: 相对于line-height计算

属性值	含义
baseline	默认,元素基线与父元素的基线对齐
bottom	元素及其后代的底端与整行的底端对齐
text-bottom	元素底端与父元素字体的底端对齐
middle	元素中垂线与父元素的基线加上x-height/2对齐
text-top	元素顶端与父元素字体的顶端对齐
top	元素及其后代的顶端与整行的顶端对齐

例子说明:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小demo</title>
    <style>
        .para{
            background-color: #ccc;
            line-height: 1.5;/* 行高会继承 */
        }
        span{
            font-size: 32px;
            background-color: #f00;
            vertical-align: bottom;/* 可以通过修改这个属性值来熟悉一下 */
        }
        /* 添加行高,检验text-bottom */
    </style>
</head>
<body>
    <p class='para'>这是一段文字gfx<span class='box'>gfx这是一段文字</span></p>
</body>
</html>

vertical-align解决的问题

图片下面的间隙的产生原因以及解决办法:

原因: 图片对齐方式基线对齐,预留底线的距离

解决办法: 变成块级元素/font-size/line-height/vertical-align(top/middle/bottom)
盒子存在这里,行内块元素参考的我们的基线来实现的

小Tips:

没有行高,bottom和text-bottom一样的
写标签的时候,要考虑元素的类型,做布局的时候,考虑元素类型
不要只看到效果,要效果怎样去做,怎么去使用很方便
经常更新的,我们使用img标签,否则,使用背景图片

xyyojl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09 - vertical-align和line-height

vertical-align和line-height文本水平对齐方式text-align.para{ width: 500px; background-color: #ccc; text-align: justify;/*左右均分对齐,文字必须不是处于最后一行,必须有换行*/}&lt;p class='para'&gt;页面的主体内容展示区域&lt;/p&g...
复制链接

扫一扫