乐趣区

关于前端:零基础教你学前端81布局之浮动基础

这节课,咱们学习一个新的网页布局办法——浮动。
假如这是页面上的三个布局容器,别离具备本人的宽度、高度和色彩。很分明的看到,这三个容器是从上向下顺次纵向排列的,合乎页面容器一般文档流的排列规定。

如果想要让它们这样的横向排列,该如何实现呢?

你很快想到:能够利用款式的元素类型常识,通过转换元素的类型,实现这样的横向显示成果。

首先,将这些容器设置为行内元素类型,你会发现,三个容器能够横向排列了,可是容器的宽度和高度变小了,仿佛只有文本的大小。显然,行内元素类型是不能实现成果的。

回归到原始成果。这时,你又想到了行内块元素类型,它应该能解决问题了。于是将容器设置为行内块元素,你会发现:尽管容器的宽度和高度保留了,然而元素与元素之间有间隙,这个间隙是不可避免的。所以行内块元素类型,也不能实现想要的成果。

这个问题到底该如何解决呢?这就要请出明天的主嘉宾——浮动。

再次回归到原始成果,先来看一下容器浮动当前的特点:

给一号容器增加浮动,你会发现二号容器进行了补位。这是为什么呢?起因是容器浮动当前会脱离规范文档流,相当于飘起来了。

在二维立体看,不是很直观。我来给你转换一个角度,从电脑屏幕的一侧去观看平面的成果 默认纵向排列的三个容器。如果给一号增加浮动,它会脱离文档流,并且不占据原来的地位,二号容器随之下来补地位。

浮动布局的特点理解了当前。就能够用款式实现它了,浮动款式的属性名为 float,它的值别离有 left:左侧浮动。right:右侧浮动。none:不浮动。

拿左右浮动为例演示细节,给一号容器增加 float 款式属性。将它的值设置为 left,很分明的看到一号容器不占据页面空间了,前面的容器下来补位。将它的值设置为 right,一号容器跑到右侧,前面的元素占据了它的地位。

如果不给一号容器增加浮动,只给二号容器增加浮动会有什么样的成果呢?当只给二号容器增加左侧浮动的时候。你会发现只有三号容器向上补位了,给二号容器增加右浮动,此时它跑到了右侧,三号容器向上补位。

不难发现,浮动只能让容器在以后所在行左侧或右侧排列。

持续看成果,当给一号容器增加左浮动,同时给二号容器也增加左浮动之后,你会看到两个容器都脱离了文档流,在一行中显示了,并且容器之间没有间隙,持续给三号容器也增加左浮动,三个容器就能够实现完满的横向排列了。

这时能够得出结论:实现多个容器横向排列,只须要给所有的容器增加浮动款式即可,接下来我带你看一个实在利用浮动布局的网站案例。

千锋教育官网首页中的导航条,就是由若干个容器横向排列的布局。通过观察发现,这个导航条由无序列表组成,也就是让若干个 li 元素横向排列,并且每一个 li 元素都有本人的尺寸和色彩。

我当时筹备好了一个根底构造,设置好 li 元素的一些款式后,在浏览器观看成果,会看到它们默认是纵向排列的。

当初,实现让这些 li 容器横向排列,只须要给这个 li 选择器增加 float:left,左浮动款式就能够了,这个款式会作用于全副 li 容器。

再来到看一下成果,横向排列的成果实现了!

CSS 浮动的基础知识咱们就讲完了。最初给你留一个思考题,子元素设置浮动当前 父元素是否须要设置高度呢?

本篇文章相干的教程链接:https://www.bilibili.com/vide…

退出移动版