结尾
学习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;}
this is a paragragh.
以上标记中的段落也会缩进 50 像素,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
效果如下:
some text. some text. some text.
this is a paragragh.
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种值:
后话
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
对于面试,说几句个人观点。
面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。
所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。