2024年最全前端基础学习路线入门教程css文本基础学习，算法的面试

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

p{text-indent: -5em; padding-left: 5em;}

效果如下：

F2E.TMING F2E.TMING F2E.TMING

使用百分比值

text-indent 可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中，缩进值是父元素的 20%，即 100 个像素：

p{width: 250px;}

div{text-indent: 20%;}

效果如下：

F2E.TMING F2E.TMING F2E.TMING

继承

text-indent 属性可以继承，请考虑如下标记：

div#outer {width: 250px;}

div#inner {text-indent: 10%;}

p {width: 200px;}

some text. some text. some text.

this is a paragragh.

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

效果如下：

some text. some text. some text.

this is a paragragh.

CSS文本 - color 属性

color 属性规定文本的颜色。

color属性有4种值的方式：

1) color_name

规定颜色值为颜色名称的颜色（比如 red）。如p{color:red;}

2) hex_number

规定颜色值为十六进制值的颜色（比如 #ff0000）。如:p{color:#ff0000;}

3) rgb_number

规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。如:p{color:rgb(255,0,0);}

4) inherit

规定应该从父元素继承颜色。

CSS文本 - text-overflow 属性

text-overflow 属性规定当文本溢出包含元素时发生的事情。

text-overflow属性有3种值的方式：

1) clip

修剪文本。如p{text-overflow:clip;}

页面上显示为 F2E.TMING

2) ellipsis

显示省略符号来代表被修剪的文本。如:p{text-overflow:ellipsis;}

页面上显示为 F2E.TMING

3) string

使用给定的字符串来代表被修剪的文本。如:p{text-overflow:string;}

页面上显示为 F2E.TMING

提示：一般与不换行white-space:nowrap;连用。

CSS文本 - vertical-align 属性

vertical-align 属性设置元素的垂直对齐方式。

提示：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

vertical-align属性有11种值的方式：

1) baseline

默认。元素放置在父元素的基线上。如p{ vertical-align:baseline;}

2) sub

垂直对齐文本的下标。如p{vertical-align:sub;}

3) super

垂直对齐文本的上标。如p{vertical-align:super;}

4) top

把元素的顶端与行中最高元素的顶端对齐。如p{vertical-align:top;}

5) text-top

把元素的顶端与父元素字体的顶端对齐。如p{vertical-align:text-top;}

6) middle

把此元素放置在父元素的中部。如p{vertical-align:middle;}

7) bottom

把元素的顶端与行中最低的元素的顶端对齐。如p{vertical-align:bottom;}

8) text-bottom

把元素的底端与父元素字体的底端对齐。如p{vertical-align:text-bottom;}

9) length

使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。如p{vertical-align:length;}

10) %

使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。如p{vertical-align:50%;}

11) inherit

规定应该从父元素继承 vertical-align 属性的值。如p{vertical-align:inherit;}

p{ font-family:“Times New Roman”,Georgia,Serif; }

CSS文本 - text-align 属性

text-align 属性规定元素中的文本的水平对齐方式。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align属性有5种值的方式：（前三个比较常用的）

1) left

把文本排列到左边。默认值：由浏览器决定。如p{text-align:left;}

页面上显示为 F2E.TMING

2) right

把文本排列到右边。如p{text-align:right;}

页面上显示为 F2E.TMING

3) center

把文本排列到中间。如p{text-align:center;}

页面上显示为 F2E.TMING

4) justify

实现两端对齐文本效果。如p{text-align:justify;}

页面上显示为 F2E.TMING

5) inherit

规定应该从父元素继承 text-align 属性的值。如p{text-align:inherit;}

页面上显示为 F2E.TMING

CSS文本 - direction 属性

direction 属性规定文本的方向 / 书写方向。

该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

direction属性有3种值:

1) ltr

默认。文本方向从左到右。如:p{direction:ltr;}

页面上显示为 F2E.TMING

2) rtl

文本方向从右到左。如:p{direction:rtl;}

页面上显示为 F2E.TMING

3) inherit

规定应该从父元素继承 direction 属性的值。如:p{direction:inherit}

页面上显示为 F2E.TMING

CSS文本 - word-break 属性

word-break 属性规定自动换行的处理方法。

提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

word-break属性有3种值:

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。