0

0

三.CSS布局的重要标签??div_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:28:16

|

1599人浏览过

|

来源于php中文网

原创

刚开始的时候已经讲过,对于理解CSS,大可从理解div标签开始。其实布局最核心的标签就是div,也是下一步我们接触最多的一个。
1、div的意义所在:
div是一个容器,在使用时以

形式存在。
在XHTML中,每一个标签都可以称作是容器,能够放置内容。但div是XHTML中专门用于布局设计的容器对象。
在传统的表格布局中,完全依赖于表格对象table,在页面中绘制多个单元格,在表格中放置内容,达到排版目的。
而以div对象为核心的页面布局中,只需要用DIV和css便可以实现布局,因此习惯上对css布局称为div+css布局。

2、div只是一个区域标识,如果实用了div,但没有应用div的css样式的话,就等于只看到div的内容,而没有任何样式改观。这一点与使用表格布局有一点不同,如在实现左右分栏的时候,表格可以看到分栏效果,但没有应用css的div 只作为一个区域标识,没有改观。看如下代码实现的效果对比:

程序代码


                       /*此table加载自身默认的样式*/
  
    
    
  
超级宝贝,步步为营,实战div+css系列教程 超级宝贝,步步为营,实战div+css系列教程

超级宝贝,步步为营,实战div+css系列教程
   /*此div未加任何样式*/
超级宝贝,步步为营,实战div+css系列教程



展示效果图:


table显示了左右分栏,且边框按其默认的边框粗为1的样式展现。
div没有应用css样式,两行也不会分栏显示,也看不出有任何效果。正如上文所言,div 只是一个区域标识,划定了一个区域,而样式的责任交给了css 来处理。

那么怎么才能显示出分列的效果呢?
细心的朋友会发现div容器内的内容没有变化,但在DW编辑器里看出div默认的是整行显示,另一个div则排在下方,而且每一个div都是100%宽度。用W3C官方的说法,div是一个块对象(block对象),在XHTML中,几乎所有的对象都是默认两种类型:
block 块对象:块对象指的是当前对象显示为一个块,默认为整行显示,下一对象在下一行显示。
in-line 行间对象(内联对象):此类型与前者相反,它允许下一对象在与它本身的一行中显示。

正是由于div的内容没有效果出现,实现样式需要借助于css,才实现了内容与样式的分离,这样的分离,使得div的最终效果是由css来编写的。css可以实现左右分栏,可以实现上下分栏,而表格则没有这么大的灵活性。css与div内容的无关性,决定了div在设计上有极大的伸缩性,而不拘泥于单元格固定的模式束缚。
因此,实现css的布局,首先在XHTML中将内容用div标记出来,然后再用css来编写样式。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号