00:02
我刚刚新建的是代码零幺这个项目,下面呢,我把它复制一份。咱们来看第二个知识点。但。呃,那这个页面上呢,我把这个报里面的内容啊,把它先删掉。这个也把它删掉。这个这个地方。这样吧,这个link咱们先不使用web的吧,就使用内部的style就可以了。好把这边把它删掉。然后呢,我在这个波点里面的同学们大家看一下啊,我来写个TRV。我来写个第二。这个第二里面我放一个空格啊。然后呢,这个div我写个叫ID,等于DV1。好,就是这样的。下面呢,我想对它的样式来做一些修饰,井号div。我让它的宽度Y的,我让它的宽度是400PX。
01:04
我让它的高度也是400PX。我让他的背景颜色background看到。呃,背景颜色用什么呢?咱们把帮助文档打开吧。我们找一下,这里面有个叫颜色表。然后我们可以选一个颜色。咱们同学喜欢绿色是吧?那就写个绿色好。然后我们把它放到这。好,就这样子。然后呢,然后呢,这个叫green yellow,这个好像是绿黄色或者黄绿色是吧,好就这样子,我们试试,哎,有的吧,这是一个div。我们这边有wide以及he,这表示宽度和高度。啊,宽度和高度。这个div呢,我可以在这个地方。
02:00
我写上它相关的属性叫波。波的表示边框属性。或者叫边框样式。叫。这个D我来修饰一下,比如说border的wide。边框的。宽度。比如说有一像素。波的style,边框的风格,比如说solid细线风格。Border color。边框的颜色,比如说我们写个叫blue蓝颜色。我们一起来看一看。变形一下,它就会有有一个蓝色的边框,能看到吗?和刚才是不一样的。如果大家想看的更清晰一些,我把它改成四像素。那这时候应该就看的比较清晰了。所以说borderwides,它指的是边框的粗细。
03:04
这个border style,它指的是边框的样式。边框样式。那样式我们有solid,它指的是叫实现。实现。除了有实现,还有其他的,这个不用记啊,不要去死记硬背。比如说doty的。道德,别的爹嘛。点状线。啊,到底的,那咱们试试呗,把它改掉。到底的。我在那运行,你看一下是不是就点状的信号。啊,就这样子。那到底有多少个属性值呢?我说了,不用记,可以查得到的。我们来看一下。你看这同学们,这是不是一个边框。边框,记得他。点开其中一个叫border style。我们看一下是不是有倒的,是不是还有solid的。Double。是不是双线啊。
04:01
Double指的是双写,就这样子。就这样子,所以说你就简单的看一下,假设你看到别人啊,看到咱们前端的工程师写的这个页面,诶这个属性值好像我没听过,那你就查一下哦,一看哦,原来是这个意思。所以我这边我就不再写了啊,点点点这个讲着讲着就没完没完没了了啊。好,这个叫边框的样式,那这个叫边框的颜色。边框颜色。就这样的。当然了,这三个我们可以把它合起来写。这三个我可以把它合并,合并成一个包的样式。比如说同学们你看一下。好,我会到这边来把它注释掉。把它全部注释掉。
05:02
好,我全部注释掉了,我只用一个属性。然后四像素。到体的或者换成换成double双线。Blue。是吧,我就用一个波的把这三个属性就把它合并起来了。那你运行你看是不是双线啊。就是这样的。然后呢,我们这个波的它既可以合也可以分,什么意思。你的边框有四个边框呢。这四个边框能不能分别设置呢?当然是可以的。播的。Top。杠wide这是一个border top gun style又是一个border top,杠color是不是又是一个?那这三个是不是可以合并成border top呀?是不是上边框四像素。
06:00
Dotted。Blue。你看一下是啥效果哦。是不是只有上边框才有这个样式啊?其他三个边框没有,大家能听懂吗?啊,所以在咱们这边就不再展开讲了,展开讲太费时间了,因为咱们毕竟倾向于更这个优先要学后端啊,所以前端的知识,但也不能说完全不知道,所以咱们还是要了解一下的啊,但是这个不能说太多,说太多这个时间肯定不够。好。那我还是把上面这个先把它先恢复过来。啊,这是我们修饰边框。Top是上面是吧,左边left,右边right下下下面的底底端呢。Bottom BOT bottom。不用死记硬背,这边有。播的bottom能看到吗?修饰底端边框的叫bottom啊,OK。好,这是第一个样式,我要给大家讲的叫波,叫边框样式,这是第一个。
07:01
再来。第二个我要给大家讲的。这个我还是把它改成solid,改成正常的吧,Solid啊。这个补漏没问题,再改成一箱素好。这第一个包的边框,再来第二个。第二个我要给大家讲的是什么呢?同学们看好了,我在这个DV里面。在这个div里面看好了啊。我放一个小的div。哎,它内部嵌入了一个小的div。ID等于DB2。好。第二个div,我也在这边来写个样式。看好了。井号第二。我把它的宽度,高度,背景颜色,我也也来设置一下CTRLC。给喂。好,这个我写的是200,这也是200。然后它的这个颜色。颜色,换个颜色吧。
08:00
颜色。嗯,刚才用的是绿色,绿色和金色比较大。金色这个吧。我的这个吧。这个第三行最后一个这个颜色。呃,这个大家审美观念还不如啊好。OK,就这样啊,这个程序员的审美总是不咋地是吧?第二位二好宽度高度,然后有背景色。来咱们看看这个DB2运行一下,它是不是在里面啊。啊,外面是400,它里面这个是200。同学们,我想讲的是,我想让这个中间这个DV啊,把它居中。放在中心,我想把它放在中心,呃,我怎么把它放在中心呢?如果以中间这个小的作为参照物。如果以它作为参照物。我以它作为参照物的话,它的四周,特别是上面和左边应该要有一些间距。
09:06
是吧?看好了。我现在是以。把这个关掉啊。这个关掉好。我现在是以div v2作为参照物,那么它要距离它的容器要有一些间距。所以我在这边写一下marking top。呃,我本身的高度是200,外面那个是400,那就上面就100吧,那就上下各100。Margin left。100PX。我们来看一下。这样他是不是就居中了?就是这样。啊,这样他就可以居中了,这个叫marin。再来。这两个属性其实我们是可以合并的。
10:03
我们可以写成marin。如果我这么去写PX。这么去写就指的是上下左右都是100。好,运行一下效果是一样的。上下左右都是100,我还可以这么写。0PX。这么写是什么意思呢?第一个值是上下是100,上下各100,这个值指的是左右。左右是零,那是不是就表示它在上垂直位置是居中,水平方向是不是还是居左?就这样子。我也可以把四个值都写出来,比如上下各100。左右这边是比如说50万PX。啊,后面一个比如说150PX。上下左右。那你看一下它就显示,哎,我算的不对吗。我怎么看他和我的计算有有些稍微有些出入啊。上面是一排上左,它是逆时针的上左下右。
11:04
上左下右。感觉有感觉有点不大对劲啊。100,这也是100,但是我感觉我感觉垂直方向好像都是100吧,那这个是垂直应该是感觉没啥问题的。这个50呢。50我感觉反而是右边的。是不是啊,左边那个是反而变成一百五了。哎,这个好像和我记得有点出入,我来查一下。看一下啊。我们找一家marin marin。就这个吧,点一下看看啊。Marin的值我们看一下啊。安江安上。You。向左上右下左,那就是顺时针。是吧,同学们,那就说明是顺时针,我怎么感觉这个数值不大对啊,上右上和右我看一下啊,上面是100,这也是100。
12:02
是上右下左。差不多吧,感觉差不多啊,OK。再来。上右下左啊,既然咱们反正看到这个问题,咱们就说一说行吗?同学们啊,虽然说这个不需要你死记硬背啊,但是看到咱们就说一说,如果提供了两个参数,你看到没有,他说如果是四个参数,如果是两个参数,如果是一个参数。它都有说明,如果是一个参数,那就是上下。第二个用于叫左右看到了吧,如果提供三个啊,那么第一个用于上,第二个用于左右,第三个用于下,你看到没有,它都有一些设置。啊,做一些说明,那行看一下就可以了啊。再来,那咱们就不要给自己为难自己了,是吧,咱们就简单一点,我把它注释掉。咱们刚才看到的顺序是顺时针是吧。如果是一个值。一个值,那就四个方向。
13:01
四个方向统一没问题。如果是两个值。啊,如果是两个指,那就是上下,然后左右。是吧,如果是三个值,那么它就是上,然后左右,然后下是吧,同学们啊,如果是四个值。那就是上那顺时针嘛,右右右下。左是吧。不用记啊,反正咱们看一下,我就把它写在这吧,啊,不用记,死记硬背,OK,那咱们一般情况下,我们就用marking top和marking left就可以了。就这样吧。那这样的话,他就是居中的。好,再来。嗯。我现在在DIV2里面,我再来放一个。第二。那么这个div ID等于DIV3。
14:00
我又放了一个D。You c。我把它放到这第二位三。然后跑到这边来。这是第二批三。第三我就让他是100像素,高度也是100像素。那是不是最外面的是400,中间的是200,里面的是100是吧,同学们。好,我也让他一个背景色。这个毕竟是用什么呢。用要不用个这个颜色吧,用这个颜色吧。就这样吧,差不多吧,啊,就这样子啊。那这个颜色默认是在在默认是在它负容器吗。是吧,D2不是不是它的负容器啊,它的负容器的左上角吗?零零嘛。我也想让他居中。怎么办呢?诶,其实咱们按照咱们现在所学的,我以DIV3作为参照物,我是不是把marin top和marin再拿过来,然后呢,这个设置为多少。
15:06
50这个也设置为50是吧,同学们。50应该差不多啊,运行一下,你看他也是去周末。啊,他也是居中的。那么。这个marking top mark,现在我把它删掉,我不想用这个。我还是想以DIV2作为参照物,还是想以它作为参照物?我们已经解决这个问题了啊,但是我现在不想用用这个。啊,还是想以它作为参照物,你想以DIV2作为参照物的话,我们刷新一下啊。我想以DIV2作为参照物的话,那就表示我内部要有些填充。这相当于是一个箱子,这个箱子里面一双鞋,鞋的四周要有一些泡沫,能进行填充,这样这个东西就不会坏嘛。啊,有一些叫填充,填充是什么呢。填充,我们称之为叫pandy。
16:03
啊,这叫填充。所以我这个判定top。我写的是50。PX。判定。我写的是50PX。把它的上面和左边各填充50嘛,那么内部的内容不就挤到中间去了吗?所以我们来运行一下,哎,它也是可以的。啊,它也是可以的。这个叫拍,叫填充。那么这个填充我就不再去啰嗦了,填充和marin一样的,也可以合并,也可以写四个值,也可以写三个值等等等等,行吗?同学们。不说了。但是大家不要高兴的太早。现在我这边运行是正常的,我换个浏览器。我用谷歌浏览器打开。这啥情况?这不是我想要看的效果,也不至于说差到这个程度吧。
17:00
这个差别也太大了,打开。咦?稍等一下啊。框框它是有的,背景颜色是没有,难难道是因为这边加双引号的原因吗?我把双引号去掉啊,不加双引号。我不加双引号啊。下再来试一下,保存一下啊。再回到谷歌浏览器里面刷新一下,果然是这问题啊,现在已经有了。但是有没有,大家有没有发现哪里感觉不大对劲啊?啊。有没有发现哪哪里不大不大对劲啊这个。好像现在好像不是居中诶。是吧,我感觉他好像不是居中。你看啊,首先来我们来看一下啊,首先大家看一下啊,我现在这个截图,这个大家能看到我截的图吗。啊,那说明共享是对的啊来。我现在画的箭头能不能看到?能看到吗?我画箭头。画了一个红色的箭头,能看到啊,OK,好,这个距离。
18:03
这个距离。啊,然后这个距离。还有这个距离,还有这距离我们设置的应该是没有问题的,但是他没有居中诶。同学们。他咋就没居中了呢?我把这个400啊,我把最外面这个400来给大家做个对比。我在外面写个D。给大家看一下。ID叫D4。好NBSP。好了,这个DIV4呢。稍等一下啊,第2B4。井号第二贝斯。我让他和最外面这个一样。从这到这,CTRLC。然后呢,CTRLV。我们先看一下,这是我一个DV,里面没有任何的内容。啊,里面没有东西,我们看一下它和外面这个尺寸是不是一样的。运行一下。你看一下是不是一样的。是不是啊,是一样的,没有问题,我们再回到谷歌浏览器,你再看一下,刷新一下,几乎也是一样的,但是有一丁点小的差别。
19:10
带个边框。它们两者的差距,差的尺寸宽度,差的两个像素。正好是左边一像素的边框,右边一像素的边框。这个差别是什么呢?这个差别是说在IE浏览器里面,在IE浏览里面你所看到的实际的大小,就是Y的字的大小。但是在谷歌浏览器里面一个div,你所看到的实际的大小是它的wides加上它的border的wide。我再说一遍。来,我们写到这。我们IE浏览器当中。当然这个不需要掌握,反正我们说到这个分场大家去看一眼啊,我们。
20:03
因为这里面东西其实还是蛮复杂的,IE它又分为很多不同的版本。啊阿的应该是新版本,应该是也是遵循现在这个标准了啊。咱们简单看一下就可以。就是我们看到的实际。实际尺寸。实际尺寸。就等于Y。那么谷歌浏览器。它的实际尺寸。等于Y的加上左右边框。左右拨的它的wide。是不是啊,或者叫border乘以二也行啊。是不是啊,就这样子好,这是第一步,再来。那么这个我已经把它把它写好了再来看啊。我们再看它内部的啊,再看内部的这个div。呃,这是DIV4,我不变啊,我们内部的div是DIV2。D2它的宽度是200,然后它的ing啊是100,它有个pending。
21:05
同学们看好了啊,看好了,我现在把DIV4我改掉了,我把它改成两百两百,然后我设置一下MARK100。请大家帮我一起来看一下啊。我问一下大家DRV4,当前你实际看到的尺寸宽度是多少?就是200吗?按照我们刚才写的这个规则,他不就是200吗?他有没有波导。是吧,好,所以我就是以它作为参照物,你看一下DIVV2它的实际的尺寸宽度是不是200。在在这个IE浏览器里面,我们看一下,你感觉是正常对齐的。因为里面这个橙橘橘色的这个也是没有边框的嘛,差不多你差不多能标出来嘛,是吧,能看出来差不多宽度差不多啊,但是呢,我们到谷歌浏览器里面去看一下刷新。
22:00
能看到吗?他就差了一些喽。差的是多少呢?我看一下。啊,他差了多少。我们在这边画根线。就是这根线。这么长。那么这么长是多少呢?你再看一下这个。两个线应该差不多吧。应该是差不多,他就差了50。那这个差的这个50是从哪里来的呢?就是因为我这边设置一个叫PA left等于50。就是因为我是这个判定left等于50。所以我把这个公式再改一下,Chrome这个浏览器里面实际的尺寸等于wide的值加上左右wide值。再加上。这个Y要不我就不不加个杠行吗?就这么写啊,Whats再加上pending的值。是不是这样的?啊,这是它实际的尺寸。
23:01
那么这个给我们的启发是什么呢?所以说如果我们想要在谷歌浏览器里面想把它调正确了,想让它变成居中。我们应该怎么做呢?D2你的宽度不能是两百六一百五。因为你下面有个有有一个50高度150。来,再来试一下。刷新一下。你看一下现在是不是就居中了。是的吧,大家可能看到眼睛花了是吧,感觉好像居中,又好像不居中是吧,实际上是居中的啊,现在是居中。好吧,同学们,这样来就可以了。但是阿又不同意了。看到了吧。是不是?啊,这个还好看啊,行吧,对吧,IE他也不同意了,因为IE里面你Y的子设置的150,它是不是就只有一百五啊,啊下面人家这个参照物DRV是不是200啊,明显这个要比他宽嘛。啊,阿姨不同意了,所以呢,如果要解决,我们得去研究CS里面叫浏览器的兼容性问题。
24:05
啊,如果再往下讲,那就是研究这个兼容性问题,我们怎么去写一套通用的CSS样式,能够去让这不同的浏览器它都能够通用,能够兼容。也说老师。干嘛要搞兼容呢?大家都用谷歌,那我就做成谷歌,就只考虑谷歌不就行了吗?大家都使用IE,我就考虑IE不就行了吗?但你要知道这个全世界的网民多着呢,是吧,你哪里知道人家用的是什么浏览器哦?甚至于我们,甚至于我们现在还有很多的电脑在用的是这个无2000的这个这个操作系统。那么它上面的R1的话,也就用了IE6。那那那个版本会更老。啊,所以我们要充分的考虑兼容性,当然了咱们还比较幸运,我们做的是后端是吧,做的不是前端啊,前端程序是比较痛苦的啊,这个IE这个这个这这个叫浏览器的兼容性问题啊,是一个非常头疼的问题。好了,咱们就话题到到此为止啊,就不能再往下延伸了好。
25:01
呃,通过我们这边所讲的知识,我要给大家小结一下。其实我给他讲的知识叫合资模型。CSS当中的盒子模型。这个盒子模型有三个要素,第一个叫波的,叫边框。第二个叫marin。叫间距。第三个叫潘,叫填充。行吧,同学们,我想给大家介绍的是这么三个属性,那么这三个属性我们在后面会反复的频繁的去使用它。我们在做页面布局的时候,会频繁的去使用。啊,这是我们这个所讲的内容,那么最后还有一个小点,我也给大家稍微提一下。当前我们的页面大家看一下我这个div,你看一下它上面和左边是不是还有一些距离啊。这个我们称之为叫八像素问题。我们内部的内容,它总是没有紧挨着这个零零这个坐标。啊,他总是给我这边留了一些空白。那我需要把这个空白把它去掉。刷新这边也是一样的,你看。
26:00
这个地方能看到鼠标吗?还有左边总是留了一些空白,我要把它顶着,顶在最左边。所以呢。所以呢,我们可以在这个里面,我们可以设置一个叫body。在body当中。我们可以把marin设置为零,我们把判定也设置为零。好,我们再来看一下。刷新一下。是不是就紧贴着了啊,这就紧贴着了,好了,IE也是一样的,到IE里面去他也会紧贴着。是吧?紧贴着的啊,没问题,OK。
我来说两句