css布局定位.ppt

html head style type=text/css h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } /style /head body h2这是位于正常位置的标题/h2 h2 class=pos_left这个标题相对于其正常位置向左移动/h2 h2 class=pos_right这个标题相对于其正常位置向右移动/h2 p相对定位会按照元素的原始位置对该元素进行移动。/p p样式 left:-20px 从元素的原始左侧位置减去 20 像素。/p p样式 left:20px 向元素的原始左侧位置增加 20 像素。/p /body 隐藏元素 - display:none或visibility:hidden区别 display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 * * 模板来自于 * css层叠样式表 布局定位 FLOAT POSITIONING 总论概念 display css布局总论 “一切皆为框” 不论是定位，浮动还是展示，都基于块状框型的模样表现出来的! CSS 有三种基本的定位机 制：普通流、浮动和绝对 定位 注：除非有专门指出，不然所有框都在普通流 补:Netscape曾提出过Layer作为布局标记，它对于精确布局很有好 处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记 的功能就是position，direction,float和clear 属性 其属性值分别代表： absolute：屏幕上的绝对位置。 relative：屏幕上的相对位置。 static：固有位置 position position属性用来决定元素的位置类型 属性名称: position 属性值: absolute | relative | static 初始值: static 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 position的四个属性值含义 B D A C relative 元素框偏移某个距离。元素仍 保持其未定位前的形状，它原 本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对 于其包含块定位。包含块可能是 文档中的另一个元素或者是初始 包含块。元素原先在正常文档流 中所占的空间会关闭，就好像元素 原来不存在一样。元素定位后生成 一个块级框，而不论原来它在正常 流中生成何种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块 是视窗本身。 static 元素框正常生成。块级元素生成一个 矩形框，作为文档流的一部分，行内 元素则会创建一个或多个行框，置于 其父元素中。 这是位于正常位置的标题 这个标题相对于其正常位置向左移动 这个标题相对于其正常位置向右移动 相对定位会按照元素的原始位置对该元素进行移动。 样式 left:-20px 从元素的原始左侧位置减去 20 像素。 样式 left:20px 向元素的原始左侧位置增加 20 像素。 相对定位 html head style type=text/css h2.pos_abs { position:absolute; left:100px; top:150px } /style /head body h2 class=pos_abs这是带 有绝对定位的标题/h2 p通过绝对定位，元素可以 放置到页面上的任何位置。下 面的标题距离页面左侧 100px ，距离页面顶部 150px。/p /body /html 通过绝对定位，元素可以放置到页面 上的任何位置。下面的标题距离页面 左侧 100px，距离页面顶部 150px。 这是带有绝对定位的标题 绝对位置 绝对位置属性： 绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数： 属性名称: top、right、bottom、left 属性值: length|percentage|auto 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 利用以上属性，用户就可以精确定义元素的位置，如： P style=posit