零基础学习HTML之CSS篇元素显示模式文档流元素浮动和布局

元素显示模式

display : block | none | inline | inline-block

display 属性用来设置元素的显示方式。

block块对象指的是元素显示为一个方块，默认显示状态下，它将占

据整行，其它的元素只能在下一行显示。

inline行间对象与block刚好相反，它允许其它元素在同一行显示。

none隐藏对象

元素的浮动

float : none | left | right

float 属性用来控制元素是否浮动显示。

left向左浮动

right向右浮动

none不浮动

浮动的时候元素的显示属性也变化了 变为 "行内元素"

Css 布局

div 标签：

<div> </div>

div 与其它标签一样，也是一个XHTML所支持的标签。

div 是XHTML中指定的，专门用于布局设计的容器标签。

在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css.因此我们称这种布局方式为 div + css 布局。

<div id="header">页面头部</div>

<div id="content">

<div id="left"></div>

<div id="right"></div>

</div>

<div id="footer">页脚</div>

盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。

对我们来说，只需要理解元素在页面中所占据的位置。

ie6 / ie7 / firefox 的最终宽度 =左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽

文档流

文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，根

据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它

们在网页中的位置。

文档流是浏览器的默认显示规则。

深入浮动

浮动的目的

就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利

用float属性。

1.任何申明为 float 的元素自动被设置为一个"块级元素"。

2.在标准浏览器中 浮动元素脱离了文档流 ，所以浮动元素后的元素会占据浮动元素本来应该

所处的位置。

3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行 。

4.文字内容会围绕在浮动元素周围 。

5.浮动元素只能浮动至左侧或者右侧 。

清除浮动

clear : none | left | right | both

none :默认值。允许两边都可以有浮动对象

left :不允许左边有浮动对象

right: 不允许右边有浮动对象

both :不允许有浮动对象