HTML 学习记录(十一)

行高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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiao_wang98

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值