Web全栈工程师之路(二)——CSS篇(十一)——文本的水平与垂直对齐以及其他文本样式

 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS初识(十一)——文本的水平与垂直对齐以及其他文本样式</title>
    <style>
        .box1{
            width: 350px;
            border: 1px solid #e12914;
            /*两端对齐*/
            text-align: justify;
        }

        .box2{
            width: 600px;
            border: 1px solid #e12914;
            font-size: 30px;
        }
        span{
            font-size: 20px;
            border: 1px solid #e12914;
            /*不严谨的垂直居中*/
            vertical-align: middle;
        }

        p{
            border: #e12914 1px solid;
        }
        img{
            /*消除图片的基线*/
            vertical-align: top;
        }

        .box3{
            font-size: 20px;
            border: #e12914 solid 1px;
            /*这里删除线的颜色、以及样式，IE浏览器不支持(dashed:虚线)*/
            text-decoration: line-through #e12914 dashed;
        }

        .box4{
            width: 500px;
            font-size: 20px;
            border: #e12914 solid 1px;
            /*保留空白(自己试试效果)*/
            /*white-space: pre;*/
            /*一下三个属性同时存在时，文字省略号效果方可实现*/
            /*不换行*/
            white-space: nowrap;
            /*隐藏出框的内容*/
            overflow: hidden;
            /*将溢出的内容设置为省略号*/
            text-overflow: ellipsis;
        }
    /*
        text-align：文本的水平对齐
            可选值：
                left 左侧对齐
                right 右侧对齐
                center 居中对齐
                justify 两端对齐

        vertical-align 元素的垂直对齐
            可选值：
                baseline 默认值 基线对齐(文字底线对齐) 让父元素与子元素里的文字进行基线对齐
                top 顶边对齐
                bottom 底边对齐
                middle 居中对齐 不是严格意义上的居中 只是让文字的中心与英文小写x的中心对齐
                px 常用，微调

        其他文本样式：
            text-decoration：文本修饰属性
                可选值：
                    none 默认值
                    underline 下划线
                    overline 上划线
                    line-through 删除线(从字体中间穿过)

            white-space 设置网页如何处理空白
                可选值：
                    normal 默认值，正常情况
                    nowrap 不换行
                    pre 保留空白

            text-overflow 文本溢出元素设置
                可选值：
                    clip 修剪文本
                    ellipsis 显示省略符号来代表被修剪的文本
                    string 使用给定的字符串来代表被修剪的文本

      */
    </style>
</head>
<body>
    <div class="box1">
        道可道，非常道；名可名，非常名。
        无名，天地之始，有名，万物之母。
        故常无欲，以观其妙，常有欲，以观其徼。
        此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
    </div>
    <br>
    <div class="box2">
        道可道，非常道；Hello,worldx!<span>名可名，非常名。</span>
    </div>
    <p>
        <!--  图片与p标签之间存在缝隙，这个缝隙距离就是图片的基线  -->
        <img src="https://i1.hdslb.com/bfs/face/af980d49205f4661f68ad2a09161c1da11d09483.jpg_64x64.jpg" alt="壁纸娘">
    </p>
    <div class="box3">
        道可道，非常道；名可名，非常名。
    </div>
    <div class="box4">
        道可道，非常道；名可名，非常名。
        无名，天地之始，有名，万物之母。
        故常无欲，以观其妙，常有欲，以观其徼。
        此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
    </div>
</body>
</html>

 

posted @ 2020-04-25 12:50  骨桜  阅读(192)  评论(0)    收藏  举报