文档流:页面布局和显示的方式
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。
position:static relative absolute fixed
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
绝对定位使元素的位置与文档流无关,因此不占据空间。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。需要在这个元素中的某个地方应用 clear.
example:
<div class="news">
<img />
<p></p>
<div class="clear"></div> //清除浮动
</div>
分享到:
相关推荐
CSS面试须知盒子模型、浮动及定位.docx
css的核心内容:标准流、盒子模型、浮动、定位(可以说不理解这些概念绝做不出合适的网页)
深入CSS盒子模型 深入理解盒子模型(上) 深入理解盒子模型(下) 浮动与定位(上) 浮动与定位(下) 文字与图像(上) 文字与图像(下) CSS导航设计 链接与导航 竖直菜单(上) 竖直菜单(下) 水平菜单 下拉菜单...
2、css(块级元素、行内元素、标准流盒子模型、浮动定位); 3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom编程详解...
第3章 深入理解盒子模型 3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 ...
2、css(块级元素、行内元素、标准流盒子模型、浮动定位); 3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom
《CSS设计彻底研究》详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然...
第3章 深入理解盒子模型 3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 3.3 内边距...
第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子、媒介查询和响应式设计等多个方面;第2部分介绍Bootstrap、Foundation、Pure等...
第2章 CSS基础知识,讲解CSS的盒子模型,CSS的浮动与定位,利用CSS布局网页等等。
深入CSS盒子模型 第3课 深入理解盒子模型(上) 第3课 深入理解盒子模型(下) 第4课 浮动与定位(上) 第4课 浮动与定位(下) 第5课 文字与图像(上) 第5课 文字与图像(下) CSS导航设计 第6课 链接与导航 第7课...
《CSS设计彻底研究》配套源文件 盒子模型 定位与浮动
本书详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然地得出结论,使...
第3章:深入讲解CSS的核心机制——盒子模型。 第4章:讲解CSS布局的重点和难点——浮动和定位。 第5章:介绍文字和图像的排版。 第6章:介绍了链接和导航相关的设置方法。 第7章:制作比较简单的竖直排列的导航菜单...
外边距合并7.margin-top 塌陷二、CSS 元素溢出overflow 属性介绍:三、块元素、内联元素、内联块元素课堂练习四、浮动文档流浮动特性清除浮动五、定位关于定位定位元素特性定位元素层级CSS实现垂直居中的问题六、...
第3课 深入理解盒子模型(上) 第3课 深入理解盒子模型(下) 第4课 浮动与定位(上) 第4课 浮动与定位(下) 第5课 文字与图像(上) 第5课 文字与图像(下) 第6课 链接与导航 第7课 竖直菜单(上) 第7课 竖直...
html基础 html列表与菜单的制作 html表格属性及布局 框架与表单 css核心基础 盒子模型 浮动与定位 文字与图像、圆角的制作 导航与菜单 综合应用修饰表单
全部章节 >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流概述 ...盒子模型(Box Model)是从 CSS 诞生之时便产生的一个概念,每一个