CSS中的浮动

极海网络  发布于:2014-11-24  浏览:

摘要:在开始理解浮动式布局之前,需要理解文档流的概念。文档流是文档中显示对象时的排列位置,它用来决定HTML中网页元素的呈现方式。比如在创建一个div元素时,div会占据HTML文档中的整行,而添加多个div元素时,div会以从上到下的顺序依次占据整行。也就是说这些对象是由HTML页面根据使用的文档流布局方式来进行排列的。 文档流使得HTML中的元素出现在它应该出现的位置,实际
 
        在开始理解浮动式布局之前,需要理解文档流的概念。文档流是文档中显示对象时的排列位置,它用来决定HTML中网页元素的呈现方式。比如在创建一个div元素时,div会占据HTML文档中的整行,而添加多个div元素时,div会以从上到下的顺序依次占据整行。也就是说这些对象是由HTML页面根据使用的文档流布局方式来进行排列的。
        文档流使得HTML中的元素出现在它应该出现的位置,实际上这涉及HTML对元素的定位问题。CSS提供了对页面元素的如下3种定位方式。
        普通流:页面按照定义的顺序从左到右、从上到下一个接一个地显示,这是默认的显示方式。
        浮动:浮动使得页面元素脱离文档流的控制,按照指定的方式进行流动,不占用整个文档流的空间
        绝对定位:使用绝对坐标的方式脱离文档流,不占用文档流的空间。
        在使用表格式布局时,通过表格中的行和单元格可以方便地控制页面上元素的具体呈现位置,但是如果使用默认的文档流进行布局,这种文档流会将所有的HTML元素以如下两种方式显示。
        块级元素:这类元素会自动占据l整行,比如div、hl-h6、p等元素。
        内联元素:这类元素可以显示在其他的元素内部,比如可以显示在段落内部,因此称为内联元素。
        块级元素从上到下一个接一个地排列,元素之间的垂直距离是由元素的垂直外边距计算出来的。内联元素在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
        注意:可以通过CSS属性display来改变元素的显示类型,比如将内联元素的display更改为block,可以使得内联元素变成块级元素,或者使用none,让元素不显示在页面上。
        而CSS浮动式布局就是改变这种默认文档流的定位方式,它脱离了文档流的默认排版,让HTML页面中的元素按照要求的方式进行排列以便达到网页设计的效果。CSS的float属性用来控制元素的浮动方式,它具有如表7.1所示的4个可选的属性值。
        浮动可以使得HTML页面元素脱离默认文档流的显示,通过float可以控制元素向左或向右移动,直到它的外边缘碰到该元素的包含元素或另一个浮动元素的边框为止。
 

文章链接:http://www.jihai.com/a/jiaocheng/wybj/201411/742.html
标签:浮动(4)式(1)理解(10)CSS(23)在(109)开始(5)布局(27)中的(17)
作者:极海网络 来源:未知 发布于2014-11-24 15:12
您可能喜欢的文章

热门模板
热门阅读
热门插件