css中div浮动层与div层有什么不同

发布时间:2022-03-01 17:42:33 作者:iii
来源:亿速云 阅读:261

今天小编给大家分享一下css中div浮动层与div层有什么不同的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

div浮动层与div层有何不同css中有什么关系

首先DIV浮动层与DIV层都是指DIV布局,一般使用CSS样式表加DIV标签组合进行布局网页。

div层一般包括div浮动层,div浮动层说明div被加入css浮动样式所以被称为div浮动层,而没有加入float浮动样式不具有浮动效果,所以如果没有被加浮动样式div不被称为浮动层。当然span、h2、ul、li等标签也是层,只不过span、h2、ul、li等标签没有div使用频率高,所以一般就将div作为象征性称呼。

接下来DIVCSS5通过实例告诉大家什么是一般层,什么是浮动层?为什么要使用div css浮动层。

1、完整DIV+CSS实例HTML代码如下

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div层与浮动层</title> <style> .亿速云{ width:400px; height:100px} .亿速云-a{ float:left; border:1px solid #F00; width:100px; height:80px} .亿速云-b{ float:right; border:1px solid #00F; width:100px; height:80px} </style> </head> <body> <div class="亿速云"> <div class="亿速云-a"></div> <div class="亿速云-b"></div> </div> </body> </html>

对象".亿速云"没有设置浮动,“.亿速云-a”设置靠左浮动(float:left),“.亿速云-b”设置靠右浮动(float:right)。

2、普通层与浮动层实例截图

css中div浮动层与div层有什么不同普通层与浮动层CSS案例截图

3、层与浮动层总结
在以上实例中“.亿速云”对象是普通层,而默认是不具有浮动效果的层,因为网页内容是居左的所以看到此层居左,实际是没有浮动样式的一个DIV盒子层。而对象内子级“.亿速云-a”和“.亿速云-b”是设置float浮动所以变成了浮动层,从上可以看出他俩在“.亿速云”盒子内一个靠左浮动一个靠右浮动。普通层与浮动层区别就是在于是否被设置了css float浮动样式。

4、为什么设置浮动样式
这个是因为想让DIV对象盒子实现靠左或靠右布局。

以上就是“css中div浮动层与div层有什么不同”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. 页面出div提示层
  2. JavaScript拖动层Div的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css div

上一篇:SCSS的扩展功能有哪些

下一篇:Css中的框模型怎么设置

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》