【css文章段落不整齐】CSS段落对齐方式、系统识别块级元素和内嵌元素以及CSS前端分页

[技术等级]初级

[文章开始] 《CSS文本属性，让你的段落更加美观，前端之路更进一步》

本文重点介绍了CSS技术中文本样式的text-align属性、块级元素和内嵌元素的使用。本文是前端开发的初级教程，适合刚接触CSS技术的学习者。

首先，设置排序：

CSS技术使用text-align属性设置对齐方式

首先，在使用这个属性时，要明确谁是以谁为准排序的。让我们一起看看下面的代码。

迪布

P style="text-align 3360 center "今日头条/p

/div

在上面的代码中，使用text-align属性的标记对是p/p标记对。那么，谁以谁为基准垂直居中呢？以下是两种可能的情况。

p标签对相对于容器div标签对垂直居中

P标记对的内容(即“今日头条”字符)相对于P标记对本身垂直居中。

大家仔细想想。应该是这种情况吗？

正确答案是第二个。也就是说，使用text-align属性的标记对将此标记对的内容对齐到标记对内部，而不是容器内部。

第二，要相对于自身对齐文本，必须有自己的标记对的宽度和高度。在上面的代码中，P标记对的默认宽度是整个页面的宽度。也就是说，该标签本身有宽度，内部文本数量少，因此text-align在使用过程中可以看到效果。

综合以上内容，可以说在使用text-align属性时要注意以下两点：

对齐效果是相对于自身容器对齐内部文本内容的方法。

记号笔要对自己有一定的宽度。

Text-align属性可以有多个值：

左对齐，左对齐。内部文本在自己的容器中左对齐

中心，居中。内部文本与自身容器居中对齐。

右对齐，右对齐。内部文本在其自身容器内向右对齐。

Justify，两端对齐。内部文本与自身容器的两端对齐。也就是说，整个段落的左边是整齐的，右边是整齐的。这种对齐方式与左对齐方式不同。左对齐可以清楚地观察到段落的右侧不整齐。

左对齐和两端对齐之间的差异

如上图所示，两端最右侧，也就是暗线重合的位置。左对齐段落此行附近的段落文本不对齐。使用两端对齐的此行附近的段落文本将对齐。

二、块级元素和内嵌元素

根据页面上内容的外观，将HTML中的每个标签分为两类。一个称为“块级元素”，另一个称为“内联元素”。

典型的块级元素是div/div标签对。

典型的内嵌元素是span/span标签对。

这两个标签本身没有任何外观效果，内部可以包含所有HTML标签对，是网页布局中常用的两个容器。苏表狟div/div梓腔遵仅岆珜酦腔淕遵仅﹝。换句话说，一个div/div标签占据一行，称为“块级元素”。Span/span标签的宽度是内部内容的宽度，多个span/span标签的内容可以显示在一行中，称为「内嵌元素」或「内嵌元素」。

还有哪些块级元素标记？

常用的块级元素标记还包括p/p ul/ul o

l></ol> <li></li> <table></table> <form></form>

还有哪些内联元素标记：

• 常用的内联元素标记还包括：<a></a> <img /> <input /> <select></select> <textarea></textarea>

三、块级元素与内联元素的区别：

块级元素和内联元素的的区别可以从下图中看到。

“块级元素”和“内联元素”的区别

四、学习两个新的CSS属性

我们这里学习两个简单的CSS属性，分别为width和height属性。

• width，为块级元素设置宽度。

• height，为块级元素设置高度。

这两个属性的取值必须是带有单位的数值。

例：div{width:200px; height:30px;}

上述代码将页面中所有的<div></div>标记对都设置为了宽度200像素、高度30像素的矩形。也就是说这样一来，<div></div>标记对再也不占有整个页面的整宽了，但是仍然为独占一行的情况。

这两个属性是用来设置元素的宽度和高度的，但是只能适用于块级元素。这也是内联元素没有宽度的一个重要原因：因为利用width属性为内联元素设置宽度是没有效果的。

文章预告

下一篇文章中，小海老师会为大家从细节上深入剖析line-height属性以及该属性的用法。对于渴望在前端开发道路上前进的你一定不能错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。