Html列表(2012/7/23)

Ul无序或ol有序列表。

浮动后父容器高度自适应。

列表添加图片后横向排列

<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>

当一个容器内部元素懂浮动后，它的高度将不随着内部元素高度的增加而增加，故而造成内部元素的高度超出了容器。

给容器添加一个边框和内边距：#layout { width:400px; border:2px solid #ccc; padding:2px;}

 

如果容器没有被内部元素撑高，需添加一下样式：

overflow:auto; zoom:1; overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写（此样式不能通过W3C验证）。

绝对定位和浮动的区别

当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

 

而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流

一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。

zoom=1：用来解决自适应高度时IE6的兼容问题（这个属性通不过w3c认证）；

 

display:inline：解决IE6双倍边距bug问题；

 

*：在样式名和属性中间加*，这个常用在需要垂直居中时使用；

 

<fieldset>其主要目的是将<input>域按节分组。

 

默认情况下，<fieldset>在内容周围画一个简单的边框。以定义表单节。

 

IE6 3像素bug：在布局时采用左右都浮动的办法避免了这个问题；