css浮动布局

html-css028

css浮动布局,第1张

不知道你使用的浏览器和你的元素是什么HTML元素。我用你的样式应用在<div>上IE8和FF上都没有发现问题。

另外根据你说的情况，我有点怀疑是跟浏览的默认样式有关系，因为不同浏览器为每个元素的默认样式是有不同的，比如这个例子我是用<div>没有问题，但是用<p>的话就不行了。你给你的#main 添加margin: 0padding:0

给mleft 和mright都添加: margin:0试试看

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

CSS:

body {padding: 0margin: 0}body,html{height: 100%}

#outer {height: 100%overflow: hiddenposition: relativewidth: 100%background:ivory}

#outer[id] {display: tableposition: static}

#middle {position: absolutetop: 50%} /* for explorer only*/

#middle[id] {display: table-cellvertical-align: middleposition: static}

#inner {position: relativetop: -50%width: 400pxmargin: 0 auto} /* for explorer only */

div.greenBorder {border: 1px solid greenbackground-color: ivory}

<div id="outer">

<div id="middle">

<div id="inner" class="greenBorder">

</div>

</div>

</div>

以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。

CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。

层叠样式表

*

CSS是Cascading

Style

Sheets(层叠样式表)的简称.

*

CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

*

在标准网页设计中CSS负责网页内容(XHTML)的表现.

*

CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

*

可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

*

CSS是由W3C的CSS工作组产生和维护的.