CSS的多态现象

[url]http://bbs.blueidea.com/thread-2875900-1-1.html[/url]

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:normal 15px/20px "Courier New","Verdana";}
ol,ul{list-style: none;}
ul{margin-left:0;padding-left:0;}
img,fieldset{border:0;}
table{border-collapse:collapse;border-spacing:0;}
strong{font-weight:bold;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
caption,th{text-align:left;}
q:before,q:after {content:'';}
a{cursor:pointer;color:#333;text-decoration:none;}
a:hover{color:#9c0000;text-decoration:underline;}
.clear{display:block; clear:both;}

body, button, input, select, textarea {
font: 16px / 1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
“\5b8b\4f53″ 就是 “宋体”。用 unicode 表示

[b]width[/b]

width、height、overflow、margin-top、margin-bottom对内联元素完全不起作用。
width: auto会把浮动元素缩减到其内容的宽度。
width: auto会把块状元素扩展其父元素的宽度。

width: 100%,只要浮动元素和块状元素没有边框(border)、内边距(padding)、和外边距(margin),width: 100%就会把他们拉至父元素的宽度。
width: 100%，也会把有边框和内边距的表格拉至它们父元素的宽度。
width: 100%，会令绝对定位元素的宽度与它的定位最近的祖先元素一样，而与它的父元素没什么关系。
例子:
test会和div1的宽度一样100px
<!-- CSS代码 -->
.div1 { position: relative; width: 100px; }
.div2 { width: 200px; height: 200px; border: 5px solid red; }
.test { display: block; position: absolute; width: 100%; height: 100px; border: 2px solid black; }
<!-- HTML代码 -->
<div class="div1">
   <div class="div2">
     <span class="test">内容</span>
   </div>
</div>

[b]五种盒模型特点:[/b]
===========================================

[b]1.内联盒模型特点[/b]

按从左至右排列的。
当超过它们最近的祖先元素时，便换到下一行。
width、height、overflow、margin-top、margin-bottom对内联元素完全不起作用。
内联元素用line-height设置行的高度。

[b]2.块状盒模型特点[/b]

按从上至下排列的。
width: auto、height: auto是默认值，使它与父元素相一致。
width: 100% == 父元素的宽度，width: 120%会超过父元素的宽度.
*margin-left: auto会令块状元素排列在父元素的右侧。
*margin-right: auto会令块状元素排列在父元素的左侧。
*margin-left和margin-right都auto排列在父元素的中间.

[b]3.表格盒模型特点[/b]

表格有外边距，没有内边距。
单元格有内边距，没有外边距。
不能把overflow应用于表格，应把overflow: hidden赋给单元格.
border-collapse决定了邻近的边框是否合并为一个。分离(separate), 合并(collapse)。
table-layout决定了是固定大小(fixed)还是auto.

[b]4.绝对定位盒模型特点[/b]

它是相对于(relative)最近定位祖先元素来定位的。
当width有个值，left有个值，right:auto的时候，从左侧偏离。
margin为正的时候靠近容器中心，为负远离中心。
width: 100%会与祖先的宽度相等。

[b]5.浮动盒模型特点[/b]

<!-- CSS代码 -->
.container{
   border:1px solid black;
   width: 200px;
   height: 300px;
}

.box{
   border:1px solid black;
   width:50px;
   height:auto;
   float:left;
   margin: 10px;
   padding:2px;
}

<!-- HTML代码 -->
<div class="container">
   <div>前</div>
   <div class="box">float1</div>
   <div class="box">float2</div>
   <div class="default">后</div>
</div>

上面的代码显示的效果会是这样的
[color=blue]前
float1 float2 后[/color]
我们看到"后"字也浮动了

添加下面的代码"后"字就不浮动了。

.default{clear:left;}

[color=blue]前
float1 float2
后[/color]

[b]盒模型练习[/b]
===========================================

[b]解决IE6 的浮动元素的双倍边距问题[/b]
对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：

div {float:left;margin:40px;display:inline;}

[b]将重要元素放置在屏幕中央[/b]

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}   
div.popup { margin-top: -200px; margin-left: -250px;}

[b]内联元素垂直居中对齐[/b]
可以把line-height设置成一个大于高度的值。

<p class="center">垂直居中对齐</p>
.center{width:300px; height:50px; line-height:51px; text-align:center;}

<!--.main不要设置高度,用padding代替.注意下txtSearch后面的换行，"/></form>"没有空格。vertical-align只能对内联元素起作用.-->
body{margin:0; padding:0; font:18px Arial, Helvetica, sans-serif;}
form{display:inline;}

.main{width:500px; padding:10px; border:1px solid black; text-align:center;}
.mid{vertical-align:middle;  margin:0 10px;}
.txtSearch{padding:5px;}

<div class="main"><span class="mid">搜索:</span><form><input type="text" size="28" class="mid txtSearch" 
/></form><img src="../images/searchbutton.gif" class="mid" /></div>

[b]拉伸的静态块状元素[/b]

.parent{
	width:200px; height:140px;
	border:1px solid black;
	margin-left:200px; margin-top: 300px;
	padding:0px 10px 10px;
}

.s1{
	border-bottom:1px solid black;
	background-color:gold;
	width:auto;
	margin-left:-10px;
	margin-right:-10px;
}
<!-- HTML代码 -->
<div class="parent">
	<div class="s1"><span>拉伸的静态块状元素</span></div>
</div>

[b]相对浮动定位[/b]
可以用position:relative对浮动元素进行定位。配合使用left、right、margin、z-index。

<!-- CSS代码 -->
.parent{
   position:relative;
   width: 500px;
   height: 300px;
   border: 1px solid black;
   margin: 0 auto;
}

.float{
   position:relative;
   float:left;
   width: 100px;
   height: 50px;
   border: 1px solid black;
   margin-right: 20px;
}

.relative1{
   top: 20px; left:30px;
   background-color: gray;
}

.relative2{
   top: 20px; left:60px;
   background-color: gold;
}
<!-- HTML代码 -->
<div class="parent">
   <div class="relative1 float">相对浮动1</div>
   <div class="relative2 float">相对浮动2</div>
</div>

[b]浮动居中[/b]

#Layer1{float:left; position:relative; left:50%;}
span{position:relative; left:-50%;}
<div id="Layer1"><span>float center</span></div>

===========================================

[b]表格[/b]

1.列宽度:
百分比宽度>固定宽度>自动宽度。
一种给列设宽度的表较好的方法是给表格的第一行的每个单元格都设定一个宽度。

2.包裹列
将表格设为table-layout:auto; width:auto; 单元格width:auto;就能达到包裹列的效果，这些都是默认规则。