00:00
大家好,我是上硅谷H5学科严老师,在程序员节日到来之际,和大家分享一道面试题,求背景图片的左边。到盒子box。左边框外侧的距离,那好,那接下来我们说这个题呢,实际上在考察我们最终的整个盒子的模型来,那接下来我们说一起来回顾一下我的整个盒子的模型来,盒子模型最重,我们说正常我们设置的宽度和高度构成了我们最终最里边的盒子模型,我们管它是不是叫content box。接下来当我们在设置完pending之后,我们出现的pending的区,我们管它叫做pending box来,这时我们设置一下这个区是不是pending box来,Pending box以外的部分我们说再设置一个边框来,边框区域呢,我们管它叫做bother box。来,这是我们设置一下,我们说这个红色其实是我们最终的包box,那好,那接下来我们说这三个盒子呢,构成了我们当前盒子的这三个核心的三个盒子模型,那好,那接下来我们说这里边问到了我们一个问题,背景图片的左边距离,我们最终盒子左侧边框外侧的一个距离,那接下来我们说盒子的外侧边框的距离,我们已经知道是哪个位置了,来我们大体画一下是不是我们的这条边,对吧?盒子左边框外侧的距离是这条边,接下来我们说唯独要确定我的背景图片的位置是不是在什么地方啊对吧?来,那好呢,接下来我们就一起来演示一下我的背景图到底是从什么地方开始去渲染呢?并且我们在渲染的时候都有哪些盒子可以渲染我的背景图片,来,我们先看一下元素的基本样式,元素区域给我们设置了宽100,给我们设置了高二。
01:56
百紧接着背景颜色是不是给我们标记成我的粉色,接下来我们说潘定区给我们设置成是不是100PX边框区是不是给我们设成了80,紧接着给我们引入了一张图片,是不是我的1.tpg来下面这个钥匙的部分呢?我们说先暂时先给它注释掉来这个区的样式呢?我们说先给他暂时先注释掉,注释掉完成之后我们直接看一下我的整个浏览器区是不是这样一个区,我的图片明显默认起始的地方是不是在我PA box的左上角,看清楚了吗?我默认的起始地方在PA box左上角,所以呢,接下来到目前为止,我们说如果要求最终我的背景图片距离我们最终盒子左侧边框的距离是不是应该是这段距离,而这段距离恰巧是不是应该是80啊,对吧,但是我们说最终它的要求没有这么简单,它给我们加了什么呀。
02:56
Background repeat又加了一个东西,这个东西叫什么呀?Background or,它是设置我们最终背景图片起源的位置来,这是设置我们最终背景图片起始源的位置。
03:17
来背景图片起始源的位置,默认背景图片的起始源的位置是不是在PA box上,现在它把我们默认起始源的位置是不是变到了content box上,所以呢,接下来我们找到页面一刷新是不是在这里,那就证明当前这只大猫默认的位置是不是在这儿,而这段距离最终距离我整个边框左侧的距离明显是不是80,加上我左侧判定100,最终构成的距离是不是180啊对吧?但是我们说这里边出现完成之后又出现了一个什么呀?Background position说background position明显是不是在确定我们最终背景图片的位置,但是确定背景图片的位置,我是不是要参照一个点去确定我背景图片的位置啊,对吧?那接下来我们说如果最终你默认是PA box。
04:17
的左上角,那就证明我paint box左上角是零零的起始原点,但是现在我们明显是不是已经变到count box左上角,所以接下来对于我们来讲,Content box的左上角才是我们当前坐标轴的起始原点零零,而你最终书写完成之后写的是不是负的50X0啊,所以呢,对于我们这张背景图来讲,它要给我们向左移50PX,紧接着垂直方向不动,所以接下来移完的距离应该在这,移完距离在这之后呢?接下来让我们求取的这段距离,明显是不是应该是这段距离?那好,那接下来我们说这段距离到我们绿色这条线的距离,我们刚刚看到明显是不是180,而现在对于我们当前来讲,180减去50,最终的结果是不是剩成我们最终的130啊,所以呢,接下来我们。
05:17
我说这个题最终的答案应该是130PX。
我来说两句