00:00
好,那么继续来上课,那么上节课呢,我们看完我们的这个定位属性的练习,接下来我们看一下我们的布局属性啊。那么布局属性呢,在这个阶段我们讲的还是比较简单的啊。我们来看在学习布局组织之前,我们先来回顾一下,我们之前给大家介绍过一个什么叫做div标签对吧?这个标签叫什么?叫做块状元素,所谓的块状元素它干嘛?什么特点具有宽高属性对吧?而且怎么样不会读啊不对,是会读在一行没错吧?还有一个呢,叫做SPA标签,它什么行内。元素对吧,没有宽高属性,没有宽高属性,它是根据内容的大小来决定什么,决定它的大小的对不对,那这里面它会怎么样,它是不会读在。一行没错吧,哎,那现在我们来演示一下啊,咱们来看在这里边。我来新建一个码文件啊,叫做什么呢?叫做零六啊布局属性,那在这里边我们写一个div,叫做我是。
01:03
块状元素,然后再来一个SPNSP叫做我是行内元素。好了,那么有了这两个元素以后,接下来咱们来看啊,我们先给它设置一下SQ style标签,给它一个div,它的WTH宽度等于100,然后高度也等于100,然后B加background,比如背景颜色,我们给他一个blue,然后再来一个SPA标签。With宽度100T也为100,然后B呢,给它一个加in绿色好了,那现在我们来看啊,刷新我们的页面。对,你看括状元素是不是独占一行,而且它有什么有宽高属性,而行的元素呢,它没有独占一行对不对,它也什么呀,没有宽高属性对不对?哎,那这是咱们块的跟行的元素,那么咱们说了这种元素,你看块转元素它很霸道对不对,它一下就给我读在了一行,就算宽度没有那么那么宽,它也是读在一行了,而行的元素呢,感觉很弱小,对吧,它怎么样,根据它内容大小决定它的大小,那这样的话就不利于我们的布局,没说吧,我们像页面布局,比如说。
02:08
你像这里边随便找一个,你比如说这这块内容也可以对吧,比如这块内容啊,这块内容,你看那这块内容啊效果什么样的,是不是它有具有的这个宽高属性。对吧,而且怎么样,是不是不会独占一行啊,对不对,那么我们能不能把这个东西提出来呢?比如说把快照函数的优点,什么优点,这个具有宽高属性对吧?这个优点提出来对吧?但它缺点呢,是太霸气了,知嘛,干嘛呀独占一行了,而行内元素呢,它的优点是什么?它不会独占一行,但是呢,它比较柔弱,对吧,它干嘛呀没有宽高属性,所以我能不能给他提出来呢?也可以啊,首先咱们来看啊,在提之前我先给他做一个互换,怎么互换啊。Div是不是跨张元素,哎,我可以通过display属性给它设置什么呢?设置为行内元素依赖对吧?然后呢,这个SPA呢,它本身是行内元素,我也可以通过类给它设置什么呢?设置为跨状元素,那你现在你看我现在是不是做到了行内跟块状进行一个互换的结果啊来刷新。
03:06
那你看绿色行的元素是不是有矿高属性啊,而矿热元素。原来矿长是没有矿高属性对不对,那至于独占一行,其实这个块热元素已经是独占一行了,因为它没有上来对不对,你看我在这个这个元素啊。后面加一个A,你看这个A是不是跟他在一行呢。看是这一行嘛,对不对,哎,也就证明什么,也就证明他没有读在一行嘛,哎,那接下来说了,能不能让他们两个都变成什么,变成这样的特点,那么也可以,我可以给成什么呢?给他改一下,改成什么呢?改成阴烂布block。Play等于什么呀,In line block,哎,就是什么呀,行内杠块状对吧?哎,既具有的行内的优点和块状的优点,那么同样这个也一样给咱什么in line。杠b block好了,那现在咱们来看。我两个元素在我这里边是不是就可以横向摆放了,对吧,那可以横向摆放,我是不是就能做到刚才那个效果了,比如说在这块啊,我们来个HR。
04:02
横线给他来一个华丽的分割线,咱们来看啊。分割了对吧,那接下来呢,在这里边比如说我就直接给div了啊,我们div里边比如说给他一个以标签,然后咱们当前目录,比如说以下边来个a.PPG啊,虽然我们还没有图片,一会再说啊,然后再来一个P标下,这里边叫做我是美容好了那。这个div,我们给了一个什么?给了一个class。Class class等于等于什么?等于one啊,那这里边有多个ctrl c ctrl v ctrl vtr v OK,有了四个对吧?但是这个图片我们还没有呢啊,这里边我们去新建一个目录,叫做image。面积,然后呢,我再去找一张图片取。来比就它了啊。放到这里面来。选成A。好成功,那你看在当前目录有有image image里有个A对吧,那这个是好使了,那接下来我来设置下这个样式,比如说。点Y啊,它的这个宽度为200像素啊,高度呢,我也给了200像素啊,然后BKGRD图上给了F7F7F7。
05:09
啊,好了,多一个F是吧,给他这么一个颜色,那现在啊,我们来看它默认效果不行,我得把图片给它设置一下啊,因为图片会超出oyy里边的image。让它的这个宽度变成什么呢?变成这个。跟负类是一样的宽度啊,那就是100%的呗,对吧,因为它被它包含了嘛,那现在我们来看啊,在这里边再来刷新。好了,是这样的对吧,那同样这个test不是taste的,是这里面的P标签,也就是点。Y里边的P标签我可以干嘛呢?K杠类等于一个让它进行居中。是居中显示了,哎,好了,那现在啊,注意。我这里面的div,由于在这块我设置了这么一个结果,对吧,我现在不给它设置了,把它注册掉啊,注册掉以后,现在咱们刷新这是候默认div的效果,这不都读占一行了,对不对,那现在一样,我能不能让他干嘛呢?并列排开啊,是不是也可以在这个one里边,我需要给它设置一个this play,等于什么inline block,那这个时候咱们来看我再来刷新是不是就可以了。
06:12
对不对,哎,这就是咱们的布局属性啊,布局属性,但是这个布局属性呢,现在已经很少用了啊,很少用了,一般都是干嘛呢,我们改变元素样式的时候才会用啊,如果直接用它布局我们不会用,为什么?因为一旦图片跟文字在一起的时候,它会涉及到一个图文混排啊,涉及到图文混排,那图文混排在任何软件中都有啊,很难去调,比如说在这里面咱们看,比如说我放个PPP了。然后。放到这里边。底面积这里边来把它改个名啊,改成什么呢?改成这个叫做b.GG好了,那现在我这里边有个b.GPG比如说我把当前的这个第三个啊改成b.GBG,咱看有没有什么样式的变化啊。刷新。嗯,还好没有是吧,哎,因为图片我都给它设置了一边的大小啊,如果不设置图片大小呢,比如说这里边。
07:05
宽高不设定了啊,就是随意的摆放来,你看这个时候你看。是不是这两个图片就给它夹到一起了,对不对,哎,这就是他的这么一个问题啊,这就它的一个问题,所以呢,这里边我们还给它还原回来啊,还是给他关注色略好啊,所以我们在布局的时候,一般不会用它去布局,而是用什么呢?而是用另外一个啊叫什么呢?叫做咱们的这个浮动属性布局啊好了,那一会就来说浮动,我们还继续看它,那这里边display我们还可以怎么设置呢?包括啊非play在我们后期,比如在我们第二个阶段,我们还会讲到什么,讲它的伸缩盒呀,对吧,讲它的这个价格系统啊,啊都是用非play的,那那些布局属性我们是常用的啊这几个呢,现在介绍那个大家知道啊,后期会不会用到,也会用到啊会去改一些元素,怎么改呢?比如说咱们来看啊,当前我这个Y,我再给他加一个,加个什么叫做to。叫做to啊,是不是我通过class可以改名啊,那在这里边我是不是就可以点to对吧?点to干嘛呢?我的是this play。
08:01
什么意思,当我设置完它以后,我可以隐藏元素,现在你来看我来刷新,诶你看我的PP是不是就被隐藏掉了,哎,那隐藏以后它会占据原有的物理位置嘛,是不是也不会,哎,这就是我们常用的,那好了,那隐藏的时候。比如说啊,什么时候隐藏,什么时候显示,我是不是经常会有这样的一个限制控制,对吧,比如说咱们来看啊,在这里面。来,咱们看一下我们的商品页面。那你看比如说这时候鼠标放下来,诶,你看下面内容是不是就显示了鼠标离开是不是隐藏了,对吧,这种效果我们是常用到的,常用到的啊,那么主要想做这样的显示和隐藏,那怎么办?是不是要比的一个hour属性,对不对,那也就是说。这里面比如说啊,我用他前一个。万来设置啊。好了,比如说这里边嗯,点。点Y冒号,How ho v号啊,当我鼠标移动到one的时候,我让它什么呢?我让它的这个下紧挨着啊,他的兄弟谁呀?点to变成什么呢?Face play this play,为什么为这个,比如说为block,哎,这是我们常用的,但是没block,他就读这一行了,对吧?那先不管它啊,现在咱们来看可不可以返回来,不是这个页面这里。
09:19
来那刷新刷新束了,当我鼠标移动到点万万.万这三个是不是都点万来移动上来移动上来,那你看隐没意思啊,显没显示,你看当我移上来让他,让他紧挨着他的兄弟谁呀,紧挨兄弟是不是个APP,是不是显示了,但它的显示什么,是不是独占一行呢?对不对,所以不行怎么办?我不能用什么不能用这个block,我应该用谁呀?我应该用这个阴杠block吧,哎,就是in-block,好了,那这个时候我们再来刷新,刷新完以后你看鼠标放,诶显去了哪种隐藏了,看到了吗?诶这样我们是常用的啊,所以我们要用到这样效果的时候,那就会经常配合什么配合。这样这么样一个属性啊,这是咱们display隐藏元素,而且他在隐藏的时候不会干嘛占据原有的物理位置啊,好了咱们来看一下。
10:03
这里边啊,这个display设置inline,将元素作为什么行列样式,Block呢,就是跨转元素inline block呢,设置一个元素,既可以设置宽高属性,也可以在这么同一行显示,对不对,然后另外如果是N呢,它是设置元素不显示,也就是隐藏元素啊隐藏元素那么还有一个什么呢?Visibility,它也是设置元素是否显示了那。是显示隐藏,咱们来看现在这里边啊。我不用它了。咱们注知道我用什么呢,用这个VI viibility等于什么呢?等于这个等于这个hidden嘛啊。Hi head,好了,我让他隐藏,那现在咱们来看啊,它的隐藏来刷新。它的隐藏什么样的,是不是占据原有的这个物理位置,对不对,那好,那我能不能用display显示呢?咱们来看啊,我的代码里边是不是当我鼠标移动到one,我要紧挨着它下面的兄弟to进行什么FA显示,对吧?那现在咱们来看可不可以显示啊,来刷新一下鼠标放好使吗?是是不行啊,哎,也就是说我用viibility做的隐藏,不能用display进行什么进行显示,所以我要把它干嘛注释掉,注释掉诶。
11:12
不知道,嗯。好了,注入到以后我要用什么方式,应该用with的方式。进行什么进行显示,微微S呗,显示对吧,那这个时候再来看刷新,刷新完以后鼠标放你看是不是显示了哪种是不是隐藏了,看到了吧,哎,这就是这两个隐藏和显示的这个属性啊好了,那我们来记一下啊,在这里边。那么我们使用这个谁呀?使用na隐藏的时候,是不是不会占据原有的物理位置?物理位置,而用它来隐藏的时候,是不是会占据原有的位物理位置会占据原有的物理位置吧,对不对?哎,那这里边我就直接写一个注意的吧,啊叫什么呢?叫做V类配和这个p play冒号ne的区别啊。
12:02
No的区别啊,什么区别呢?只要。使用visibility。隐藏方式是紧。隐藏什么呢?仅隐藏内容的显示,对吧,其。在用的空间啊,依旧在用对吧,依旧。占用而使用。Play。冒号noe的隐藏方式。则。是彻底隐藏。隐藏元素的内容和位置吧,哎,那OK,这就是使用visibility隐藏和display这两个属性啊好了,那这就是咱们布局相关的属性,我们需要了解的,那OK这节课我们就到这里,下节课我们来看我们的这个浮动。
13:04
啊,也是我们的布局啊,不对,这个这啊浮动属性啊,好了,那这课先到这里。
我来说两句