第4章-part1 CSS.ppt

流动布局的特征1 块元素在所处的包含元素内(父元素), 自上而下按顺序垂直分布， 因为在默认下，块元素的宽度为100%。 块元素都会以行的形式占据位置，不管所包含的内容有多少，也不管块元素的宽度设置多窄。例如，对于下图的流动布局，浏览器都会自上向下逐步解析并显示所有网页元素 : 流动布局的特征2 2) 内联元素在所处的包含元素内从左到右水平分布显示。 超出一行后，会自动换行。--文档流 相对定位流动 当元素定义为相对定位，即设置position:relative;属性时，它也会遵循流动模型布局规则，跟随HTML文档流自上而下流动。 流动模型例子 html xmlns=/1999/xhtml body form id=form1 runat=server div span流动/span span模型í/span input id=Button1 type=button value=button / input id=Reset1 type=reset value=reset / input id=Submit1 type=submit value=submit / input id=Text1 type=text / input id=File1 type=file / input id=Password1 type=password / input id=Checkbox1 type=checkbox / input id=Radio1 type=radio / input id=Hidden1 type=hidden / textarea id=TextArea1 cols=20 rows=2/textarea select id=Select1 optionaaa/option /select /div /form /body /html 屏幕不同 –运行结果也不同 流动模型优缺点 优点: 元素之间不会存在错位、覆盖等问题， 布局简单，符合人的浏览习惯。 缺点: 不能用单纯的流动布局设计出艺术化的效果。 2．Layer Model（图层模型） 引入层的概念，希望精确定位网页元素， 摆脱HTML元素自然流动所带来的弊端。 微软用div元素推出层概念，与Netscape竞争，最终取得了胜利。 注：单独的层布局模型是不够的， 它必须要与float结合。 3．Float Model（浮动模型） 浮动的根本原因： a) 你无法预知不同浏览者的窗口大小， b) 网页也是活动的窗口， 其大小是无法预测与控制的。 浮动模型希望在流动与固定之间取得一个平衡，实现网页布局的自适应能力。 浮动布局模型 1）浮动是完全不同于流动的另一种布局模型， 它遵循浮动规则，但仍能看到流动对它的潜在影响。 2）任何元素在默认下是不能浮动的， 但都可以用CSS定义为浮动： 如div、p、table 、 img等都可以被定义为浮动。 浮动不会与流动发生冲突 l?） 当元素定义为浮动时，它在垂直方向上应该还处于文档流中，也就是说浮动元素不会脱离正常文档流而任意的浮动。 2）与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。 4 定位类型 CSS中position属性定义元素的定位类型： position: static; 属性值包括： static（默认值）、absolute、fixed与relative 1) Static静态定位，元素遵循HTML默认的流动模型。 2) absolute表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。 如果不存在这样的包含块，则相对于body元素，即根据浏览器窗口。 fixed固定定位 3) fixed表示固定定位，与absolute定位类型类似，但它的包含块是屏幕内的网页窗口本身。 目前IE浏览器还不支持该属性值，因此在布局中使用比较少。 绝对或固定定位能够精确控制元素的显示位置， 但完全使用绝对定位会使布局缺乏灵活性，尽量不用。 相对定位 4) relat