尚硅谷前端基础 (82)

好，那么字体的东西我们就说完了，然后的话我们再说一组跟字体相关的，呃，字相关的还有什么，就是我们这个文本的一些样式。什么叫文本的样式呢？很简单，那就是我们的一些文本的一些排版呀，诶对齐呀，诶等等一些啊，都是比较简单的，我们快速的给它过一下就完事，呃，在这儿呢，我们先创建一个东西啊呃，这里边呢，我们先创建一个这个写点字吧，写一个div div里边呢，我们放一个LM啊，放一个这个英文文本，然后给它运行一下。嗯，那大概就这么一段一段一段这个内容啊，一段内容的话，我给它设置点样式啊，Style标签，我们给这个div设置一个样式，呃，外我就定一个宽度啊，外来一个500像素，嗯，大概是这么一个情况，那现在呢，我们要先说我们的第一个啊，第一个我们叫做一个T，叫做一个文本的一个水平对齐，我们叫做一个text line text，这是是我们这个文本的一个水平对齐，嗯，水平对齐的话，其实也很好理解，就是我们文字这个，你看现在我们文字你看它整个这个边啊，我给它设置一个边框吧，Borderder borderder一个像素，Red是一个solid实现一个边框，你看现在我们整个文字，它实际上是靠我们这个左侧对齐的，对吧，是靠我们这个左侧对齐的，那我们通过这个TLA呢，可以来设来修改我们这个对齐方式，比如说我们的默认值实际上就是left啊，默认值就是left左侧对齐对吧。

可选值，我们第一个我们说的是一个left，这是我们这个左侧一个对齐啊对齐，那当然我们就还得有那个right。哎，Right叫什么呀？靠右对齐啊，靠右对齐，这叫做一个右对齐，哎，右对齐，那当然还有一个，哎，CT啊，Center我们叫做一个居中对齐，我们先看右对齐啊，右对齐你看我这整完了以后，是不是右边一边齐的，哎，整个都靠右边去，对了啊，右对齐right，那如果是center的话，就是我们这个居中对齐center居中对齐啊，所有文字都在中间，两边呢，会留下一个相等的一个空白啊，叫做一个居中对齐center，还有一个呢，我们来看一下，还有我们常见的值啊，我们常见的要一个justify justify，这叫什么呢？叫做两端对齐。

两端问题，什么叫两端问题？你看。左对齐，左边是齐的，右边有缺口，右对齐，右边是齐的，左要是缺口居中对齐，两边是不是都会有缺口啊，哎，都会缺口，而我们两端对齐就是什么呢？诶你看你看我两边是不是都贴死了，诶都贴死了诶那最后一行就没法贴了，最后一行，因为你最后一行字少嘛，对吧，最后没辙了，那剩下的就变成两端都齐了，所以扎外这两端的起两端不给你留空白，都紧紧的贴到边上啊，都紧紧贴到边上，它是怎么实现的，其实你看它就是通过把我们这个文字之间的一个空格给你调大了啊，有些空格给你调大了，就达到这么一个两端对齐的一个效果啊，这个是我们水平方向这么四种对齐方式啊，左对齐，右对齐，居中对齐，两端对齐啊，不多说了啊叭较简单，再往下说呢，我们除了有水平对齐的话，我们还有一个叫做垂直对齐啊，垂直对齐，垂直对齐的话，为了为了好演示一点，我们用一个这个，我们用一个这个单行的文本去演示啊，单行的文本我们写一个今天。

天气真不错，真不错，那这个垂直对齐呢，注意了，我们垂直对齐这块，我们得考虑的是一个不同元素之间的对齐，如果你这个字都是一样的，你是你说我这一个上一个下那个我们做不到，你得有一个不同元素，所以这个时候我们比如说我把这个真不错呀，我用一个死绊，我给它套起去，哎，我用一个死SPA把这个真不错给套起来，那这个时候我们就来设置一下什么呢？设置一下这个真不错的一个对击方式啊，那这里边我们把这个just我先给它注了，那现在呢，我把字的大小改一下，呃，Fo size fo size呢，我们写一个这个50像素啊，50像素，当然这个写完了以后，我们都变成50了，那这样对齐看不出效果了，我们把SPA单独设置一下，SPA呢，我给它设置一个fo size fo size是一个这个20像素，SPA我们小一点啊，SPA小一点，然后呢，SPA呢，我也给它设置一个Bo，一个像素的一个这个blue，然后来一个solid里啊，我们能看出它这个它这个边来就行了啊好。

那现在是我们的这个这个死SPA，嗯，死SPA呢，是我们这个这这这这这三个字真不错，我们来看一下这边框设置完了有没有变化。嗯，边框对我们布局它是没有产生影响的啊啊，当然我这我们为了看的清楚一点啊，我这在写点中文，要写点英文。

因为这个排版有时候中文啊，光写中文的话，我们看不出来，这调大一点调成800。诶，好，那现在是我们的这样一个效果啊，这样一个效果，什么叫垂直对齐，现在来看这个是我们副元素div里边那个文字，这个是我们这个死SPA里的文字，对吧？死SPA里文字我为什么要在这儿来说这个垂直对旗，为什么要这种这样设置，因为只有当我们的死SPA的文字和div这个字它大小不一样的时候，这个时候我们是不是才涉及到这个垂直对齐啊，哎，如果它俩字是一样的，那你就不涉及到垂直对齐了，对吧？啊，所以这时候我们要让它们两个元素是不一样的啊，不一样的，那这里边我们要说垂直对齐的方式，我们叫做一个vertical line。Verical LA这个叫什么呢？这个叫做一个垂直，哎，这个是设置我们元素的一个垂直，哎，对齐的一个方式啊，垂直方向的，纵向的啊，纵向的我们来说一下它的可选值，可选值诶第一个我们叫一个baseline啊base斯line这什么呢？这是我们的默认值，叫做一个基线对齐，什么叫线？注意了啊，这块我们最好以英文为准，因为中文有时候看的不明显，你看啊，我们hello he I5个字母，五个字母呢，形状各不一样，但是其实你会发现我们这个字母的底边，它这个底边是不是是一边齐的呀，哎，一边齐的，所以什么叫基线，基线就是我们文字那个底边那个基础那个线就是我们文字，它都是默认情况下，都是在那个基线上面写的，也就是说，就是我文字那个底边。

跟那条边啊，这边那边边，但是这个东西也不一定，也就是说这个基线就像什么呢？就像我们写那个横格本一样，我们是不是要写字儿啊，哎，写字儿你写字要好看，你这字得是一边齐的，所以它会有那么一条线，这条线叫一个基线，但是这条线是看不见的，它不像边能看见，这条线是看不见，看见就不好看了，对吧，所以有一条线叫做一个基线，文字默认都是在基线上排列的，但是也不一定你像中文是不是就做比基线低啊，诶所以一条基线根据字体设计的不同，这个是由设计师决定的，有的字它就带基线上，有的字呢，就比基线什么呀，就超过基线，比如说我这写个Y，写个Y，那这个时候你看Y是不是就比这个基线低了，哎，比基线低了啊，所以你要注意有这么一个基线，基线它只是一个参考，这条线看不见，但是确实存在啊，有这个基线，然后这个时候我们说baseline叫做基线对齐，什么意思，你看我这写一个baseline baseline你写跟不写效果是一样的，因为它是默认值嘛。

那什么意思，也就是说它让什么呢？让这个子元素的基线和负元素的基线是一边齐的，你看我的这个哈和这个哈的基线是不是对齐的呀？哎，所以这叫做基线对齐，子元素的基线和负元素的基线是对齐的啊，就做一个baseline，还有什么呢？我们还有一个值叫做top，叫做一个top top你看什么效果，你看是不是就是我们这个上边和这个上边对齐了，哎，所以这个就是我们的什么呢？Top top叫做什么呢？叫做顶边对齐，顶部对齐，顶部对齐。

顶部对齐叫做让子元素的顶部和我们这个叫做负元素的顶部对齐啊，就是底儿贴到一块了，那同理还有什么呀，还有包层包特，我们叫什么呢？叫底部对齐，让子元素的底部和负元素的底部对齐，哎，这都是非常简单的，还有一个叫middle middle叫做居中对齐啊，居中对齐，所以这个时候我们直接换一个，我们来一个middle，它就变成一个居中对齐，对吧，就叫居中对齐，那这时候其实你看到这儿你可能就就要就要骂街了，是吧，这玩意儿怎么叫居中对齐啊，怎么叫居中对齐，它这居中对齐是怎么处理的啊，怎么处理的？哎，在这居中啊，它不是我们理解那个居中，它这居中是怎么居的，我们来看一下这个说明啊，Vertical or LA vertical LA，我们这个居中对齐，我们有一个middle对吧，我们来看一下这个middle，关于这个middle的一个描述，Middle。

都在这儿，你看它是有这么多可选值啊，我们待会试的时候也不全是，你可以自己再试试是吧？我们就说几个常用的middle的话，你看the lengths the middle of the elements with the baseline plus half the X head of the parent，什么意思？哎，很简单，你看啊，呃，Iance the middle of the element element with the什么呢？Baseline就是说元素的基线啊，把元素的基线和谁呢？哎，基线和我们的这个基线的高度啊，Plus是加嘛，对吧，元素的这个，呃，Middle of the elements with the baseline，就是这个基线的高度加上什么呢？加上一半的这个。

X的高度，哎，带这个parent什么意思呀，我写1X你就知道了，我们在这写一个小写的X，小写X在这我们来看效果啊，看效果X写完了我们来看啊，我们来看一下它的一个基线在哪。诶，我们画一条线。这个时候这个是不是我们的一个小写的X呀，哎，这是基线，说白了它是什么意思呢？它是把我们子元素的子元素是不是有一个中线呀，哎，中线把子元素的个中线和这个X的中线对齐啊，和X就是和X这条线对齐，因为X一半的高度嘛，一半的高度是不是有中线呀，然后再加上基线就是这样对齐，这样就达到这么一个，他认为这就是居中，但是实际上它不是一个严格意义上的居中，但是它的咪就是通过这种方式设置的，所以一般情况下，我们要让这个文字居中，我们也也不会去这么设置，这么设置有时候你可能呃只是一个它那个意义上居中，但是并不是一个实际的一个什么呀，并不是实际的一个居中啊，但是你要知道有这么一个值，它是什么和什么对齐的，是将澳门子元素的这个中线和这个什么呢？和这个X的中线对齐，所以你要看的话，其实就是跟着什么呀，它是不是就跟这个X一边齐了，哎，跟这个X一边齐了啊是这么一个效果，好，这也是我们一个咪豆，那我们除了这咪。

啊，还有各种各样的值，我们就不多说了，我还可以直接什么呢？我可以直接指定一个值啊，直接指定一个值，你看比如说100是不是就往上走了100啊，哎，我如果写一个十就往上走十，我写一个这个负十，那就往往下走，哎，可以通过这个值来调整我们这个位置，所以更灵活的话是直接给它指定值就行了啊，直接给它指定值就行了啊，那这一块我们就不多说了啊，这是我们垂直对齐的时候，我们经常要用的一个东西，然后这个垂直对齐的话，我们还会有一个东西需要注意的是啊，需要注意我们来看一下，嗯，我在这儿的话，我来看看啊，我写一个。

写一什么呢？写个P标签吧，因为前面已经写div了是吧，因为我就用元素选象器，我要用的这个，我要是用这个类显象器就好了啊，这来一个borderder borderer我们来一个一个像素red，我们来一个solid solid以后呢，在这里边啊，我们来尝试着去在我们这个P里边呢，诶P是不是在这儿呢？P标签啊，它是一个边框，只有一个边框，我尝试在P标签里边呢，我们来引入一个图片，MG图片在哪呢？老接下我返回一个，应该在我们tro里边有。图片儿。

Introduce里。啊，有图片在这个introduce里边有一个IgMg 1.gif，我找一别的吧，Introduce里。那还只能找他了，MG下边的一个1.gif，嗯，算了，我们重新引一个吧，我把这图片给他拖过来。嗯，在这里边呢，我们新建一个文件夹，我们叫一个imd，然后呢，把我们这个安点DVD呢给拖进来，我们用这个图案去演示啊，因为动图没必要啊，整完了以后呢，我们在我们网页里去引入这个图片，我们引入的是我们的一个。点斜杠img下边的一个安点GBD去引入，引入完以后我们这图片就出来了，对吧？出来了，但是这里边我们要注意的一个问题是啊，我图片是引入成功了，但是你要注意，你看我这个图片跟我这个P之间，它是不是下边会有一个这个缝隙啊，哎，在我们这个P元素下边会有一个缝隙，那注意了，这个缝隙既不是内边距，也不是外边距，它不是边距啊，它是边距，只要你是图片在这里边都会出现这样一个距离，为什么会出现这个距离呢？这个距离就是我们图片的一个基线啊，那注意图片我们说它属于替换元素，我们在它的特点其实就跟一个字是一样的，所以图片的对齐方式默认也是去靠着这个基线对齐的，那既然基线的话，基线它就不是在最底边，所以这样的话，它就会导致我们图片它跟我们下边元素下边会有一个缝隙，那这样的话对。

我们布局的时候，实际上会稍微的有一些有一些影响啊，有些影响，所以我们怎么能把这距离给它消灭掉啊，怎们给它消灭掉，那其实我们最常规的最简单的手段，我们就直接给它设置一个ver tical online，或者我们设置一个什么呢？设置一个top，诶设置是其实你设置这个，诶我应该啊，我给P设置了，我应该是给谁设置啊，应该是给我们这个img设置img，我们给他设置一个ver tical alarm，给它设置一个top，让它沿着什么呢？顶部聚齐对齐，也就是说这个东西，你看现在这个缝是不是就没了，哎，其实很简单，你用top也行，用bottom也行，就是说白了你就别让他干嘛了，别让他沿着那个基线对齐了，我试试middle行不行？

哎，咪也行，对吧，咪也行，也就是说只要不是我们那个什么呀，只要你不是沿着基线对齐，就可以把它这个缝给它处理掉，所以以后遇到这种图片这种对齐的问题的时候，一定要注意通过verical line来设置啊，通过verical line来设置好，这个是我们的水平对齐和垂直对齐啊，我们先停一下，还有哪几个属性，我们待会儿接着往下再说。