PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

原创
2016-06-24 12:28:16 1158浏览

刚开始的时候已经讲过,对于理解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来编写样式。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。