如何让两个div上下排列(三个div上中下布局)

首先表示很悲伤,120个同学,最后交作业的只有9个人,我不知道是我的原因,还是你们的原因?我给了足足5天让布局一个T00LS的首页,到现在才9个。

经过一周,同学们的做作业,改作业,以及群内的讨论,发现很多学员依然不动DIV布局,甚至不了解什么是DIV CSS,那接下来,我结合群内很多人的疑问,给大家详细的再一次讲解下DIV CSS。

一、什么的DIV?

div你可以理解为HTML(网页)上的一个盒子,一个网页就是由很多这样的DIV(盒子),做出来的,比如:

如何让两个div上下排列(三个div上中下布局)

这样你就已经在HTM上放了一个盒子,然后我们通过CSS去调整这个盒子的位置、颜色、和大小,结合CSS用DIV就叫DIV CSS,然后通过css对盒子进行摆放和大小颜色等的设置就叫DIV布局。

二、怎么用CSS来控制DIV?

首先我们在HTML(网页)上放一个盒子,然后给div起一个名字,比如用class(如果起多个相同的名字,多次使用建议用class),或者ID(如果是唯一的名字,建议使用ID)

(这里是起了一个名字为top的div,用的是class起的名字)

然后使用css来控制这个名字为top的div

作为一个盒子(div),必须要有宽和高,然后为了方便调整设置一个颜色

如果想让这个盒子的宽占满全屏,就把宽设置为百分之百

这样宽度就占满了整个全屏

三、盒子和盒子之间怎么并排显示?

比如我想让左边一个盒子右边一个盒子,如果我设置2个DIV

他们是不会并排显示的,因为div是块级标签,特点是独占一行自带回车

那如何让他们并排显示呢?这里我们只需要把div(盒子)设置为浮动(飘起来)就可以了,用float:来操作

比如我想让这个红颜色的盒子往左飘起来

为什么只看见红色盒子,黄色的为什么不见了?是因为红色的飘起来了然后盖住了黄色的盒子,也就是说飘起来的盒子在没有飘起来的盒子上面,那如何让红色和黄色的盒子并排显示呢?那我们让黄色的盒子也飘起来试试!

2个盒子都往左飘,是不是就并排了?当然也可以设置往右飘

盒子之间应该有距离(外边距),我们叫margin,我们给红色的盒子设置一个外边距,也就是说让黄色盒子离红色盒子10px的距离

这里如果写margin:10px ;他会规定你红色这个盒子上、左、下、右的外边距都为10px

如果写margin:10px 20px;他会规定你上、下为10px,左、右为20px,如果写3个值或者4个值他们的顺序分别为上、左、下、右,那这里我们只设置红色盒子离黄色盒子的距离,也就是红色盒子右边的距离

如果盒子里面有内容

那如何设置盒子里内容(不止是文字,有可能是另一个盒子,有可能是图片等待)和盒子边框之间的距离,我们叫内边距用padding:表示

为什么设置padding后,红色盒子会变大呢?这里是一个算数问题

红色盒子设置的长宽为200px,然后内边距为10px(上、左、下、右都为10px),也就是说现在红色盒子的长宽为200px 10px 10px=220px,如果我把红色盒子的长宽各自改为180px,那180 10 10=200px,就和黄色盒子一样大了吗?

答案是正确的

盒子本身也应该有一个边框,我们用border:表示,那为什么我们上面的2个盒子没有看见设置边框呢?因为如果你不设置边框为0px,我们是因为给盒子设置有颜色所以没有边框,假如,我把黄色盒子的颜色去掉,我们看看

是不是看不见黄色的盒子了?那如果我们给黄色的盒子设置一个边框,大家切记,设置边框三要素:宽度 形状 颜色,形状具体怎么设置查看CSS手册

为什么黄色的盒子比红色的盒子大呢?还记得我吗给大家算哪个padding的值得时候吗?因为这时候黄色的盒子比红色的多一个边框值2px,也就是说现在黄色的边框为200 2 2=204px,如果想让他们一样大,那我们把黄色的长宽设置为196px即可

如果3个盒子,还有一个绿色的盒子,3个盒子并排显示,长宽设置为多少3个盒子才一样大呢?这个问题留给大家去思考和测试

如果这时候我不想让绿色的盒子和其他2个盒子并排显示呢?也就是说在黄色盒子后面我需要一个回车,那如何来做,我们用清除浮动来表示,clear:(这个值最好设置到最后一个盒子也就是绿色的盒子上)

在绿色盒子中设置,说不允许绿色盒子的左边有浮动,那绿色盒子左边应该是黄色盒子,那绿色盒子左边不应该有浮动,是不是绿色盒子就掉到第二行了?

四、盒子之间是如何嵌套的?

我们会看到很多网站布局中,左边好几个盒子,右边好几个盒子,这时候我们先看大局,一个网站分为上中下3个,我们就应该看为上中下3个盒子,然后中间这个盒子又分为左右2个盒子,然后左右2个盒子里又分为好多个盒子,这就是盒子里面有盒子,我们叫做盒子的嵌套

一个大盒子里面包含左右2个盒子

然后我想把左右这2个盒子设置为浏览器居中,既然左右这2个盒子在名字为center这个盒子里面,那是不是说明我动这个大盒子,左右这2个盒子也会动?

我们把这个现象称为,父子关系,也就是说名字为center的盒子是左右这2个盒子的父亲,父亲移动,儿子也会跟着动,那我们设置父亲居中也就是说上下边距为0,左右边距居中

auto为自动的意思,也就是说左右的边距自动一样

然后这个红色的盒子里有4个盒子,黄色盒子里有2个盒子

然后分别给他们的盒子设置大小,红色盒子的总大小是长宽各500,如果这4个盒子的宽为500,那高就要平均这500px,各为125px

为什么红色的盒子变成了蓝色的盒子?因为儿子的颜色为蓝色啊,占满了整个父亲的宽高,然后我们给儿子直接设置个距离也就是margin-bottom(下边距)

是不是发现了什么问题?是不是蓝色的快溢出了?因为这时候儿子的宽高各自为125,4个儿子总共的高就是500,外加3个margin的值是10px,3个就是30px,这时候总共的高需要530px,那我们如何来平均合理的利用这500个px呢,首先我们需要30px的margin,然后500-30=470px,然后4个儿子分别平均这470px,分别为470/4=117.5px

然后右边有2个儿子,需要一个margin10px也就是500-10=490/2=245px,它的儿子高分别为245px

然后我们可以在盒子里面写内容

五、body的边框

比如我这个大的盒子设置了颜色,我们看下有什么不妥

我这里margin的上边距为0,为什么盒子离浏览器边框还有距离呢?

因为body本身就有margin值和padding值,我们这里只需要把body本身的值设置为0即可

好了DIV CSS的所有讲解,都讲完了,还有作业不会的智商真的需要充值了

注:以上所以的演示不考虑IE浏览器,如LE浏览器肯定和非IE显示的效果不一样,那是浏览器的一个兼容性问题,需要大家自行查阅资料然后去调试整个页面的布局

发表评论

登录后才能评论