绝对定位

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且 DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. 　　 　　CSS技巧 　　 　　1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 　　 　　2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} 　　 　　3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素 首先谈谈人们经常提及的 块级元素 和 行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在 hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度

语法： position : static | absolute | fixed | relative 参数： static : 无特殊定位，对象遵循HTML定位默认规则 absolute : 绝对定位。将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性进行绝对定位。而其层叠通过 z-index 属性定义。此时对象不具有 边距 ，但仍有 补白 和 边框 。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占 relative : 相对定位。对象不能想绝对定位一样层叠，但可依据 left ， right ， top ， bottom 等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。 positon 名称 (1) 是否将对象脱离文档流 (2) 偏移参照对象 偏移属性 (3) 原先位置是否会被其他元素占用 (4) 是否 能通过z-index层叠 absolute 绝对定位 是 相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点） left ， right ， top ， bottom 是 是 relative

前言 前端一直是我的一个很大的缺憾，这段时间痛顶思痛，决定好好的把前台的东西加强，这不，在学习了一段时间js之后，在做一些小练习，却发现最基本的一些css知识却还不了解，所以便有了这篇博文。 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行级(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度，这就是为什么我们一次次的在span上设置height属性不好使的原因。 简单了解了这些只是，让我们看看dispisplay常用的几个属性。 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline

css布局模型 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上。又不同于我们常说的 CSS 布局样式或 CSS 布局模板。假设说布局模型是本。那么 CSS 布局模板就是末了。是外在的表现形式。 CSS包括3种主要的布局模型。用英文概括为：Flow、Layer 和 Float。 在网页中。元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer） 流动模型 先来说一说 流动模型 ，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是依据流动模型来分布网页内容的。 流动布局模型具有2个比較典型的特征： 第一点。 块状元素 都会在所处的 包括元素内 自上而下按顺序垂直延伸分布，由于在默认状态下，块状元素的宽度都为 100% 。实际上。块状元素都会以行的形式占领位置。如右側代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 第二点，在流动模型下。 内联元素 都会在所处的包括元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 浮动模型 块状元素这么霸道都是独占一行，假设如今我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就能够实现这一愿望。 不论什么元素在默认情况下是不能浮动的，但能够用 CSS 定义为浮动，如

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问， 浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？ 本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？ 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 两者的区别 请看优雅的 Dem o 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。 二、为何要闭合浮动？ 要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问， 浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？ 本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？ 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。 二、为何要清除浮动？ 要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是

---恢复内容开始--- 在清楚了CSS盒模型的基本概念，盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是CSS最基本，最核心的概念。但布局模型是建立在盒型基础之上，又不同于我们常说的CSS布局样式或CSS布模板。如果说布局模型是本，那么CSS布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer、Float。 在网页中，元素有三种布局模型： 1，流动模型（Flow） 2，浮动模型（Float） 3，层模型（Layer） 一、流动模型 流动是默认的网页布局模式。也就是说见面在默认状态下的HTML网页元素都是根据流动模型分布网页内容的。 流动布局模型具有2个比较典型的特征： 1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。 2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示. 二、浮动模型 在流动模型中，块状元素是自上而下的，那么有什么方法可以让块状元素并排呢，这就需要使用CSS样式。 如下代码： <html> <head><style> div{ width:200px; height:200px; border:1px red solid; float:left; }</style> </head> <body> <div><p>123</p></div> </body>

css的定位： 其中css中被分为块级元素与行内元素。如块级元素div、hx标签、p元素。行内元素span和strong W3school给出的一切皆为框的定义。 而且可以使用display属性，强行将行内元素变为块级元素。如display：block。 CSS的定位机制： 主要分为三类： 普通流、浮动、和绝对定位。 position属性 static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 定位属性： position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

CSS position 属性 通过使用 position 属性 ，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 相对定位会按照元素的原始位置对该元素进行移动。 <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> h2.pos_right { position:relative; left:100px; /*top:10px;*/ } 这个时候left相当于flash里面的x,top相当于y。 注意是相对于其正常位置 absolute 元素框从文档流完全删除，并相对于其包含块定位。 包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 h2.pos_abs { position:absolute; left:100px; top:150px; background:#093; } <h2 class="pos_abs">这是带有绝对定位的标题</h2>