特性展示
在此前的课程中,我们还有一些遗留问题没有解决,例如:
通过上述问题,我们可以推断出,html元素是有不同类别的。
我们来写一个实例,代码如下所示:
1 <div>
2 <h1>我是一个标题</h1>
3 <h1>我是一个标题</h1>
4 </div>
5 <div>
6 <img src="images/logo.png" alt="">
7 <img src="images/logo.png" alt="">
8 </div>
9 <div>
10 <a href="#">链接</a>
11 <a href="#">链接</a>
12 </div>
再通过css,分别对h1,img,a 三个标签设置如下属性:
可以得出以下结论:
从这个示例中,可以推断出,h1,img,a标签属于三中类型。
分类总结
html元素可以分为三大类:块元素、行内元素、行内块元素,特性如下所述:
元素归类
在我们常用的标签中,按元素的分类,如下所示。
元素类型转换
通过display属性,可以将元素的类型转换成其他类型,例如如下的css样式;
1 a{
2 display:block;
3 /* display:none;隐藏元素 */
4 }
就可以将a标签转换成块元素,然后就可以对其指定宽度和高度了,这样我们就可以实现一个有宽度和高度的链接元素了。
chrome调试工具
在chrome浏览器中按f12键可以查看网页详情,包括html、css相关的信息,可以用来配合网页代码的调试和查看。
了解了元素的分类之后,我们再来看下一个问题,我们之前讲解的盒子模型,都是用div作为容器来存放网页的内容,而div是块元素,那么如何让两个div在同一行显示呢,可以使用float属性来实现。示例代码如下所示:
float属性
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .box1{
8 width:200px;
9 height:200px;
10 background-color: #f00;
11 float:left;
12 }
13 .box2{
14 width:200px;
15 height:200px;
16 background-color: #0f0;
17 float:left;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="box1"></div>
23 <div class="box2"></div>
24 </body>
25 </html>
float属性可以让块元素与其他元素在同一行显示,我们将两个div元素都设置float:left属性,这样两个div就可以在同一行显示了。
通过float属性也可以将一个行内元素或者款元素设置为右对齐,例如融职教育首页的查看更多按钮,示例代码如下所示:
1 <h2>教学文档 <a class="more" href="">查看更多</a></h2>
1 h2{
2 border:1px solid #00f;
3 width:500px;
4 height:36px;
5 }
6 .more{
7 color:#aaaaaa;
8 font-size: 12px;
9 float: right;
10 /* 设置浮动的a标签可以设置上边距 */
11 margin-top:10px;
12 }
浮动元素的特性
浮动元素有一个特性,这也是困扰很多初学者的特性,那就是浮动元素会脱离文档流,我们来看下面这个例子:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .box1{
8 width:200px;
9 height:200px;
10 background-color: #f00;
11 float:left;
12 }
13 .box2{
14 width:200px;
15 height:200px;
16 background-color: #0f0;
17 float:left;
18 }
19 </style>
20 </head>
21 <body>
22 <div>
23 <div class="box"></div>
24 <div class="box"></div>
25 </div>
26 <h3>浮动元素下面的元素</h3>
27 </body>
28 </html>
可以看到h2元素的边框与菜单重叠,并且h2的文本内容并没有在菜单下方显示,而是在菜单的右侧显示。这是因为浮动元素会脱离整个html文档流,导致其自身不占位,所有h2标签会与整个菜单重叠显示,为了解决这个问题,我们需要掌握清除浮动的方法,本章我们讲解两种方法:空div清除浮动和伪元素清除浮动。
空div清除浮动
我们在菜单和h2之间添加一个空的div标签,并且为其制定样式。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .clear{
8 clear:both;
9 }
10 .box1{
11 width:200px;
12 height:200px;
13 background-color: #f00;
14 float:left;
15 }
16 .box2{
17 width:200px;
18 height:200px;
19 background-color: #0f0;
20 float:left;
21 }
22 </style>
23 </head>
24 <body>
25 <div>
26 <div class="box"></div>
27 <div class="box"></div>
28 <div class="clear"></div>
29 </div>
30 <h3>浮动元素下面的元素</h3>
31 </body>
32 </html>
通过为空div指定clear:both属性,可以清除其上方菜单浮动导致的页面不良营销,使浮动元素后面的内容可以按正常的文档流布局,这样我们就可以看到h2标签成功第在菜单的下方显示了。
伪元素清除浮动
在上面的案例中,我们使用了一个空的div来清除浮动,很方便地解决了清除浮动的问题,但是html标签毕竟是为了布局而存在的,我们随意添加一个标签来处理样式,从html存在的意义来考虑,这个解决方案并不是特别理想,所以我们接下来的这个方案可以完全在css的层面解决清除浮动的问题,代码如下所示。
1 <div class="nav clear">
2 <div class="box1"></div>
3 <div class="box2"></div>
4 </div>
5 <h2>浮动元素之下的元素</h2>
1 .clear::before,.clear::after{
2 content:"";
3 display: block; /*将伪元素增加的内容设置成块元素*/
4 clear:both;
5 }
通过伪元素清除浮动的方式,我们不需要增加任何新的标签,只需要在浮动元素父级容器设置上述属性即可,这样网页的任何位置需要清除浮动,只需要给元素添加一个class名,既方便有实用。不管是日后的练习还是工作,都建议大家用伪元素来清除浮动。