尚硅谷前端基础 (89)

好，刚刚我们说了这么几个属性啊，Color image repeat，还有一个这个position啊，这几个常用的属性，然后我们接着再来说啊，接着再来说还是背景相关，我们先把东西都说完了，然后我们来做一些背景的练习啊，这个是我们来说一个背景2.1个HTM啊，我把这个东西我给它复制过来啊，复制过来CTRLCCTRLV啊，我们粘过来啊，那刚才我们说的是这么几个啊，这么几个。叫做一个background color。哎，Background color，然后background image，还有一个background repeat啊repeat，然后还有一个background position，呃，Position我们先给它住了，Repeat我们给留在这啊，那这块我们写完这个东西啊，我们还有两还有应该还有三个属性，我们要说一下啊，还有三个属性啊呃，三个四个我们来说吧，一边说一边回忆吧，那这里边我们来说一下啊，首先我们来先看一个东西，这个问题，我们之前提到过这个东西啊，我们设置一个boer，我们来一个十个像素，然后来一个red，然后来一个solid，我们这设置一个边块，我们说了边块它实际上是在这个位置，对吧，我们之前提到一个问题，什么问题呢？就是我们边块是在背，边块的下边是不是有背景对吧？边块的下边是有背景，那现在我们其实看不出来，其实我们之前演示时，我们能能能想到能看到了，边框下边实际上是有背景的，但是我们现在这么做的话，这么写的话，这种边框是看不出来的，所以你可以把可以把边框改一个样式，比如说我换成一个double，换成一个double就很明显了，其实你会发现边框。

把下边实际上是不是也会存在有这个背景啊，哎，边框下边也有背景，那这个时候我想设置什么呢？哎，我想设置什么呢？我想设置我们这个背景的一个范围啊，背景范围就是说什么呢？我可能我不希望我们这个边框下边呢有背景啊，不希望边框要有背景，那这个时候我们有一个属性叫做一个background，之前说过这个background叫做一个clap啊，Clap叫做一个裁剪啊，裁剪它的默认值呢是一个border box啊，是一个border box，我们来说一下叫做一个background。

Background club这个东西是一个设置边框的范围，它的可选值，可选值呢，第一个是我们叫做一个borderer box啊borderer box这叫什么呢？叫默认值啊，默认值我们的背景什么呢？诶，背景会出现在我们边块的一个下边啊，边框的下边啊，比如说边块下边也会有背景，诶有同学老师你这个你这个model都没有在这边框下边这个特殊情况，但是我们再解释一下，背景图片会还有一个属性需要配合使用，但是现在我们先说这个范围啊borderer box，然后还有一什么呢？还有一个pading box啊pading box padd pading box pading就是一个内编剧的意思，那所谓的pading box什么意思呢？哎，Pading box就是背景什么呢？背景不会出现在我们这个边框边框，而只是什么呢？诶，只出现在我们这个内容区和什么呢？和内边距，所以这个时候你如果写一个内边距的话，我们看着啊，我给它。

再加一个拍顶，嗯，拍顶我们比如说我来一个十，这个时候这个拍顶上也会有那个背景，也会有那个背景颜色啊，也会有背景颜色图片我们大再说也会有背景颜色啊，所以这个是一个painting box会出现在内面句上，还有一个我们叫做content box content box表示什么意思呢？哎，表示我们这个背景啊，它只会出现在我们的这个内容区背景，它会出现在我们这个内容区，连我们这个边框，带我们的这个什么呢？带我们这个内边距就都没有背景了啊，就都没有背景了，所以这个呢，是设置我们一个背景范围的，那有一些情况下我们会用到这个，我们来看看啊，看看老版本的浏览器支不支持，因为这个也是属于一个比较新的属性，哎，你看这是我们IE11还是支持的，对吧，我们直接看一下老版本的，我们看看IE9I9支持，那IE8就肯定就IE8是肯定不支持的，对吧，因为比较新的属性，所以这个兼容性也不会在。

什么太大的问题，只是IE8不支持，所以这个东西是设置我们背景的一个裁选裁切的一个范围的啊，裁取的一个范围的，那接下来我们会发现我设置半天呀，设置这个东西，它半天对我们这个小猫这个没有影响，也就说对我们背景图片是不是没有影响啊，背景图片是不是一直没动啊，哎，一直没动，所以这里面我们还有一个属性叫做background，一个orange background一个orange orange什么意思？Orange表示的是一个原点啊，原点这个指的什么呢？这个指的是我们背景图片那个偏移量计算的一个圆点，哎，这指的什么呢？指的是我们这个背景图片的一个偏移亮，它所计算的一个原点，原点你看啊，假如说我现在把偏移量写成零零，我们写成零零，我们看看现在默认，其实默认就是零零对吧，我们写成零零，写不写都一样啊，那现在的原点在哪？现在的原点实际上是在拍镜，也就现在这个拍镜是在这儿。所以这个时。

不是，这个背景是不是有一部分就被裁掉了，被裁掉了，因为我们背景是从这开始的，而你图片的原点是从这开始计算的，所以上面那部分就给裁掉了啊裁掉了，那这个时候它的默认值其实跟它一样，也是啊，默认值不一样，可选值一样，它有一个pading box。Pading box，诶，也就是说什么意思呢？它是一个默认值啊，默认值我们backgroundground position，哎，从什么呢？哎，从我们这个内边距处开始什么呢？内边距处开始计算，也就是说我们图片的原点在哪？在内边距啊，在那边距着，那你说吧，我要改成一个什么呢？我能不能改成一个content box啊，哎，当然可以，那这个时候原点就在哪了，原点就在我们的内容区了啊content box叫什么呢？我们的这个诶。

Background position。你就直接写吧，背景图片，背景图片的偏移量从什么呢？从我们这个内容区处计算，也就是说内容区的左上角是它的一个原点，懂这意思吧，是这个点啊，刚才是这个点，那还有一个选项叫做一个borderder box borderder box呢就比较的奇葩了，这个时候干嘛呢？诶，Older Bo。我们来看一下啊，Borderulder b啊，Border box，那看来啊，我们这个background coll呀，没有border box吗？啊，那它就不支持这个borderder box啊，这是CLA，我们换过来我们改成叫做一个content，应该是改我们上面这个啊，叫做一个borderder box，那这个时候你看它就比较奇葩了，这个时候原点就在这个边块的一个左上角，你看啊，我把content box给去了，这个时候背景图片呢，也会出现在边块上啊，边块上所以跟它的值都是一样的啊，跟它值都是一样的，我们叫做一个borderder box。

Hold的box，哎，我们这个背景图片的这个原点从什么呢？哎，从我们，诶这个偏移量，哎，从我们这个边框处开始计算，所以这个跟我们这个background position是相关性比较大的，它主要是来设置我们这个原点的，也就是那个00点啊，也就是那个00点，就是这两个属性啊background，还有一个是我们叫做一个background，一个这个orange啊这么一个东西，那然后我们再来接着往下说，接着往下说的话，这两个是一个，还有一个什么呢？还有一个我们叫做一个background side background side background side叫做一个背景图片的一个尺寸啊，背景块尺寸我把这两个先注掉，边框我也不要了啊，边框就不要了，那为了掩饰这个问题的话，我最好找一个，找一个大一点的图片啊，我们直接Google一下，我们找一个找个什么呢？找一个。

找一个这个钢铁侠的比较大的一个图片啊，我们直接把这个图片呢，我给它另哎，给它另存为一下，存到我的桌面上，然后把这个图片呢，我给它拖过来。这个改一个名，我们叫一个三三.gbg，那现2.gbg啊，那现在我们有这么张这张GPG的这个图片，刚才我整的这个图片呢，它是比较的比较大的，我们来看它的大小是一个这个1920乘以一个1080P对吧，它是一个比较大的，所以这个时候如果我把它设置为背景图片的话，我们注意会有什么问题啊，我们直接来一个，这应该是一个2.gpd。设置背景图片，这个时候你会发现我这背景图片它能不能显示完整，哎，它不能显示完整，它是不是这样，是不是现在只显示了我个图片的一个这个左上角啊，是不是只显示了这个部分拳头到没到，诶正好刚到这个拳头那漏了一个边，对吧？因为现在的情况是我们背景图片比较大，比较大，而我们这个元素是比较小，哎，比较小，那这个时候我们可能希望什么呢？希望我们这个图片可以在我们的这个，在我们这个元素里啊，在我们这个元素里完整的显示出来，那这个时候我们就可以通过background size来试background。

Background它是干嘛的呢？它是设置我们背景图片的一个大小的啊，你背景片大是是多大，比如说我这可以写一个，我写一个100像素，然后写一个这个100像素，100像素，那这个时候的意思就是让我们的第一个值表示什么呢？第一个值表示宽度，第一个值表示我们的宽度啊，第二个值表示我们的高度，表示高度，所以有点像我们图片那个还有的你设置完了以后，你看我这个图片的大小是变成100成100的了，哎，你也可以改，你改成200，就是改成一个什么呢？改成一个100，那这样是不是就变成200乘200的了，哎，200乘200，你就说你可以通过这种情况去改变它的一个高度，那这里面就是设置我们图片的一个这个尺寸，那这个时候你注意了，你也可以只设置一个值，跟图片一模一样，你只设置一个值，你只写了一个宽度，你注意了高度。

干嘛了，高度是不是跟着你那个自动去改了，哎，那我们说了，这里边注意我们两个值，如果什么呢？如果只写一个啊，如果只写一个则什么呢？则我们这个第二个值，第二个值默认是什么呢？是凹凸自动设置，也就说等比例缩放，所以如果你这写个凹凸200，凹凸跟你光写一个200效果是什么样，效果是一样的，看懂意思吧，诶效果是一样的，所以这个时候我们就可以通过这种方式去调整这个图片大小，比如说现在我希望什么呢？我希望这个图片的宽度可以把它撑满，那我就可以干嘛呢？我就可以把这改成一个100%，我可以把它的宽高呢都设置成100%，那这样的话，效果就是我们的图片跟我的元素是一边大的，对吧，图片跟我的元素是一边大的，但是我这么设置完了以后，很明显我是把我的这个图片的比例给变了，图片是不是比例变了以后，稍微有点难看了，哎难看了，所以我可以把。

第二个值设置成什么呢？设置成这个凹凸，第二个值设置成凹凸以后的效果就是，哎，我的图片比例不变，但是横向是不是就给它撑满了，哎，撑满了以后下边会出现一个白边对吧？出现一个白边同理，我可以让第一个值是凹凸，第一个值是凹凸，第二个值是什么呢？第二个值是100%，那这样就是什么呢？高度上会撑满，但是宽度上有可能就显示显示不全了啊，你可以通过这种方式来调整我们这个图片的一个大小啊，调整八小，然后还有一些可选值，我们比如说有一个叫做cover，哎，Cover cover什么意思呢？哎，Cover的意思就是图片把我们这什么呢？图片比例不变，哎，图片的比例不变啊，比例不变。

哎，将什么呢？将我们这个元素铺满啊，保证这个比例，然后将你这个将这个元素铺满，实际上这个时候你看啊，我整个图片，你看我的高度显示的是完整的，但是宽度显示的是不完整的，说白了就是什么呢？我让你一个边，就是我让你的图片把你的这个什么呢？把你元素铺满，我保持这个图片比例，但是有可能什么呢？哎，有可能有的位置啊，它显示不全，你像这块宽度是就没显示全呀，但是它的目的主要就是把这个什么呀，元素给你铺满，Cover就是覆盖啊铺满，然后还有一个值，我们叫做content。

Contain是吧，Contain这表什么意思呢？表示完整显示图片，也是图片比例不变，哎，将我们这个图片在元素中完整显示啊，完整显示那这个就是什么呢？就是我确保我这个图片可以看全了，那也就说有一个宽度或者是高度，它的宽度应该是一个100%对吧，100%，然后的话就可能会出现这种这种边儿，但是图片你是看的是完整的啊，看的完整的这是两个东西啊，一个是cover，一个content，我们用的还挺多的啊，还挺多的background side啊background side好，这个是一个他们啊这都比较简单，呃，然后的话我们再说一个东西，再说一个东西呢，其实这个东西我们先说一下这个问题啊，现在看情况看着啊，我在这个BOX1里边，我再整一个div，我这里面来一个，哎，我不写class了，我直接给他写个行内样式，我们写一个style style，比如说我来一个hi hi是一个1000像素啊，1000像素，这个时候我们。

的子元素是不是从复元素里溢出了，哎，从复元素溢出了，但是现在它里边没东西，我们看不见，溢出了以后我们可以用那个overflow，是不是去处理这个溢出内容啊，哎，所以我可以用一个overflow一个什么呢？Overflow一个凹凸，这个时候我们这个东西是不是就出现滚动条了，哎，出现滚动条了，但是你注意了，实际上在我们这个元素里默认情况下，我们的背景会不会随着你的滚动条滚动，它是不动的，也就说你滚动条再怎么拖，背景是不动的，是实际上下边是没背景啊，它就是移动的这个滚动条移动的里边的子元素，而我们的这个负元素，它里边的背景是不会跟着你去移动的，所以这里边我们要演示这个问题，我们必须得通过谁演示呢？我们必须得通过这个包地去演示，那包地会有什么问题呢？啊，我把这给它注掉。住掉住掉以后呢，看着啊，我给包Y设置一个样式，包Y的话，我们给他直接设置一个headde headde我给他设置一个什么呢？设置一个这个设置一个，哎这样其实我们不用包也可以去演示这个问题干嘛呢？哎，我现在呀，这个div的高度是1000像素，我给他呢写一个class，叫做一个box塞。

这钥匙我先去掉啊去掉。然后呢，在这啊，我们写一个写一个这来一个点一个BOX2，点一个BOX2呢，BOX2我们来一个Y啊white是一个这个300像素，然后呢，Hi呢是一个这个1000像素啊hi比较高一点，然后我们给它设置一个background color background color，我们来一个orange啊，设置一个橙色的一个背景，设置完了这个是不是我们的这个div啊，高度是100了，改成1000，这个是我们的这个BOX2这个div，你看当我去拖动的时候，这个BOX2是不是会跟着去移动啊，哎，跟着移动，那这个时候呢，我给它设置一个背景图片啊，Background一个image background image呢我们是一个URL，我们下边的一个这个img下边的一个这个1.ppd吧，1.pngpng，这是我们这个小猫这个图片，对吧，小猫这个图片，然后我们再来一个background一个什么呢？Background的一个这个repeat repeat，我给它设置一个no repeat，不让它重复。

啊不能重复，那现在注意他们的关系，这是BOX1，这是BOX2 box2里边我设置一个小猫的一个背景图片，那这里面注意当我去拖动的时候，你会发现什么呢？这个小猫啊，这个背景颜色我可以先去掉，这个小猫是不是就就没了呀？哎，这个小猫就没了，为什么小猫会没了，因为这个小猫是BOX2的一个背景图片，那这个时候我们BOX2是不是它等于是这么长的，哎，这么长的这么长的效果就是当我去拖动滚动条的时候，实际上我是不是就把那小猫就就往上去移动了，哎，也就说现在我这个背景图片它会跟随我的这个元素移动，背景图片它会跟随我们元素移动，那所以我们在这会有一个属性叫做一个background attachment啊attachment这个东西用的挺少的啊，用的挺少的，这个可以干嘛的，他着问他这个可以设置我们这个背景图片是否跟随元素移动，背景图片是否。

跟随我们这个元素移动，它的默认值啊，我们叫做一个这个SQ啊S磕就是滚，也就说它会你的元素滚，这图片会跟着你什么呀，跟着你一起滚啊，跟着你一个一起滚，是这么一个啊扣可选值SCI死扣，这是一个默认值，元素什么呢？背景啊，背景图片会什么呢？会跟随我们这个元素移动，元素走了，背景片也就没了，然后还有一个值，我们叫做一个fixed啊，Fix的这个你看到它的话，你应该能想到什么呢？想到我们那个固定定位啊，Fix表示什么意思呢？表示我们元素，我们这个背景图片，哎，会什么呢？会固定在我们这个页面中啊，不会什么呢？不会随我们这个元素移动啊，不会随元素移动，所以这个时候你再看，你看我这个图片还动不动了，哎，就不动了啊，当然你这现在看不出效果来，我给这边写点字L。

Lo啊，我们写点内容啊，写点内容这个时候我们再看效果啊，你看我这个字动元素本身动了，但是背景图片有没有移动，哎，背景图片并不会移动，那这个就是我们background的一个touch么的一个特点，它可以把我们这个图片的固定，这个就跟我们这个position那个fix差不多，那现在这个背景图片你再定位，它就是参考于谁呢？参考与我整个窗口就定位了，所以这个时候你所设置的位置一定要都是相对于什么呢？相对于我们这个整个这个市口来说的啊，是口来说，比如我来一个100像素，再来一个100像素，那这就是什么呢？相对我们视口移动100，但是这个东西它现在就就不会动了，它就就等于是固定住了啊固定住了，但是这玩意儿吧，用的不多啊，用的不多我们了解一下就可以了啊，了解一下就可以，只有这么一个东西就行了啊好，那这个是我们说的一个背景相关的所有属性我们就都给他说完了啊。

我们回顾一下，我们说了几个啊，说的还是那些常用的啊，常用的有什么呢？B GR background color，还有什么呢？BA background image，哎，还有BA background，还有什么呀，Background repeat。哎，啊，还有什么呢，叫做一个。嗯，Orange or or orange，还有一个我们往上写一个background BA background，一个这个position啊，Position，还有呃，POI啊，还有我们叫做一个BA background，一个叫做size啊，Size，然后往下还有我们叫做background DA啊，DR background orange，还有一个我们叫做CLA啊，裁剪的还有一个BA ground background，一个这个这个叫attachment at t，这这这太长了，粘一下。

At EMT啊，叫做一个attachment，也就是说我们所有的背景相关的样式，我们是不是一共说了这么多呀？哎，一共说这么多，那这个时候注意我们还有一个东西什么呢？哎，我把这个呢，我说直接说一下，我们叫做一个BA，有了一个属性就叫做一个background啊background这个是什么呢？这个是我们背景相关的一个什么呢？简写属性啊，简写属性我们所有背景关的这个样式都可以通过什么呢？哎，通过我们这个该样式来设置，所有的只要是背景相关的都可以设置，并且什么呢？并且它比如说怎么写啊，我们把这些现在给它注掉，我把这个直接给它注了啊，我们写简单一点的。

这我们直接点一个这个BOX3，点一个BOX3，然后呢，在这里边我们就直接写一个啊，写一个点一个BOX3 box3的我们来一个500，来一个500，然后background啊，这个时候我们就直接用background设置了，比如说你想设置颜色，那你可以选一个井号，一个BFC，那这时候背景颜色是不是有了呀，然后你可以接着往下写背景图片，你就直接写点上斜盖，我们这个是一个img，下边是一个2.dbg 2.dbg，这样是不是就设置上了，哎，设置上了，然后它的一个位置你也可以写一个哎，Center center，它是就变成了一个什么呀，变成了一个居中的啊，比成居中的不重复，你可以再写一个no no repeat的啊，No repeat的，然后呢，还有什么呀，诶，Fix你可以写一个，但是这玩意儿一般就不用写了，因为这这这写的也没什么用啊，没什么用，那就是说这么一个意思，我们可以把这些所有的值都通过这个background来设置，并且它没有顺序要求你说我把URL写前面。

把背景写后边是不是一样的，哎，没有任何的顺序要求啊，你可以随意写啊，随意写，但是这里边其实如果你注意的话，你会发现一个问题是吧？哎，当然我们还我这里边我是不是没有写那个size呀，哎，Size，那background size要怎么写，那注意了，这里边我们要有两个点需要注意啊，有两个需要注意，我现在假如说我想设置这个图片的大小，比如说我想给它设置一个这个，这个叫做一个content啊，Content怎么办呢？那这个size需要写到这个位置的后边，也就说你需要这写一个鞋盖，然后你写一个这个。我直接粘过来count，那这个时候它就达到这么一个效果，一定注意这个size是写到这个position的后边了，一定要写到它的后边，所以这个时候注意，如果你不想写，你只想写size，你说我就写一个content，这样是不行的，它必须得在它的后边，这是第一点，第二点我们有两个值，实际上他们值是一样的，就是background，这个clap，还有一个orange，他们的值都是都是border box count box这些东西啊，那这两个值它有一个顺序要求，就是orange必须写到前边，Club写到一个什么呀，写到一个后边，所以如果你要写的话，比如说我写一个border box border box，那这个时候就表示我们的定位原点是一个Bo box，然后后边我再写什么呢？我再写一个这个content box content box，那这个就表示我的背景只在这个内容区中出现啊，只在内容区出现，当然我们这给他加个拍on就能看出来了啊，拍on我来一个二十五十吧，50像素，然后呢，再给他写一个boder borderder。

十个像素啊，十个像素，然后来一个red，然后来一个double，诶double我们来看效果，这个时候你看我们的内容区上是不是就没有边框啊，哎，这个那边距上就没有边框，为什么？因为我在这设置了一个count box box，如果你改成一个border box是不是就行了，哎，就有了啊，所以这个顺序注意啊，我们来说一下。

呃，这个玩意儿呢，简写属性它没有什么呀，所有背景相关的样式都可以通过这个background来设置，并且它没有什么呢，哎，并且background并且哎该样式没有什么呢？没有顺序要求啊，没有顺序要求都什么呀，也没有什么呢，诶也没有个属性是什么呢？哪个性是必须写的什么意思，比如说我就写background，我就设置一个背景图片。别的我都不写行不行，没有问题啊，没有问题，我就写一个颜色，不写别的行不行也没问题，就是都可以省略是吧，都可以省略，想写什么你就可以写什么，有点像我们那个放，甚至比那个放的还自由啊，还自由，但是这里边呢，它也有两个需要注意的眼，注意点哪两个，第一个我们的这个background position BA background，我们先说size吧，哎，Size必须什么呢？必须写在我们这个background什么的position的后边，Position的后边啊，并且什么呢？并且使用我们这个鞋盖隔开啊隔开，所以如果你要写background side，他们俩的关系应该是先写background position，然后再写什么呢？再写background side，也就是说它俩实际上是什么呀？是一组，有点像我们字体里边那个fo size，还有那个一样，它俩是一组逼着一块写。那也就是意味着如果你想设置片。

角通过简写属性的话，你必须得把也得写上，不然这个大小你没有办法设置，这是一个，然后第二一个，我们这个什么呢？哎，我们这个background叫做一个orange。

和我们这个background CLA，哎必须什么呢？必须按照什么呢？按照我们这个orange，哎在先，哎就是也就说什么呢，我们这个orange啊，这两个样式啊，两个样式，哎，我们这个orange。哎，要什么呢？要在我们这个clap的一个前面啊，这两个东西，因为它俩的属性值是一样的，为了区分我们就规定了orange必须在AP的前面就完事了，就这两点需要注意的，别的点都没有，都没有了啊，所以这个是我们说这几个属性一共是等于是九个吧，单个的属性还有一个简写属性啊，简写属性嗯，可能第一次看的话稍微的有点难接受是吧，这个东西没什么可说的，记一下就完了啊，待会儿我们来通过几个练习来把这些知识再进一步的巩固一下啊，巩固一下好，我们先停一下。