【前端面试官】JavaScript的算数运算符与比较运算符

最新推荐文章于 2024-04-25 14:36:25 发布

web前端框架

最新推荐文章于 2024-04-25 14:36:25 发布

阅读量79

点赞数

分类专栏：程序员文章标签：面试前端大前端

本文链接：https://blog.csdn.net/m0_60196787/article/details/119006864

版权

程序员专栏收录该内容

29 篇文章 1 订阅

订阅专栏

字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。常见的文本样式如下表。

属性	说明

接下来，我们一起来看看这些属性的运用。

text-indent

p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个 （空格）来实现首行缩进两个字的空格。但是这种方式会导致冗余代码很多。因此使用text-indent属性来定义p元素的首行缩进。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>首行缩进</title>
        <style type="text/css">
            p{
                font-size: 14px;
                text-indent: 28px;
            }
        </style>
    </head>
    <body>
        <p>从明天起，做一个幸福的人，喂马，劈柴，周游世界；从明天起，关心粮食和蔬菜，我有一所房子，面朝大海，春暖花开；从明天起，和每一个亲人通信，告诉他们我的幸福。那幸福的闪电告诉我的，我将告诉每一个人；给每一条河每一座山取一个温暖的名字。陌生人，我也为你祝福，愿你有一个灿烂的前程；愿你有情人终成眷属；愿你在尘世获的幸福；我也愿面朝大海，春暖花开。</p>
    </body>
</html>

text-align

使用text-align属性来控制文本在水平方向上的对齐方式。

text-align属性值：

left（左对齐）
center（居中对齐）
right（右对齐）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>水平对齐</title>
        <style type="text/css">
            .p1{
                text-align: center;
            }
            .p2{
                text-align: right;
            }
            .p3{
                text-align: left;
            }
        </style>
    </head>
    <body>
        <p class="p1">我爱学习</p>
        <p class="p2">我爱学习</p>
        <p class="p3">我爱学习</p>
    </body>
</html>

text-decoration

使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。text-decoration属性取值有4个，如下表。

属性值	说明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>文本修饰</title>
        <style type="text/css">
            .p1{
                text-decoration: underline;
            }
            .p2{
                text-decoration: line-through;
            }
            .p3{
                text-decoration: overline;
            }
        </style>
    </head>
    <body>
        <p class="p1">我爱学习</p>
        <p class="p2">我爱学习</p>
        <p class="p3">我爱学习</p>
    </body>
</html>

line-height

可以使用line-height属性来控制一行文本的高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>行高</title>
        <style type="text/css">
            .p1{
                line-height: 15px;
            }
            .p2{
                line-height: 30px;
            }
            .p3{
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <p class="p1">我爱学习</p><hr />
        <p class="p2">我爱学习</p><hr />
        <p class="p3">我爱学习</p>
    </body>
</html>

text-transform

可以使用text-transform属性来将文本进行大小写转换。text-transform属性取值有4个，如下表。

属性值	说明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>大小写</title>
        <style type="text/css">
            .p1{
                text-transform: uppercase;
            }
            .p2{
                text-transform: lowercase;
            }
            .p3{
                text-transform: capitalize;
            }
        </style>
    </head>
    <body>
        <p class="p1">Study hard and make progress every day</p>
        <p class="p2">Study hard and make progress every day</p>
        <p class="p3">Study hard and make progress every day</p>
    </body>
</html>

letter-spacing

可以使用letter-spacing属性来控制字与字之间的距离。每一个中文汉字都被当作一个“字”，而每一个英文字母也被当作一个“字”。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>字间距</title>
        <style type="text/css">
            .p1{
                letter-spacing: 0px;
            }
            .p2{
                letter-spacing: 5px;
            }
            .p3{
                letter-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <p class="p1">Study hard and make progress every day.好好学习，天天向上</p>
        <p class="p2">Study hard and make progress every day.好好学习，天天向上</p>
        <p class="p3">Study hard and make progress every day.好好学习，天天向上</p>
    </body>
</html>

word-spacing

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，这套面试题囊括了几乎所有前端的知识点，感兴趣的可以点此获取~

web前端框架

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【前端面试官】JavaScript的算数运算符与比较运算符

字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。常见的文本样式如下表。属性说明|text-indent|首行缩进|text-align|水平对齐|text-decoration|文本修饰|line-height|行高|text-transform|大小写转换|letter-spacing、word-spacing|字母间距、词间距接下来，我们一起来看看这些属性的运用。text-indentp元素的首行是
复制链接

扫一扫