龙空技术网

「融职培训」Web前端学习 第2章 网页重构7 浮动布局

学习猿地知识服务旗舰店 85

前言:

此刻各位老铁们对“html按钮浮动”大概比较珍视,大家都需要剖析一些“html按钮浮动”的相关文章。那么小编也在网摘上汇集了一些有关“html按钮浮动””的相关资讯,希望你们能喜欢,小伙伴们快快来了解一下吧!

一、元素分类

特性展示

在此前的课程中,我们还有一些遗留问题没有解决,例如:

有些元素不管宽度多少,都是独立占一行显示,有些元素则可以共同占用一行显示;有些元素可以设置宽度和高度,有些元素不能设置宽度和高度;有限元素可以设置上下的外边距,有些元素则不能设置;

通过上述问题,我们可以推断出,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标签不可以设置宽高,不可以设置上下外边距,不独立成行;

从这个示例中,可以推断出,h1,img,a标签属于三种类型。

分类总结

html元素可以分为三大类:块元素、行内元素、行内块元素,特性如下所述:

块元素:可以设置宽高,可以设置所有外边距,独立成行。行内块元素(内联块元素):可以设置宽高,可以设置外边距,不独立成行。行内元素(内联元素):不可以设置宽高,不可以设置上下外边距,不独立成行。元素归类

在我们常用的标签中,按元素的分类,如下所示。

块元素:h、div、ul、li、p、form;行内块元素(内联块元素):img、input;行内元素(内联元素):a、span;元素类型转换

通过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名,既方便又实用。不管是日后的练习还是工作,都建议大家用伪元素来清除浮动。

四、课后练习用列表元素实现一个横向的导航栏。实现一个圣杯布局效果。实现融职教育首页文档列表效果,列表包括图片,标题,还有按钮。

【融职教育】在工作中学习,在学习中工作

标签: #html按钮浮动