第五节 HTML&CSS -- 关于浮动和清除浮动的解说,以及两个大坑不要踩

1.随便唠叨几句

 1489461079059085027.jpg

这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解,同时,我会列举一些咱们前端开发中常见的坑,但愿你们之后不要在这些地方犯错。在开始今天的课程以前,有一个东西我须要先讲一下,学网页,我认为最最重要的就是学布局,若是一个网页,你不去布局,学再多的div加css也无济于事,你就算学了再多的特效,又能怎么样?那么,何为布局呢?很简单,就是一句话,把元素放在你想要放的地方,这个就是布局了。对于一些后台管理系统,其实最最多见的仍是table布局,包括如今很流行的前端框架 - easyui,你去看他的源码,确定也是table布局嘛。为何会致使这样的状况发生呢,缘由很简单,由于后台管理系统主要是给工做人员去作系统维护的,好比一个新闻发布网站,工做人员要发布一条新闻,那么就得登陆后台管理系统,进入一个什么新闻管理的菜单,这些操做注重的是简单,易用,不须要有多么华丽的效果。因此,table布局仍是有必要意义的。那么,咱们在学习的过程当中,是否是必定要把table布局弄得很是精通呢?这倒也没必要,咱们之后开发项目的时候,基本上仍是要运用一些前端框架的,咱们更多的,应该是去学会如何使用一个框架,而不是本身去造轮子。固然,等你之后成为技术大牛,造一点轮子也无妨。可是如今,不必。css

OK,废话很少说,开始吧,我已经用table画了一个简单的布局,你不必去深究这些代码的含义,固然能看懂最好,看不懂也无伤大雅。反正之后咱们不太可能本身去布局,都是用框架,嗯,就是这么回事。不过呢,若是要定制一些东西,那么仍是须要div加css技术出马。html

1489388941371015939.png

页面:前端

1489388961621049098.png

今天讲的东西,就在这个页面中实践。程序员

 

2.没法想象,行内元素居然这么任性,给了宽度和高度也不认账!

 

额,是这样的哈,对于初学前端技术的萌新,每每都会在这一个地方吃亏,那就是给行内元素加了宽度和高度,怎么就没用呢?好比,我在A区域添加一个span元素。浏览器

1489389142840092428.png

1489389220949062670.png

而后,给它加一点样式:前端框架

1489389300371031386.png

再复习一遍,这个span元素的id是否是叫haha啊,那么我在给他设置样式表的时候,是否是要在前面要加一个#号呀?诶,就是这样的,若是这个span元素绑定了一个class属性,叫作xixi,那么前面加的就是一个点,应该是 “.xixi” ,不要混淆了。让咱们来看一下效果:框架

1489389467543065659.png

我靠,郁闷的事情果真发生了,为何加宽度和高度没有效果呀?呵呵,我相信不少人在这里吃过亏,无论怎么调就是没效果。原来,span是一个行内元素,而只有块级元素和行内块级元素才可以有本身的宽高,因此,咱们给行内元素添加宽度和高度是没有效果的。解决方法有不少,最简单的,就是给这个span元素添加一个“display:block”或者“display:inline-block”的样式,就能够解决这个问题了。工具

1489389768496091037.png

效果:布局

1489389799684095860.png

接下来一个问题,咱们已经给这个行内元素升级为行内块级元素了,如何让里面的字相对于这个span居中定位呢?首先,咱们能够给它加一个text-align:center学习

1489389893918098103.png

而后,给它设置一个行高,和这个元素自己的高度相等

1489390006996032776.png

1489390016027011462.png

这样是否是就行了呀?嗯,这是今天第一个知识点。

 

3.震惊!P元素和div元素居然这样,据说还有程序员不知道!

 

p元素是一个块级元素,所谓块级元素,就是那种会独自占满一行的元素,还有div也是块级元素。先来个例子吧。我如今要在B区域加一个P元素:

1489390195809087762.png

1489394846355043371.png

1489390301434051201.png

而后,我在这个p元素上挂载一个div元素:

1489394868012040418.png

1489390389277001679.png

1489390426168085506.png

看起来彷佛没什么,让咱们打开F12看看:

1489394897277012185.png

发现问题了吗,各位?原本是一个p元素,当我在它里面放一个div元素的时候,一个p元素居然被分红了两个,同窗们,这样是否是很危险啊?因此,咱们必定要警戒这种写法,p元素被设计出来的本意,就是用来存放文本内容的,不可以用来布局,否则的话,可能会产生不少意想不到的BUG。布局,咱们通常就用table,或者div、span,加上css就能够了。p元素就是用来存放文字的,明白了吗?

 

4.惊!多个div元素为了并排显示,连这种事都干得出!

 

接下来,咱们来讲一个很是很是重要的知识点,那就是浮动布局。那么,到底什么是浮动呢,仍是以案例为主吧。我在B区域画三个div盒子,给他们都绑定同一个class,叫作box。

1489391445949001485.png

1489391496105026257.png

1489391487793013193.png

能够看到,div元素是块级元素,再复习一下啊,块级元素有什么特色啊,是否是会独自占满一行呀?因此,这三个div元素就无法在同一行显示了。那么,有没有什么办法,让多个块级元素在同一行显示呢?固然是有的,咱们能够采用浮动布局,也就是说,让这些div元素“飘起来”,注意哦,飘起来之后,有两个方向,一个是向左漂浮,另外一个则是向右漂浮。是的,只有这两种状态,没有第三种了。明白了吗,只有两种,要么往左边浮动,要么往右边浮动。

咱们来尝试一下,让全部class为box的元素都往左边飘。

1489391733387085542.png

1489391754949081918.png

哇,是否是飘起来了。没错,这个就叫作浮动布局。我如今问一下你们,你以为,浮动布局的目的是什么?没错,就是为了让块级元素在同一行上显示,仅此而已。没有其余更玄妙的说法了,不论多么复杂的网页,若是用到了浮动布局,确定就是这么回事,确定是为了让某些div元素在一行上面显示。在这个例子中,咱们若是让第三个盒子往右浮动,就给它单独加一个行内样式:

1489391907590027630.png

1489391891293065176.png

如今,我还有个很是很是重要的知识点要交给你们,究竟是什么呢?咱们直接来个案例好很差?

我把这几个盒子换成span元素:

1489392058277021067.png

而后把浮动去掉:

1489392088965048192.png

页面就是这样的:

1489392103105078631.png

为何呀,刚才咱们是否是已经说了呀,当咱们给一个行内元素设置宽度和高度,是否是没有用的呀?若是咱们要让它生效,是否是要加一个“display:inline-block”或者“display:block”,就行了呀。那么,在这个例子中,我直接加上一个浮动定位:

1489392267090062695.png

刷新页面:

1489392288184095859.png

哇,天哪,怎么会这样?哦,原来,一旦咱们给元素加了浮动定位,哪怕它是行内元素,也会默认转换成行内块级元素了。这也是一个比较重要的知识点,你们必定要记住。

 

5.惊!div元素因真爱成功私奔,还让空元素背锅,没WIFI也要看!

 

最后呢,咱们要讲的,就是关于清除浮动的问题了,先来看下问题的由来。刚才,咱们弄了三个div元素,都设置了float:left,因而,他们就脱离了本来的轨道,术语叫作脱离标准流。其实就是把本身的位置给腾出来了,来个例子吧。

首先,为了方便起见,咱们把float:left,float:right这两个样式也封装一下,做为一个通用的工具样式,先把上一节课的tool.css拷贝过来:

1489392979574034011.png

而后,加上浮动的样式:

1489393038996068233.png

而后,在这个html文件中,引入tool.css:

1489393077777071613.png

这样的好处就是,咱们没必要单独写浮动的样式表了,在box中,把浮动样式删掉:

1489393136918041294.png

而后,在须要加浮动的地方,加上浮动的class:

1489393175637061100.png

1489393220434048122.png

诶,这样是否是也能够呢?好的,接下来,我在第三个盒子后面再加一个盒子:

1489393319949086898.png

注意哦,第四个盒子我没有加上左浮动,会有怎样的效果呢?看:

1489393380355073949.png

第四个盒子消失了,为何呢?刚才咱们说,当一个元素设置了浮动,那么就会飘起来,脱离标准流,也就是不占位置了。那么,在它后面的元素是否是就要紧跟上来啊?举一个现实生活中的例子,ABC三我的在排队买彩票,忽然,B想到还有一件事情要作,就走了,那么C是否是要往前走一步,占据B的位置呀?注意哦,这个队伍就相似于标准流,如今B脱离了标准流,C是否是要跟上来,明白了吗?那么,在咱们开发网页的时候,咱们确定不但愿这样的事情发生吧,还记得咱们当初采用浮动布局的目的是什么吗,是否是要让几个块级元素并排显示呀?如今虽然并排显示了,但是后面的元素自动顶上来,是否是布局就乱了呀?因此,咱们须要清楚浮动。到底什么叫作清楚浮动呢,其实很简单,一句话的事:

清除浮动就是给飞出去的元素填坑,好让后面的元素不顶过来。这就是清除浮动,没有什么更加玄妙的东西了,就这么简单。

如何清除浮动呢?有一个办法就是在浮动定位的最后一个元素后面,加上一个空元素,好比div元素,里面啥也不写,而后加上一个叫作clear:both的样式,那么,浮动就被清除了。

1489393868277007358.png

刷新浏览器:

1489394395090032959.png

诶,是否是就行了呀?但是,你是否以为,每次都这样去清除浮动的话,是否是会有不少个这样的空元素呀?这些空元素,仅仅是为了清除浮动而已,那么网页代码就显得有些乱。其实还有一种更好的方式,就是运用伪类,这是一个比较成熟的方式,也算是css中一种比较先进的技术,你就算看不懂也无所谓,只要会用就行。

1489394090355076914.png

我把这个样式也添加到了tool.css里面,而后,给须要清除浮动的那个元素添加上clearfix的class就OK了。好比,在这个例子中,咱们就须要给三个盒子外面套一层div,加上clearfix的class,就能够了。之后咱们都采用这种方式。

效果:

1489394395090032959.png

 

全文完。

源码下载地址:http://www.xiaotublog.com/getResourcePage.html?id=22 欢迎关注个人博客,长期更新各类JavaWeb相关的资料。

相关文章
相关标签/搜索