这一行从哪里开始？让我们从一个老式的前端面试问题开始。块级元素和行内元素问：块级元素和行内元素有什么区别？估计所有的同学都在各种前端面试中被问过，当然也在各种网站上搜索过答案。要真正列出两者的区别，你可以找到很多，但本质上，这就是区别：一个块级（block）元素可以控制它的大小，一个内联元素可以将它排列到父级的行系统中。我想调用元素的这两个属性。因为内联元素有inline属性，多个内联元素会排列成一行；但是它们没有block属性，所以不能用width和height指定它们的width和height。因为块级元素有block属性，可以直接指定元素的宽高；因为块级元素没有inline属性，它们会占据一行。这两个特性还可以叠加：同时具有inline和block特性的inline-block元素，可以设置宽高，也可以按line系统排列。如果这两个功能都不存在，则显示为：无。注意这里说的block和inline是相对于同级元素而言的，元素的子元素有不同的布局方式。如果指定不同子节点的布局，并叠加block和inline特性，则有table（具有block特性，子元素以table方式布局），inline-table（具有inline和block特性，子元素以table方式布局）outintablemode),flex,inline-flex,grid,inline-grid等。有了这样的概念，就可以解释一些特殊的现象了。比如text-align对块级元素没有影响：因为块级元素所在的行是独立于父行系统的，一个设置行内位置的CSS属性当然是行不通的。再比如margin:0auto只作用于块级元素：因为只有块级元素占据一行，所以它有足够的空间在行中自由排列。请再次注意：text-align排列元素的子节点，而margin排列元素本身。HTML页面默认采用流式布局，水平和垂直方向不相等。默认情况下，HTML页面中的文本在writing-mode中总是从左到右水平排列，当一行写满时，会在该行下方创建另一行。并不是text-align不能在垂直方向起作用，只是当前行系统是垂直的（writing-mode:vertical-lr）。margin:auto0默认情况下，块级元素不会垂直居中，因为缺少内联特性只允许元素占据单行，而不是单列。让水平方向和垂直方向相等也很简单：position:absolute,如果使用top:0;底部0;要垂直填充元素，可以使用margin:auto0使元素垂直居中。行系统块级元素和表元素有什么区别？不同之处在于：块级（block）元素使用行系统来布局子节点。所谓行系统，就是以行为基础的子节点排列方式。默认情况下，它们是从左到右依次排列的，当超过一行时，它们将被折叠。每个块级元素都有自己的行系统，块元素和内联块元素也是如此。不同块级元素的行系统是独立的，即使它们之间存在父子关系。您可以左对齐块元素并右对齐其子内联块元素，没有任何问题。既然有了行的概念，那每一行有多高呢？这就引出了行高的概念，它是由CSS属性line-height控制的。默认值是正常的。不同的浏览器对待normal的方式不同。您也可以手动指定它的值。可以是一个数字，表示当前元素的font-size的倍数，也可以是一个绝对值，多少像素等。元素的行高可以很大也可以很小。行中放置元素后左右可能会有空格，可能刚好合适，也可能根本放不下。控制行中节点位置的CSS属性是vertical-align，默认为baseline。一行中最常存储的节点是文本。由于每个字符的高度不同，为了显示整齐，行中的字符不能简单地上下对齐或居中排列。每个角色都需要一个基准来对齐，所以就有了基准的概念。可以看到图中最后几个字母hinx下面有一两条短线，叫做衬线，有衬线的字体叫做衬线字体。他们在同一条直线上，这条直线的位置就是基线。文字默认按照基线对齐，基线的位置与当前字体有关，不同字体的位置不同。当行高超过最大字符高度时，基线会向行的中间移动，这就是为什么将line-height的值设置为父元素的高度可以使文本垂直居中。vertical-align有几个可选值，其中最常用的应该是middle。同学们应该遇到过这样的问题：给一个内联块元素设置了vertical-align:middle，但是这个元素不在中间，总是会偏离一点点。vertical-align:middle其实就是不把元素绝对放在父元素的中间（别看w3school上面的初学者文档等等），官方在MDN上给出的描述是：垂直线元素的基线和父元素的基线加上要对齐的高度值的小写x的一半。vertical-align：middle的对齐方式与父元素的基线和字体大小有关，但这个值不一定是父元素的中心线。那么解决方法也很简单，设置父元素font-size:0，当fontsize为0时，基线必须在元素中间，小写x的一半的高度值也必须为0顺便说一句，font-size:0对于消除多余的空格也很有用，这在使用display:inline-block进行水平布局时非常有用。再次注意vertical-align控制行内元素在它们所在行内的居中。它仅适用于具有inline属性的元素，包括inline-block元素。另外，如果使用vertical-align:middle让一个元素在父元素中间垂直居中，记得同时设置white-space:nowrap，防止多个元素换行。前面说了text-align，除了left，center，right这些常用值之外，还有一个非常有用的值：justify——两端对齐。当只有一行时，两端对齐相当于左对齐；但是当有多行时，两端对齐会将除最后一行之外的所有前面的行拆分为单词（空白字符）并均匀分散并对齐。事实上，这个值对行中的行内块元素也有效。为了使text-align:justify生效，必须保证有多行（只对最后一行之前的行有效），并且必须保证相邻的inline-block元素之间有空白字符（和字体）大小不能为0）。前者可以通过一个display:inline-block来实现；width:100%伪元素（伪元素作为最后一行）；后者如果是手写的HTML一般是可以用的，如果是用ng-repeat和v-for生成的，最重要的元素就需要下点功夫手工制作了。text-align:justify相对hacky，浏览器兼容性高。需要兼容IE8的同学应该或多或少用过，可能遇到过各种各样的问题。后面的灵活盒（flex）布局中比较好用的justify-content:space-between就是这个属性的极好替代品，这就是后话了。还有一些CSS属性可以控制行系统的布局方式。除了前面提到的text-align和white-space，还有word-wrap（控制单词换行时是否允许拆分），text-overflow（控制超出一行时的处理方式）等等在。另外，常用的margin和padding对行内元素有不同的影响，留给同学们自己去发现。
