行间距和文本样式

发布于:2023-02-02 ⋅ 阅读:(351) ⋅ 点赞:(0)

 

目录

 一、行间距

1、行高(line height)

2、单行文本在父元素中垂直居中

3、font中也可以指定行高

二、文本样式

1、设置文本的大小写

2、设置文本的修饰

3、设置字符间距      设置单词间距

4、设置文本对齐方式

5、设置首行缩进

6、设置网页如何处理空白

7、文本溢出包含元素时会发生什么

 8、text-shadow: h-shadow v-shadow blur color;

9、设置块元素的阴影

10、设置元素的垂直对齐方式


 一、行间距

1、行高(line height)

        文字占有的实际高度

        行高=上间距+字体大小+下间距

        默认情况下,上间距=下间距=(行高-字体大小)/2

                行间距=下间距+上间距=行高-字体大小

        line-height属性,可选值:

                (1)、可以直接放一个大小   ××px    ××em

                (2)、直接倍数     例如1 2 3

                            是当前字体大小的倍数

                (3)、百分比       200%

                            当前字体大小的百分比

2、单行文本在父元素中垂直居中

        text-align:center;

        当行文本行高设置和父元素高度一致

        line-height:和行高一致

3、font中也可以指定行高

        font:     25px/3

二、文本样式

1、设置文本的大小写

         text-transform 可选值:

                none        默认值,文本正常显示

                uppercase   文本大写

                lowercase   文本小写

                capitalize  首字母大写

2、设置文本的修饰

        text-decoration 可选值:

                none            默认值,文本正常显示

                undeline        下划线

                overline        上划线

                line-through    删除线

3、设置字符间距      设置单词间距

        letter-spacing                   word-spacing

4、设置文本对齐方式

        text-align 可选值:

                center  居中

                left    向左

                right   向右

                justfy  两端对齐

5、设置首行缩进

        text-indent 常用em单位

6、设置网页如何处理空白

        white-space

7、文本溢出包含元素时会发生什么

        text-overflow

补充:单文本的省略号

 p{

        background-color: aqua;

        width: 200px; /*设置宽度*/

        white-space: nowrap; /*设置空白不换行*/

        text-overflow: ellipsis; /*设置省略号*/

        overflow: hidden; /*裁剪溢出/多余部分*/

        }

多文本的省略号:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;/* */
            height: 100px;
            overflow: hidden;/* 溢出隐藏 */
            line-height: 20px;/* 设置行高与容器高度成倍数关系,这样避免文本溢出时,文字显示一半 */
            text-align: justify;/* 设置文本对齐方式为两端对齐,这样在伪元素内容遮盖末尾文字时才能对齐*/
            position: relative;/* 子绝父相,这里是为了给伪元素设置定位*/
        }
        .box::after{
            content: "...";/* 省略号是放在文本最后面的 */
            width: 1em;/* 设置伪元素的宽度为1em,是为了遮盖的时候正好遮盖中原来的一个字的大小*/
            position: absolute;/*设置定位,其位置就是文本的右下角 */
            right: 0;bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    </div>
</body>
</html>

 8、text-shadow: h-shadow v-shadow blur color;

        四个参数:

        第一个:阴影的水平位移距离  (必填,可正(右)可负(左))

        第二个:阴影的垂直位移距离  (必填,可正(下)可负(上))

        第三个:阴影的模糊半径      (数值越大越模糊)

        第四个:阴影的颜色          (默认是字体的颜色)

9、设置块元素的阴影

        box-shadow,参数与text-shadow一致

10、设置元素的垂直对齐方式

        vertical-align 可选值:

                baseline    基线对齐 沿着字母x最下方对齐

                top         顶部对齐

                bottom      底部对齐

                middle      居中对齐

        功能:

                1、设置元素垂直对齐的方式,这种功能只针对图片,文字,表格,不针对块元素

                2、解决图片三像素得到问题(面试题)

                        当引入图片的时候,没有设置任何样式的时候,会有大概三像素的空白

                        方案一:

                            vertical-align样式:设置一个baseline的样式

                        方案二:

                            设置父元素的font-size为0即可

                        方案三:

                            将图片转换成块元素

                        方案四:

                        将元素脱离文档流

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到