00:00
来看我屏幕,我把这个页面我把它复制一份。复制成单零三。把它打开。嗯,其他的呢,我暂时先把它先关掉啊。那么在这个当中呢,我把这些先全部把它删掉。好,这个div我们也把它删掉。OK。是这样的,同学们。我们的我们的CSS当中啊,我们每一个每一个节点,比如说DV。我先把它写一下啊NBSP,好,然后呢,这边有个ID,比如说DV。然后呢?我可以在这边DIV1我通过ID样式。来对它进行修饰。好,我们有一个样式啊,属性叫position。我们有一个样式属性叫position,叫定位。
01:02
那么我可以写一个叫absolute。Absolute,它指的是绝对定位。我把这个DB呢,我先把它的宽度啊,高度啊,背景颜色啊,我先把它先写出来啊。比如说200PX。高度,比如说50PX,好,就这样吧。然后它的背景颜色background。Color,比如说这个叫green yellow好。就这。我们运行一下,这是一个div,没错吧,同学们。好,那我们刚才说了,它上面和下面是不是也有一些距离啊,八像素问题是吧,所以我们在这边可以写个body。我们我我们把body它里面的设置为零,它的pen咱们也设置为零,我们再运行它就紧贴着上面了,好,我下面想讲的是这个position叫绝对定位。
02:01
这个绝对定位。绝对定位就是我这个DV啊,我们相当有个坐标。在我们的。在我们的这个端啊,在我们的这个屏幕的这个最顶端这边叫零零。往横向的叫X轴,往下的叫Y轴。好,就是这样的。那么。这个DV当前我没有设置它的X和Y坐标,所以呢,它默认情况下就是零零。是吧,紧贴着左上角,我可以在这边写一下X的轴叫left。比如说它的X轴是100PX。它的top指的是它的Y组,也是100 PX表示它向下向右全部挪动了100像素。你看他就跑到这边来了是吧,就跑到这这个位置来了。这种叫绝对定位。这是叫绝对定位。再来。我们除了有绝对定位之外,我们其实还有相对定位。
03:04
我们还有相对定位。再来看第二个。我再写个D。这个ID我把它设置为D2。这是DIV2。那么DV2呢?当然了,DV2。我们可以把它设置为叫相对定位。它的负容器是谁?它的负容器是body。我可以把它设置一下。现在你看啊,我没有设置啊,稍等一下啊,我把它CTRLC。把它写下来啊。第二。宽度高度不变嘛,这个颜色把它换一下吧。Pink,好,这是第二。我们也加个空格。我们来看一下,你看它是在这个位置的。绝对定位,那么它是默认是零零嘛。
04:01
那行,现在呢,同学们现在呢,我把它的这个定位方式,我把它改成相对定位。D2我把它改成相对定位。相对定位叫。啊,这叫相对定位。那默认你感觉好像没什么变化。它是一个相对定位。相对于谁?相对于它的副容器?我们这个时候呢,再来看另外一个属性。叫flu,叫浮动。我们可以把它向左拼命的浮动,在它的副容器内部,我们可以拼命的向左浮动或者向右浮动,我们写个right right,我们来看一下。他是不是就跑最右边去了。当然,我们也可以向左浮动。那它默认的情况下,本来就在左边嘛,所以你看不出来效果,没有关系,我们把这个marking left把它加进去20PX,是不是它拼命的往左边挤,然后呢,左边留下了20像素啊。
05:01
能看得到吧,这个叫相对。那这个有什么应用呢?它有什么应用呢?我们再来看一个吧,啊,再来看一个DV3。ID叫DB3。DIV3我先把它的样式先调出来。从这到这。Could you see。好,把它放在这。D3宽度我就不写了,不写的话它是独占一行的,一整行都是。高度,我们暂时可以把它写上去啊,另外一个小细节给他说一下,我当前这个表头我直接使用的是HTML,它使用的版本其实是。HDL4.01这个版本。啊,其实我们可以在前面加一个。价格叫doc,但这个大家不用记啊,这个呢,呃,这个东西呢。这个东西呢,大家如果使用idea,它是能自动生成的。啊,如果我们加上它,它就变成一个HTML5了这个版本了,那么HTLHTML5的版本里面呢,这个高度呢,它会失效。
06:07
T2:3这个高度会失效啊,你设置高度是没有用的。啊,那咱们先不管啊,我先把它先去掉。好,这就是DV3,我有一个背景颜色,然后呢,我有一个高度,那我们来看一下DV3是长什么样子,运行一下,你看DV3是不是在这。是吧,第二三就在这啊,它这个颜色没改是吧,我把颜色把它改一下,我改成yellow或者orange。Dark orange dark orange。好,就这样子运行一下,他就跑这儿来了。我把我把这个div v2啊呃,稍等一下啊,稍等我一下,我把DIV1和div v2我都把它先暂时注释掉,省得大家会受干扰。我直接写个D3。刚刚为什么会排到后面去,因为DB2啊,因为DB2它也在当前副容器,也是body在当前的文档流里面啊,我把这俩干扰信息全部把它注释掉,我只看DB3,大家看一下。
07:01
当前第2V3是不是独占一行?没有问题吧,他是独占一行的,没有问题好注意看啊注意看。我在D2V3的内部。我来写两个DV。OK,这第一个。Can you see。CTRLV这两个小的D。那么这个ID。我就写个叫第二位四。下面这个ID我就写个叫D5。好,这是2DB。那行吧,我把这两个divv的这个宽度高度啊,我也都把它写出来宽度高度。以及背景色KC。把它写出来。好,这是第V4,再来DV5。好呃,这个宽度是200没问题,它的宽度是200也没问题,高度这个也没问题啊,然后呢,我把这个背景颜色把它改一改啊,改成不一样的一个使用这个颜色吧。
08:02
把它换掉。呃,再来一个,还有一个使用,比如说这个颜色吧。好了,四和五,四和五,它的负容器是不是在它里面啊。我让所有的div听好了,我让所有的div全部都是相对布局,那我用的是标签样式表。Position叫。全部都是相对布局,那么他们其实都是属于一个文档流里面的。运行一下,这时候我们会看到他和他你看都在里面。呃,我看一下啊,稍等一下。当前我们外面这个是D3。D23,高度是50。第二位四五十没错,第二位五也是50,但是我四和五是不是都是独占一行的呀,大家看一下它就变成这样了。外面这个老师不对啊,外面这个不是设置的是50吗。因为它是副容器,它会随着我,根据我内部的内容会撑大。能听懂吗?我如果是再多加几个CRC。
09:02
CVCTV。啊,假设我多加了几个六。我意思一下啊,一会儿再把它删掉,我把六和七把它加进去,我把这玩意儿CTRLC。放进去再来六和七。呃,这两个都不变,这个颜色把它改掉吧,井号ABC。井号CBA。那咱们再来看一下六合七,我要把它挤进去了,那外面这个高度还是50吗?那显然不是,是不是就变得更高了呀?是吧,所以它会随它内部内容会被撑大啊,这个咱们就不再去去去琢磨它了啊行六合七我删掉了行吗?同学们。删掉了啊。这个东西还是要少一点,越多的话,大家看的会越看的越乱啊。那行,现在咱们只看三里面有四和五。好。同学们。我现在想让绿色的。跑道。这个颜色不太好说是吧,蓝颜色啊,绿色的跑到蓝颜色的后面。
10:03
绿色跑到蓝颜色后面,现在是不行的。因为现在这个蓝颜色的它独占一行,老师,不对啊,咱们不是已经设置宽度是200了吗。虽然它的真实的宽度是200,但是它后面的空间也不允许别人占用。也不允许别人占用,他叫这个是行级的这么一个元素。啊,他独占一行。那怎么办呢?D4。D4,我设置一下刚才咱们浮动的这个属性float,我把它设置为left。我就加了这么一个属性,让DV4向左浮动,拼命的往左边挤。那么这个属性一加的作用就是它右边的空间,它就不再占用了。他拼命的往左边挤,右边的空间他就可以留给别人用了,那我说了,当前这个文档流里面,它是个流嘛,一个挨着一个,一个挨着一个,所以咱们来看一下。
11:03
我就加了这么一个属性。再运行它是不是就挤上去了。是吧,同学们他就挤上去了。挤上去之后,那绿色的这个div它是不是也是200像素啊,那它右边的空间是不是也不允许别人占用啊。如果假设后面还有还有DV啊,想排到排到后面去,那你是不是也要把它拼命的往左边浮动啊,往左边挤,那么右边的空间是不是别人也能用了?另外一个小细节,这个地方大家能看到有一些缝隙吗?这个缝隙也是因为我这个绿色的没有拼命的往左边挤,导致它有个缝隙。我们可以来设置一下。我让DB5也往左边浮动。也向左浮动。咱们再来看一下运行。是不是那个缝隙就没有了。就是这样的。我希望大家通过这个案例能够清晰的理解position和float这两个属性。
12:02
OK,我们简单小结一下。当然我们position啊,Position里面的这个属性值啊,选项值会有很多,我们只讲了两个。Position。第一个叫absolute,这个指的是叫绝对定位。还有一个叫这个是相对定位。如果是绝对定位,我们就得就得给它设置坐标,X轴,Y轴叫left和top是吧,同学们。绝对定位的时候需要配合使用。Left以及淘宝。啊来设置它的坐标,如果是相对布局啊,相对定位,如果是相对定位呢,一般我们会和啊一般会。和。Flute。啊,会合float。会和marin。会和判定等等等等,会和这些属性一起使用。啊,一般会和这些属性一起使用。
13:01
这个叫position。第二个属性,我们学的是弗洛特,当然还有其他的一些属性啊,比如说clear属性等等等等,咱们这个就不再去不再去多说了。就介绍,暂时先介绍这两个。这叫position和float,那老师你给我讲的这个这东西到底有啥用啊。我们一起来看一下。同学们,下面呢,我想来写个页面。这是我的一个页面。这个页面呢。中间中间部分。在这里。或者这样吧,咱们先简单一点啊,别搞在中间了,中间会变得更复杂,最后一步我再把它加在中间啊,这是个页面,这个页面有这么几个部分组成,这是第一个部分。我们称之为叫top。这个是部分,我们称之为叫navig。然后这块显示主要内容。
14:01
我们称之为叫麦这个部分。下面这个车主叫bottom,咱们昨天是不是用frame set做过的?现在我们用第二遍来做一遍,这是top。这是left。这是卖。这是。OK。那也就意味着当前这个页面上需要四个DV是不是?Top left以及需要四个div。咱们把这四个div。把它画出来。好,我再来写一个。零四。打开。首先在这个body里面。首先在这个波里面,我写个D。NBSB。好,这个ID。我写一个叫div-top。
15:01
这第一个。那当然了,这里面我要不就把它把这文字也写到里面去算了啊,第p top就这样好根据C。VV有四个嘛。好,Left。卖。可以吧,把这边也改掉left。以及。好。我们有四个D。全部删掉。我让所有的div全部都是相对布局,我让所有的div全部都是相对布局。然后这个,然后呢,这四个DV呢,这四个divv,我把它的背景颜色把它设置出来。注意看。井号div-top。第一个div背景颜色,Background。看了啊,给了个背景色。
16:02
我们给到一个什么背景颜色呢?上面部分我们给它一个颜色啊。给他一个orange。放在这。You。好。我们也给他个颜色啊,麦也给他个颜色,Bottom也给他个颜色好。那么我们给他一个。绿色是吧,那给他绿色吧。然后呢,你这个中间部分最好颜色稍微浅一点。这个颜色。这个叫。这个叫white smoke叫烟白色是吧,白烟这个颜色是吧。再来。底端底端我们再给他个颜色啊,底端给到这个颜色吧。好,就这样吧,现在我们有四个div,四个div有四个颜色是吧,同学们好,运行一下。没问题吧,总共有四个颜色,好。
17:00
哎,没错吧,对的啊,四个div,每个div独占一行嘛,它的高度就是它里面实际的文字的这个高度嘛,占到内容的高度嘛,啊就这样子行。呃,这个top页面。这个top页面,我想让它的高度我把它设置一下啊top。把它的高度我说了,当前我使用的是HTML4啊,所以说这个高度属性它是有效的。比如说高度我让他是,呃,我让他是,比如说20%吧。高度20%,我们运行一下,你看这是高度20%。Left。我让它高度是剩下的80%。80%。是吧?那下面两个就跑,就挤到我这屏幕外面去了。你这个的高度是80%没错,但是你这个高度是80%,你宽度分的是独占一行。宽度,比如说15%。稍等一下啊。
18:00
15%。所以我们再写一下。15%是吧。那稍等啊,稍等啊。好,你是15%,所以他就跑这来了,但是我右边的空间是不是也不允许别人占用啊。我右边的空间也不允许别人占用。所以下面两个还是在下面。啊,所以呢,我们这个left要拼命的往左边挤。他拼命的往左边挤,是不是就意味着他右边的空白部分就留给别人了?我们再运行一下,你看这两个是不是都挤上来了,就这样子啊,就能全部挤上来。集上来之后低卖。我们把这个div麦,它的这个,呃,它的这个高度咱们也来设置一下。我们把它的高度。比如说上面是20啊,这个剩下的80 80咱们70吧。咱们写一下。高度70%。啊,卖了部分70%,我们再运行一下,你看它就剩下这部分,但这边是不是有个空隙啊。
19:03
空袭怎么解决的?是不是把他也拼命往左边挤啊?但是它如果拼命往左边挤,这个波,我们是不是就挤过来了,我们要让它独占,独占我们是不是可以设置一下宽度啊。Wide左边的15%嘛,那剩下85%都是他的可以吧,再运行一下,那这个是不是就挤下来了。就在这了。这是低压变卖这个部分。再来第二遍,Bottom高度是不是10%啊,宽度是不是85%啊,那行咱们设置一下。Can you see。好,这个先去掉。啊,宽度85%,高度10%,没错吧,再运行一下,哎,就是这样的。最后一个问题问一下大家,左边有一个空隙。右边不对啊。嗯。这什么问题呢,同学们。
20:00
这是什么问题呢?好。是这样的。我当前我把一个属性故意删掉了,叫float,等于我把它删掉了,稍等一下啊。当前这个bottom,它的宽度指的是剩下空间的85%。它和上面这个85,他们两者参考的标准不一样。上面这个八十五指的是我的副容器慢它的副容器整个宽度的85%。因为我没有学fruit。就导致我这个Y的指的是剩下的85%的85%。那就不对了。所以我们把弗floatte把它补上去,弗能够解决我们左边空隙的问题。这边有空隙,你看到没有。也能解决这个参照物的问题。好,现在我们已经把它加进去了,我们再来试一下。他是不是就补全了呀。就是这样的。那我们很多时候,我们早期的这个网页布局不就是这样的吗。
21:03
上面部分左边部分对吧,右边显示主要内容,还有下面一个版权声明。那这个页面啊,你显示这么宽,有点丑,我们可以在外面再包裹一层div。再包一个点位。这个divv我们就称之为DV container。我让这个DRV来。就写下面算了啊,写到这。我让这个DV。我让它的宽度。宽度,比如说占80%。高度百分百。然后呢,我让他的border e PX solid。一个边框,这样我好知道到底它的范围是哪里,到哪里能听懂我意思吗?运行一下。你看是不是蓝色的边框。对吧,然后它的宽度是80%。
22:00
我想把它整体的挪到中间去。怎么挪?怎么把它挪到中间去,这个D。Mark left。你的marin,你的这个宽度是80%吗?那差不多是10%嘛,稍微可能因为这个一像素问题引起一些误差嘛,反正这个框框一会我会把它改成零像素嘛。是不是?运行一下,这样是不是就居中了。但是感觉你感觉好像不是那么回事,左边这个好像。小一点,右边那个大一点。因为什么呢?因为你这个marketing left的计算,我说了,容器计算的参照物不一样。我们最好把这个也设置成向左浮动。能听懂吗?向左浮动之后,再参照物10%参照物就不一样了,它指的就是它的负容器文档流的10%,运行一下,你看这样应该是不是就对了。
23:00
两面是差不多的。咱们把背景颜色再把它改掉。背景颜色我们改一个深深一点的颜色。我也不知道这是啥颜色,随便吧。要把这个改成黑色啊。Body。Background。飞颜色把它放进去,就这样的再运行一下,哎,就变成这个效果了。是吧,本来就这样的。当然。当然我们也可以在这个浏览器里面,我们也可以把它看一下。它也是正常的是吧,也是正常的啊,但是我说了这是HTML4的这个标准,如果是HTML5的标准就不一样了。啊,当然大家不用去研究研究这么这么这么多啊,不要去搞这么复杂,我只是给大家说一下这个现象。也是正常的。呃,这个应该是写叫doc type。然后呢,我们写个叫HTML啊,我记得是这么写的好。
24:01
再原形一下。看到了吧,这就是遵循的是HTM5的标准,你看高度是不是都失效了。高度都没有效果了。但是它的布局是对的啊,你不要以为它的布局是错的,当前的布局是对的,因为里面的内容比较少嘛。所以它就显示这么高吗?那如果把里面内容把它改多一点。根据。好,我改的比较多了,那你再来看一下,是不是就变得高度比较高了。那你left是不是也是一样的呀?啊,它是根据你根据你里面的内容,根据内部的内容来决定它的这个高度的。这也算是合理的,其实也是合理的。啊,OK。好了,那我把这边全部去掉啊。好,我们重点重点不在这儿啊。把它删掉。重点不在这个版本的问题啊,重点是大家要要理解我们常规的说的这些属性。好了。
我来说两句