39.尚硅谷_HTML&CSS基础_长度单位.avi原创

嗯，刚才呢，是把这些文本标签，包括我们列表其实都已经说完了，然后昨天也说了一部分，然后呢，接下来标签说完了，我们接下来还是再次回到我们的这个CSS啊，来说我们这个CSS，说CSS呢，就要说的一些是我们这个文本格式化的一些这种样式，也就说我们要对这个文本进行一些什么呀，排版呀，比如说我这个字体的一个大小，字体的一个颜色呀，字体的一个缩进等等，这些都属于我们这个文本格式化的这些内容，那说这个内容之前呢，我们先来说一下什么呢？我们的这个单位啊，我们的这个单位，那这里边我们再去，嗯，我们再去之之前我们去讲课的时候，我们去写一些东西，实际上我们单位都用的谁呀，用的是这个PX，那PX它也是我们说我们用的最多的一个什么呀？诶最多的一个单位，那我们来说一下这个单位它诶是什么意思啊，什么意思，我们说了这些单位我们都叫一什么呀，叫做一个长。

长度单位啊，都是一些长度单位，那这里边举个例子，我直接来一个div，诶div，然后给它来一个这个class，你就随便写一个吧，叫做一个box，哎，我创建一个什么呀，Class为box的一个div，但是这里边注意我们还有一个比较简单的方式去创建这种东西，怎么创建呢？我给它去掉来什么呢？来一个div.box我这写的是一个什么呀？是不是一个CS和显择器啊，写完了以后你直接摁一下table。诶干嘛了，是不是直接给你创建了一个class为box的div啊或可怎么办呀，直接来一个div井号box唯一table干嘛了？诶是不是ID位boxs div啊，诶所以它都有一些这个诶方便的一种方式啊来我直接div点一个boxs，然后一整整出这么一个div，然后这来一个style来设置一个样式，我们这来说一下我们这个什么呀，叫做一个诶长度单位啊长度单位。长度单位我们要说的什么呢？那我们说最常用的实际上是一个什么呀，我们这个PX啊PX我们叫什么呀，叫做一个哎像素，诶像素，那什么叫像素呢？我们先写一下啊，直接来一个点一个boss，我给这bos设置什么呢？设置一个外S外来一个100个像素，Has呢也来一个100个像素，然后background color来一个red，诶我创建了一什么呀，这么一个100乘以100的一个红色一个方块吧，诶一个方块，然后保存CTRL运行是不是这么一个效果呀，现在它的长度就是什么呀，100个像素，高度就是什么呀，100个像素啊，100个像素，那这个像素呢，就是我们所说的一个叫什长度单位，那像素什么意思呀？像素什么意思？哎，我们来说像素是我们在我们这个，诶在网页中使用的最多的什么呀，一个单位啊，使用的最多的一个单位，我们只需要说什么呀，我们说诶一。

个像素就什么呢？诶就相当于我们屏幕中的什么呀，屏幕中的一个什么呀，一个小点啊，小点我们的什么呢？我们的这个屏幕是由什么呀。

诶屏幕，诶实际上什么呢？诶实际上它就是由，诶这些什么呀，我们叫做一个像素点干嘛呀构成的啊，我们屏幕就是由这些像素点构成的，而我们说了我一个像素就相当于什么呢？我们屏幕中的一个什么呀，一个小点啊，一个小点，那这小点跟哪呢？我们能不能看见，我可以干嘛呢？诶当然现在我是看不见，因为这个点干嘛呀太小了，我们肉眼根本就没法干嘛呀，没法识别，我们如果想看到这干嘛呀，把我们这个屏幕给它放到大的足够一个程度才能看见，比如说举个例子，我在这儿，呃，在这儿我来放大一下，直接用我这个截图工具，我一放大，咱们稍微往大一点放。诶，你发现什么了？你发现我放完了以后，这个里边是不是变成一个点一个点的呀？诶看见小红点了吗？诶我这个小方块这个点，这个点实际上就是一个什么呀？诶就是一个像素，那我们说一个像素就指什么呀？一个点，两个点是什么呀？两个像素，这就是三个像素，这就是什么呀，四个像素，这就是五个像素，诶一个像素就是一个什么呀，一个小点，而我们这个屏幕它是干嘛的呀？它是由无数，诶不是也不是无数个很多个什么呀，很多个这样的点干嘛的构成的，诶那我们这个屏幕到底有多少个点啊？诶比如说我们屏幕有一个什么呀，我们都知道屏幕有一个分辨率，比如说有同学是什么呀，叫做1366乘以768啊，1366乘以768，那什么意思呀？表示你的屏幕横着是1366个像素，竖着什么呀？768个像素，它一乘就是你屏幕的总的什么呀？像素个数啊，总的这个点的个数，但是我们。

说了，我们说这个点，实际上我们直接是看看得见看不见呀，哎，但是我们说如果你真看见，证明你那个显示器啊，太次了，哎太次了，咱们说什么呀？诶但是这些像素点，哎是什么呀，是不能诶直接看见的，因为什么呀，因为它太小了啊，因为它太小太小了，也就是什么呢？哎，那我们想想，那对于我们每个显示器来说，是不是我这一个像素它都是一边大的呀。

是不是一都是一边大的呀，哎，我们来说一下啊，我们说不同的什么呀，显示器什么呀，哎像素的什么呀，诶一个像素的什么呢，大小干嘛呀，也不相同啊，也不相同，那我们说什么呢？越显示效果越好，哎越清晰，哎我们这个像素干嘛呀，哎像素就越小啊，显示效果越好，效果越清晰，像效像素就越小，反之干嘛呢？哎像素越大，也就是什么呀，你你显示效果好的那个像素干嘛呀，那个就小，而且显示效果差的呢，那个像素干嘛呀就大，诶所以一些什么呀，一显示你发现诶虽然覆辨率是一样的，你发现它那个清晰度干嘛呀，它差一些啊，它还差一些，所以注意在我们不同的显示器里边，像素大小干嘛呀，它是不同的啊，它是不同的，这就是我们说这个像素代表的是我们屏幕。

不中一个点的大小，那我们说了，其实一般我们像素最小的是什么呀？像素最小的什么呀？哎，最小的一般是我们那什么呀，手机手机屏幕其实现现在可能也不说，现在已经普及了，之前我们说有一个屏幕叫什么呀，叫视网膜屏，诶视网膜屏那个像素是干嘛呀，非常小的，也就是说我们手机上的像素实际上干嘛呀，它可能一个像素相当于什么呀，哎，我们计算机里边这个平平均像素一个什么呀，它只相当于1/4啊1/4，所以这里边相当于什么呀，我们这个计算机这个屏幕的什么呀，一个像素相当于我们手机里边什么呀，四个像素啊，四个像素，那么想想这就会有一个问题，一个什么问题呢？咱们假设我这个手机里边的一个像素是什么呢？是这么大个，而我计算机里边的像素呢，是什么呀。

是这么大个，现在他们像素大小是不一样啊好，我同样设置一个自己大小，我都设成什么呢？设置成12个像素，那注意了，我设置这个12个像素，对于我们计算机，还有对我们这个手机来说，它一不一样，它它这都一样，它哪啥不一样呢？它这不都是12个像素啊，只不过什么呀，是不是我们这个像素单位也不一样啊，所以在手机里我们这个字会干嘛呀，是不是应该会小一些呀，所以现在你们用的一些什么呀，高清屏幕，比如说有的什么呀，1080P的，比如说有什么呀，有这种，甚至有4K的屏对吧呀，2K的屏，那这种屏幕干嘛呀，它的像素都极小，你会发现什么呀，你的那个屏幕里边字干嘛呀，是不是特别特别小啊，哎，特别特别小，那我们说这有什么问题啊，这有什么问题啊，诶同样一个网页，同样一个网页，我这个像素大小，这个文字大小都是什么呢？都是12个像素，就会导致一个问题，在我计算机里的字干嘛呀，挺大的可以。

了，但是到手机里干嘛呀，是不是特别小啊，哎，特别模糊，不不能看见了，或者说换句话说，同样一个字，在我手机里看它干嘛呢，挺好挺清楚，但是跑计算机里干嘛了，是不是特别大了呀？哎，就会出现这么一个问题，那我们说，但是我们现实上网的过程当中，有没有发现这个问题，没有发现这个问题，为什么呢？因为现在我们手机里边的浏览器，它默认干嘛了呀，它默认把你的像素给你乘了一个四，也就是说你设置了一个12个像素，在我们计算机里看的什么呀，就是12像素，但是在手机里干嘛呀，它可以成立一个四，变成多少了，变成48了，这样就干嘛呀，可以保证手机里效果跟我们PC里的效果基本上什么呀一致的啊，基本上一致的，所以这个像素注意它是什么呀，在不同的计算机里，像素大小是不一样的啊，说单位像素大小是不一样的，越清晰的那个屏幕干嘛呀，像素就越小，所以你买电脑的时候，你要注意，你要考虑清楚，你要不要买这个分辨率太高的，太高就会导致什么什么效果呀，诶你这字儿特别小啊，字儿特别小啊。

好，这也是我们说这个像素好，那这一块呢，是我们说了像素100PS100PS，这是我们说用的比较多的一个了，然后接着再来说，除了像素呢，我们还有一个单位叫什么呢？叫做一个百分百分比，诶百分比就是什么呀，百分号，百分号那这块什么意思呢？来我们在这个div里，我创建一个子元素，来一个div来一个什么呢？点一个BOX1，诶BOX1，现在我们说BOX1是不是就是我们这个BOX1个子元素啊来我把box这大小改一个，改一什么呢？改一个200，我这一保存，然后一刷新走，你它是不是大了呀？好，那接下来我们来设置我们这个BOX2，点一个BOX2 box2a box1是吧，BOX1我来一个Y，我来1Y来什么呢？来一个100个像素，然后来一个hat，也来一个100个像素，然后来一个background color来什么的，来一个这个yellow保存，我们来看一刷新走，你是不是这么个效果呀，诶我们发现什么呀，我们发现这个子元素是不是正好是。

自元素的什么呀，一半吧，诶那我可以干嘛呢？我可以换一种方式写来什么呢？50干嘛呢？50%，然后再来什么呀，五十来个什么呀，50%保存我们再来看一刷新走，你是不是效果是一样的呀？诶所以这块我写50%跟我写什么呀，100PS10一样的啊一样的，但是这里边注意，那我们说这50%什么意思呀，谁的50%，哎负元素的这个50%，所以什么呢？诶我们可以什么呢？也可以诶将我们这个单位设置为什么呢？设置为一个什么呀？诶百分比的一个形式，那这样什么呢？这样我们这个浏览器将会根据什么呀，根据其负元素的什么呀样式来计算该值啊来计算该值，那什么意思呀，我们说了它负元素是宽度多少啊，200吧，那子元素宽度多少啊，5%。

值是不是就是200的一半就变成多少了100了，诶那同理，我们说高度是不是也一样啊，它会自动根据负元素这个宽度和高度去计算这个什么呀，诶计算这个子元素的，那么说它有一什么好处，它跟我们这个我直接写100PS它没有什么处，我直接写100PX效果是不是一样的呀，效果是一样的，但是我们来说有没有什么缺点，当我负元素这个什么了，变成300了和一保存子元素变不变，哎子元素不变为什么呀，100你是不是写死了呀，但是换句回来，我这改成什么呢？改成百分之。50咱们再看一刷新，现在是这样的，对吧？来我子元负元素改成什么呢？改成300保存，咱们再来看一刷新走你子元素干嘛了，是不是跟着变啊，诶跟着变，所以它的好处就是什么呀，使用我们这个百分比，使用我们这个百分比的好处是当我们这个负元素的什么呀，哎属性值发生变化时，哎子元素干嘛呀，哎子元素也会什么呀，也会按照这个比例发生改变啊，发生改变，那在我们说什么呢？在我们创建一些这种自适应的这个页面时。

诶经常干嘛呢？经常使用我们这个百分比作为什么呀，作为这个单位，什么叫自适应啊，你们想想有的那种屏幕干嘛呀，我们同样一个网页显示到不同的显示器里，有的显示器干嘛呀，特别大，有的显示器干嘛呀，是不是特别小啊，那特别小，那就意味着我们写一个网页，我要适用多个选择器，那怎么办呀，我可以让我这个网页的宽度默认是多少啊，100%，这样可以达到什么效果呀，不论你的这个浏览器，你的网浏览器多大，你的显示器多大，我这页面是不是永远都是全屏的呀，哪钥是全屏啊，所以这种自性的页面，我们经常使用这个百分比多的单位啊，那先了解一下，我们涉及到我们再具体去说啊，具体说这也是我们说两个单位，一个是像素，一个是百分比，我们都会用的比较比较多，还有一个叫什么呢？还有叫做一个em，诶em这也比较有意思啊em em也比较有意思，那这里边我们来看看吧，那这里边我们怎么写呢？嗯，我这个宽度啊，我先不写了，这里边啊，我先给它设置一个。

放size，放size是什么呀？是不是我们这个字体大小啊，诶字体大小我来一个十个像素字体大小，然后我这来什么呢？来一个外外，我这来改一个，改一什么呢？改一个10EM啊10EM我们先看效果啊，保存一刷新走你，诶是不是这么快呀，诶这么快来看着我现在干嘛呢？注意了，我这是不是宽度啊来我这改字己大小，自己大小改成多少呢？改成100个，我有没有动这宽度没有我们来看啊，一刷新走你。

你发现是不是是不是宽度也变了呀，哎，宽度也变了，那em什么意思呀，我们来说一下em和我们这什么呢？和我们这个百分比类似啊，和我们这个百分比类似，它是什么呢？它是相对于谁呢？相对于当前元素什么呀？诶字体大小，字体大小来干嘛呀，来计算呢？诶1EM诶就等于一什么呀，Fo size啊em就等于一个方size，那你来看我BOX1的方size多少？100，那所以我现在Y是多少，Y是一个11，那十一一相当于一个方size，一个方size是100，那意味着我一等于多少？Em是不是等于100啊，哎，Em等于100个像素，那现在干嘛呀，我10EM等于多少，是不是1000个像素，哎，所以现在我这个多少，这是一个1000个像素，那如果改一个，我改成什么呢？改成一个EM1保存这是多少了？哎，100个像素啊，所以注意em就等于一个什么呀，一个字体大小，而且要注意是什么呀，是我们当前这个元素的一个什么呀，字体大小啊，字体大小，那也就是说我这个放size变了，我这em干嘛，是不是也变呀？哎，来，我这一百分之五十保存，我就刷新走，你是不是也变了呀？诶，你会发现我们这个em会跟随我们这什么呀字体大小去改变，所以为什么说em和百分比类似，百分比是相对于什么呀，是相对于其。

负元素这个自负元素这个属性吧，诶相当于负元素属性来说的，而em相对谁啊，相对于自身的这个字体大小来说的啊，自大小来说的，所以这里边本来说当什么呢？当我们这个使用em时，当我们这个字体大小发生改变时，哎，我们这个em也会什么呀，也会随之干嘛呀，哎随之改变啊，随之改变，那我们哪常用em呀，诶我们当设置我们这个字体相关的样式时，干嘛呢？诶经常会使用我们的什么呀，Em啊，经常会使用这个em啊好，这em。

听懂了吗？听懂了吗？哎，Em就是什么呀，一个字体大小，字体多大，我这em就是什么呀，就是多大，好，我em是50，我这写2EM多少是不是100啊好，那现在我这改一个改一二十，我问你2EM多少是不是40啊，哎，它是相对于我们那个当前元素一个自体大小去计算了啊，这是我们的em，所以这边注意我们设置字体相关样式经常会使用em啊好，这也是我们说三个长度单位，像素百分比，还有一个em啊三个单位，我们呢这先停一下。