尚硅谷前端基础 (40)

好，我们说完了这个样式的继承，还有我们这个选择题的权重啊，也是因为我们这个，呃，基础知识了，那以后遇到这个样式不生效的问题，一定要先想一下这个权重啊，先想一下权重，那我们就留一个思考题，你可以自己想一下啊，自己思考一下这个问题，我们在给这个A元素设置尾类的时候，我们用这么四个link visit whole，还有active这四个尾类，哎，这个我就不讲了，你们自己试验一下这四个尾类，你在写的时候，如果我这四个尾类全用的话，他们有没有顺序要求。哎，或者换句话说，你写的时候，你不按照我这个顺序写，会不会有什么问题，诶如果会有问题，为什么会有问题，那我们这个东西到底应该按照一个什么顺序去写啊，思考一下啊思考一下。然后我们往下来进行，下边呢，我们来说一下我们的这个单位。

来我们先说一下我们这个单位，单位我们在这里边一个说我们分成两块来说，嗯，在这我们直接先创建一个页面的一个结构，那在这里面呢，我们直接写一个div，点一个BOX1啊，直接tableo键就行了啊，所以这个也是利用我们这个选择器div.BOX1的意思就是给你创建一个什么呢？哎，创建一个class于BOX1的div，或者啊，你就直接写什么呢？哎，你就直接写一个BOX1，直接写一个BOX1，哎，那这时候他也会给你自己创建啊，点BOX1就完事了，创建完了以后，我们在这来给它设置一个样式style标签，Style标签在这呢，我们直接来一个点一个BOX1 box1我们可以设置一个叫做一个y wed t y叫做宽度啊宽度比如说我来一个200个像素啊，200个像素，然后呢，我们来一个hi hi也叫一个200个像素，那现在我给他设置一个宽还有高，然后我们这来一个掰。

Color，我们来一个orange啊，Orange，那这里注意了，Wise表示的是一个宽度啊，就是横向的宽度，Head表示一个高度啊，然后background color表示一个背景颜色，所以在这儿我们就会看到一个什么呢？看到一个。看到一个200乘以200的一个橙色的一个正方形这么一个东西，对吧？这个东西非常简单啊，非常简单，那这里我们要写完了，我们就要说一下这个单位，单位我们先说第一个我们的长度单位，哎，我们的一个长度的一个单位，长度单位，那在这儿我们用到的是一个这个叫像素啊，我们用到的是一个这个像素，那像素是干嘛的？像素是干嘛的？200个像素是什么意思啊？200个像素什么意思？那注意了像素是什么？

诶，我们的这个什么呢？诶我们的这个屏幕，或者说我们这个显示器啊，我们的这个屏幕，或者叫我们这个显示器，诶计算机的屏幕啊，显示器或者手机的屏幕呀，诶这个东西，诶触屏对吧？他们是什么呢？它的实际上什么呢？诶实际上是由什么呢？由一个一个的这个小点点构成的啊，由一个个小点的构成的啊一个个什么呢？发光的小点啊，一个发光小点，所以你看我们现在虽然看的整个是一个这个整个是一个图画，对吧，整个是一个面，但是实际上整个这幅画，它是由一个一个小点，每一个点儿展现出不同的颜色，就构成了我们的这么一个什么呀，这么一个屏幕，但是这个点儿，我们这个点啊非常小，我们肉眼呢看不见啊，看不见，所以你要想看见也可以，你需要把你的屏幕放大，放大放到一定程度，你看我这个小红点，我这一个小红点就是一个什么，就是一个。

像素看到了吗？这一小方点就一个像素，所以像素实际上是一个什么呀？是一个正方形的啊，是一个正方形的，只不过这个像素它实在是太小了，我们是不是看不出来这个棱角啊，你像我们这看还是一个圆的，但是实际上如果你放大了看的话，它的边上实际上是有这种锯齿的，懂这意思吧，哎，一个一个的这种小点点构成的啊，一个小点的构成的，像我们去看我们这个电脑，买电脑的时候，我们要看电脑的分辨率，手机的分辨率是吧，我们可能看过什么1366。乘以一个768，那这什么意思？这就是说你的电脑里水平方向有1366个像素，垂直方向有768个像素，那这样一乘整个是不是就是一个，整个是不是就是一个这个你整个屏幕的一个像素的一个个数，哎，像素一个数，那好了我问你了，我们不同屏幕的这个像素大小它是不是一样的，是不是一样，诶注意不一样，不同屏幕的这个像素大小是什么呢？像素大小是不同的啊，不同屏幕的像素大小是不同的，我们说了像素越小的屏幕。

哎，显示的这个什么呢？效果越清晰啊，你像素越小，显示的效果越清晰，像我们那个手机现在都叫什么呀，视网膜屏那个像素就特别特别小，你要买一些那种什么4K屏的那种显示器，那个像素是不是特别小，哎，特别小特别小，越小它就会越清晰，那肯越小就越细腻嘛，越细腻就越清晰，就跟着人脸似的，脸上的毛孔，毛孔越小，你的脸是越滑溜越细呀，对吧，同样像素也是像素越小屏幕越清晰，所以所以什么呢？哎，所以你这个问题我们现在倒是不是特别需要关注，等过一阵儿我们去讲这个移动端的时候，你就要思考一下了，所以这里边你要注意一个问题，所以同样的。

同样的什么呢？同样的200像素在不同的这个什么呢？不同的设备下，设备下显示效果干嘛呢？显示效果不一样啊，显示效果不一样，所以有的同学你用电脑的时候，你注意你用的可能是那种高清屏，你用那种高清屏，你像你那个像素可能就比我这个屏幕里边的像素要小，可能我这个像素干嘛呀，一个像素这么大个，你那一个像素干嘛呀，就这么点，你那是不是小啊，所以同样是200个像素，你想这个200个跟这个200个那是一样大的吗？哎，注意那可不一样大啊，不一样大，所以你那个同样你换一个新电脑高清屏的，你可能去上网，你发现什么呀，这个网页的字啊特别小，诶注意不是网页变了，是你的显示器变了，因为你显示器那个像素变小了，哎，变小了，所以这个时候你要注意，你像我这个，如果你拿一个截图工具量的话，它肯定是一个。

正好的200乘200。看大小，看那个大小，那是不是正好是一个200乘以200这么一个大小啊，哎，正好是一个200乘以200，但是你量你那个高清屏那个就不一定了，为什么？因为你那个屏幕显示效果那个像素太小了，像素小就可能导致显示一些字儿，显示一些内容的时候，字太小，虽然很清楚，但是你看不见啊，但是你看不清楚，就是看着比较比较比较费劲，所以很多的这个高清屏的时候，在win室里边，它会自动给你放大，放大一百25 125%，或者放大150%，越清晰放的就越大，所以我这虽然是设置了200像素，你这一量的话可能是多少呢？可能是，诶可能是这个两百五啊，那两百5，为什么？因为你的屏幕对它进行放大了，你可以在那个显示设置里去看一下，对吧，在这我们就不多说了，所以你要注意在同样200强度下，在不同的设备下显示效果是不一样的，因为有一些设备的那个像素点大，有一些设。

像素点就就小，所以一定是不一样的，所以像我们手机里，手机里为了确保我们的显示效果好，所以一般的话，比较旧的设备一般是什么呢？我们现实里的我们是我们这写一个像素。手机里会什么呢？手机里会用四个像素，甚至像什么叉呀，什么叉S呀，这些，它会用什么呢？用九个像素替代一个像素，为什么？就是希望让它让我们的显示效果清晰的，但是还要确保那个大小要大一点，让人可见啊，所以注意像素大小是不确定的，但是就是你在一个显示器里是确定的是吧，我这显示器里一定就这么，就这么大个，对吧，就这么大个，但是在你那个不同的设备，不同显示器下，大小可能是不一样啊，一定要注意这个是我们说的一个像素啊，像素，所以我这写200个像素就表示的是200个点啊，200个点，当然后边我们还要涉及到一些什么，呃，设备像素啊，什么CS像素，我们还要去讲，但是现在先不管了，现在你就记住了，这像素就是一个什么呀，小点就完事了，这个东西后边我们还要详细去，详细去说啊，详细去说。

好，那这个是我们说的第一个长度单位，叫做一个像素，那我们除了可以用像素以外，我们还有一个东西，还有一个东西我们叫什么呢？叫做一个百分比，百分比很简单，就是什么呀？哎，咱们举个例子，在BOXS1里边，我们再写一个子元素，来一个点一个box字，点一个box字啊，点一个BOX2，在这我也给他设计个样式，我这直接来一个点一个box。Box box2呢，我给他来一个外，比如说来个100 hi也来一个100啊，快捷方式H100加上一个table键自动补全啊，然后往下我们直接给它设一个background color background color，我们来一个这个，呃，来一个这个颜色吧。

这个颜色设置完了，这个是不是我们BOX2，这是BOX1啊，诶BOX2是100乘100 box1是200乘200，这是像素，那其实在这儿我还可以换成什么呢？我还可以换成50%，50%你看效果是什么呢？效果是一样的啊，效果是一样，是不是也是这么大个，哎，也是这么大个，所以百分比设置什么呢？哎，百分比。百分比可以什么呢？哎，可以设置，为什么呢？设置我们这个属性相对于什么呢？相对于它的这个负元素属性的一个百分比。哎，把这句话写通了点啊，也可以，也可以将我们这个什么呢？将我们这个属性值，哎，设置为什么呢？相对于其负元素使用的百分比，那相对于其负元素，但是先提一嘴，负元素在这儿说不严谨，在这儿说不严谨后边我们还要去讲，但是默认现在我们接触到都是负元素，但是它不是特别的严谨，往后我们还会有一个更严谨的说法，但是现在你先理解一下啊，可以将设置为负元素的百分之比，那这个时候我们这50%就是什么呢？就是它负元素宽度50%，负元素是200啊，所以50%这就是100，这是不是也是200呀，50%那就是100啊，它是相对于Y，是相对于负元素的y hi的也是相对于负元素的HI100分米介绍的，跟100乘以100是一样的啊，跟100PX是一样的，哎，那有同学就说了，那老师既然一样，为什么不写PX，非要写这个百分比呢？

啊，哎，板比有个好处，你现在我如果写的是PX，看着我把这个负元素改大了，子元素变呗，哎，子元素不变啊，子元素不变，但是如果我这写百分比，我写个50%，这是同样写个50%，那这个时候我们这个子元素可以干嘛呢？可以跟随负元素去改变，复元素大它也大，复元素小是不是它也小啊，哎，它也小，所以百分比的好处是什么呢？哎，我们设置百分比，百分比可以什么呢？可以使我们这个子元素，诶跟随什么呢？诶跟随负元素的这个改变而改变，诶因为你就是相对于负元素嘛，对吧，所以负元素变你也可以去变啊，这是我们说的两种常用单位，一个是像素，还有一个是百分比，当然我们还有两个比较常用的，但是现在我们先不说它，待会儿我们往后讲到这个移动端的时候，我们再去强调，但是目前来讲，我们暂时就用这个或者不一定移动。

等我们讲完字体，我们可以说那个东西啊，说那个东西好，这里我们先停一下。