怎样做汽车之家视频网站,自己做小卡用什么软件,白帽网站,seo服务建议文章目录 补充重要知识 防脱发神器 颜色的alpha通道 尺寸的百分比 最大最小宽高 补充重要知识 使用border-box控制尺寸更加直观，因此，很多网站都会加入下面的代码 * {margin: 0;padding: 0;box-sizing: border-box; }好同学们，大家好，我是袁老师，这节课呢，我们为了让后…文章目录补充重要知识防脱发神器颜色的alpha通道尺寸的百分比最大最小宽高补充重要知识使用border-box控制尺寸更加直观，因此，很多网站都会加入下面的代码*{margin:0;padding:0;box-sizing:border-box;}好同学们，大家好，我是袁老师，这节课呢，我们为了让后边儿的课程学习的顺利，为后边儿的课程扫清一些障碍，所以说我们这节课需要给大家补充一些。简单且重要的知识，这些知识呢，同学们在前边儿的学习中呢，可能没有怎么去涉及到啊，所以说我们在这节课呢集中来补充一下。一共就有四个知识，而且它写的它代码也非常简单，而且知识也比较好理解啊，我们快速把它过一下。第一个呢，我把它叫做防脱发神器，因为它真的可以解决脱发的问题啊，咱们程序员的发质是不是很重要的，好，我们来看一下这个到底是一个什么样的知识呢，防脱发神器其实这一块儿呢，讲了半天，讲完之后呢，就这么一句话，就说你之后学了这一块儿了之后。你们在写CSS的时候，在最开始的位置，加上一个星号，选中所有元素，然后给它设置margin 0。pending 0干嘛呀,是不是清除浏览器的默认样式，这大家都学过了，对吧，再加上一句box-sizing：border-box就可以了，那么之后呢，就不需要再加它了啊，不需要管它了，这样子只要你做了这件事儿。你的啊，掉头发的问题就可以解决了，那怎么回事儿呢*{margin:0;padding:0;box-sizing:border-box;}我们来看一下这个知识到底是怎么回事儿？就是我们每一个元素或者叫标签儿，在页面上呢都会形成一个盒模型。包括什么margin外边距，border边框，pending内边距，还有就是内容区域。对吧，会形成一个盒模型。那这个盒模型里边呢我们如果说去设置宽高啊，比方说我们这里设置宽高。我们设置是啥呀？到底是啥呀啥的宽高呢？其实这里有一点反直觉呃，它实际上设置的是什么内容区域，就这个区域【红线画的区域】。一图胜千言啊，内容区域的宽高100×100 【height:100px，weight:100px】，它是不包含pending，不包含border的啊，这就是默认情况对吧，你看我们这里有pending有border，那么也就是说我们虽然设置的宽高是100×100。但是加上pending，加上border之后，是不是这个盒子会超出这个100×100对吧，这个盒子会变得更大一些啊，这样子会造成一个什么问题呢，这样子就造成了脱发的问题了呗，比方说我们随便找一个网站吧，随便找一个网站，比方说我们现在做一个王者荣耀。王者荣耀呢，我想做这个区域啊于是呢，我在页面上或者是通过一些工具量一量的话，会发现诶它的宽度呢358，高度呢342。是吧，这样一量出来，好量出来过后，我就马上去设置宽高宽358高342哎，好像是没有什么什么问题，但是一会儿我在做这个区域的时候呢，我们可能会给它加上一个border。可能会给它加上一个pending，这样子一加就完蛋了，因为这个盒子的尺寸就会超过这个385*342的尺寸了，懂这意思吧，因为我们设置的宽高呢，实际上是设置的是什么，设置的是那个内容区域的宽高，好，因此呢，这样子又会造成啊很多麻烦的问题就是我们要去精确的计算啊，精确的计算它的呃尺寸，内容部分尺寸是多少，然后再去设置宽高，因为我们要用385*342的尺寸去减去border减去pading要精确计算，非常的麻烦。啊，这是默认情况下，默认情况下呢，相当于是就写了这么一个属性box-sizing，box什么意思盒子，sizing的尺寸是吧，后边儿有一个值叫content-box， contentent什么意思啊，内容，就这部分内容区域啊，内容的盒子，也就是我们默认情况下，或者是你直接写这句话，box-sizing: content-box就你写不写这句话都是这个值啊，默认就是这个值box-sizing: content-box，你写了这句话【box-sizing: content-box】，或者是你不写这句话，默认情况下，那么它设置宽高呢，设置的是内容区域。这样子会造成很多问题，因此呢，我们想把它改一下，改成box-sizing: border-box那么这样子一改的话，我们再去设置宽高，再去设置高度的时候呢，它就变成了设置的就是包含边框在内包含内边距包含内容部分。那总共是100×100的尺寸。