HTML 学习记录（十一）

最新推荐文章于 2024-06-27 11:38:14 发布

xiao_wang98

最新推荐文章于 2024-06-27 11:38:14 发布

阅读量100

点赞数

分类专栏：笔记文章标签： html 学习 css3

本文链接：https://blog.csdn.net/little_w98biubiu/article/details/124818006

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

行高line-height:文字在页面占用的实际高度

一般说的字体大小n像素并不是意味着字正好是n像素大小，就跟写字一样写字不会占满整行，而两条线之间的距离就是行高，而文字是写在这个范围内并不是说充满了这个高度。可以直接指定行高的大小也可以直接为行高设置一个整数(整数情况下行高为字体大小的整数倍0)，默认行高1.33。

字体框：字体存在的格子，字都是写在字体框里面，设置font-size实际就是设置字体框的高度。行高是如何分配的？行高是在字体框的上下方平均分配的(可以保证文字始终在线的中间)。可以通过这一特性，设置行高与包含块一样的高度来实现单行文字的垂直居中。

        div{
            height: 200px;
            font-size: 50px;
            border: 1px red solid;
            line-height: 200px;
        }

行高还可以用来设置行间距：行间距=行高-字体大小

文本的样式：

基线：文字底边所在的那条边(保证一边齐)

text-align:文本的水平对齐

                left 左对齐

                right 右对齐

                center 居中对齐

                justify 两端对齐

vertical-align:文本的垂直对齐

                baseline 默认值，基线对齐

                top 顶部对齐

                bottom 底部对齐

                middle 居中对齐(但不是严格的居中将子元素的中线与x字母中线对齐)

                直接指定值调整位置

text-decoration:设置文本修饰

                none 默认值，没有

                underline 下划线

                line-through 删除线

                overline 上划线

同时可以指定颜色和样式(但是IE不兼容)

white-space: 设置网页中如何处理空白

                normal 默认值，正常处理

                nowrap 不换行(可以配合overfloe:hidden样式将多余的内容裁剪掉

再结合text-overflow: ellipsis，用于设置省略号)

                pre 保留空白(写成什么样就显示成什么样)

！！通过设置垂直对齐方式来解决图片默认基线对齐导致与边框之间留有缝隙的问题！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 水平布局 */
        div{
            /* width: 500px; */
            /* font-size: 45px; */
            /* border: 1px red solid; */
            /* 居中对齐 */
            /* text-align: justify; */
        }
        /* 垂直布局 */
        span{
            font-size: 20px;
            border: 1px blue solid;
            vertical-align: baseline;
        }
        p{
            border: 1px red solid;
        }
        /* 通过设置垂直对齐方式来解决图片默认基线对齐导致与边框之间留有缝隙的问题 */
        img{
            vertical-align: top;
        }

        /* 下划线 */
        .box1{
            font-size: 50px;
            text-decoration: underline red dotted;
        }
        /* 文本省略号 */
        .box2{
            width: 200px;
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <!-- <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa placeat quod recusandae atque iure harum aliquid rem saepe voluptas, labore dolore reiciendis rerum doloremque cum laboriosam quaerat illum minus reprehenderit.</div> -->
    <!-- <div>今天天气good<span>真不错good</span></div> -->
    <!-- <p><img src="../01_introuduce/img/p1.jpg" alt=""></p> -->
    <div class="box1">今天天气</div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione dicta id temporibus veniam soluta voluptatem blanditiis, at, quam ipsa est exercitationem vero quis omnis adipisci itaque ad? Magni, consequatur perspiciatis.
        aa
                aa
    </div>
</body>
</html>

xiao_wang98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 学习记录（十一）

行高line-height:文字在页面占用的实际高度一般说的字体大小n像素并不是意味着字正好是n像素大小，就跟写字一样写字不会占满整行，而两条线之间的距离就是行高，而文字是写在这个范围内并不是说充满了这个高度。可以直接指定行高的大小也可以直接为行高设置一个整数(整数情况下行高为字体大小的整数倍0)，默认行高1.33。字体框：字体存在的格子，字都是写在字体框里面，设置font-size实际就是设置字体框的高度。行高是如何分配的？行高是在字体框的上下方平均分配的(可以保证文字始终在线的中间)。可以通过
复制链接

扫一扫