| table布局 | div布局优势 |
| 浏览器支持完善 | |
| 表现和结构分离 | |
| 样式设计控制功能强大 | |
| 可以继承,层叠处理 |
Transitional // 松散过度型
Strict //严格型
Frameset //比较不常用的，使用框架使用这种模式
XHTML中的所有标签都是要闭合的比如
但是在HTML中就不必这样
"<input/>" 但是在HTML中就不必这样
"<input>"即可
CSS中的数据单位:
| px : 像素 |
| em : 当前对象体内的字体尺寸（好像英文比较常用这个尺寸） |
| ex : 当前字符高度的相对尺寸 ( font-size:1.2ex,当前字符的1.2倍高) |
| pt : 点/镑point (font-size:9pt;) |
| pc : 派卡 pica |
| in : 英寸 |
| pc : 派卡 pica |
| mm ： 毫米 |
| cm ：厘米 |
| rgb ： （0，0，0） |
| rgba：（0，0，0，0.2） |
| rrggbb ：十六进制的颜色单位 #ffffff; |
| colorName ： 字体颜色(color:blue) |
样式分有三种 ：
- 行间样式
- 内部样式
- 外部样式
css布局和定位:
/固定宽度的布局/
/流式布局（按照%比）/
/弹性布局，根据字体 em进行布局/
1:一列自适应: width:80%;
<h5>一列固定居中: margin:0 auto;</h5>
<h5>二列固定宽度:</h5>
<div id="two-row" class="clearFix">
<style>
.clearFix:after{
content:"";
display:block;
visibility:visible;
clear:both;
height:0;
}
#two-row {
width:500px;
background:#666
}
#two-row .left{
width:200px;
background:#0C9;
float:left;
}
#two-row .right{
width:300px;
background:#069;
float:left;
}
</style>
<div class="left">row1</div>
<div class="right">row2</div>
</div>
2:两列宽度自适应：利用左右定位；中间居中
<div id="two-auto" class="clearFix">
<style>
.clearFix:after{
content:"";
display:block;
visibility:visible;
clear:both;
height:0;
}
#two-auto {
background:#666
}
#two-auto .left{
width:35%;
background:#0C9;
float:left;
}
#two-auto .right{
width:30%;
background:#069;
float:left;
}
</style>
<div class="left">auto-left</div>
<div class="right">auto-right</div>
</div>
3:两列右列宽度自适应
<div id="right-auto">
<style>
#right-auto{
}
#right-auto .left{
width:100px;
float:left;
background:#ccc;
}
#right-auto .right{
background:#f00;
border:2px solid #000;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
</div>
<h5>三列自适应</h5>
<div id="three">
<style>
#three{
position:relative;
}
#three .left{
position:absolute;
left:0;top:0;
width:100px;
height:300px;
background:#C99;
}
#three .right{
position:absolute;
top:0;right:0;
width:100px;
height:300px;
background:#C99;
}
#three .center{
margin-left:100px;
margin-right:100px;
height:300px;
background:#F03;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
<h5>三列自适应;利用左右浮动；中间居中</h5>
<div id="three-1">
<style>
#three-1{
position:relative;
}
#three-1 .left{
float:left;
width:100px;
height:300px;
background:#C99;
}
#three-1 .right{
float:right;
width:100px;
height:300px;
background:#C99;
}
#three-1 .center{
margin-left:100px;
margin-right:100px;
height:300px;
background:#F03;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
高度自适应:
高度自适应这个必须设置 html,body{height:100%} 因为ff和ie中html，和body的高度是不同的，这么写是处理兼容问题; ff,chrome{html为当前视区大小,要把html100%的高度，body为内部内容高度，滚动出现在html中} ie{html为隐藏的好像；body为内部内容的高度，滚动是出现在body中的}
盒模型； 主要是IE和IE6的怪异模式'
box-sizing:border-box; box-sizing:content-box; box-sizing:padding-box;
margin叠加和margin双倍解决
for example:
background
background-image; background-color: background-repeat; background-attachment:设置背景图的滚动方式，背景会被固定住,不会随着scroll改变; background-position: 左对齐方式 ，右对齐方式；
超出div的内容区域
//要换行最好都加，这样可以处理英文和中文 word-break:break-all;允许词间换行； word-wrap:break-word超过容器就换行 white-space:no-wrap;超过容器不换行;
img标签的clip剪切css
这个东西不常用； img{ position:absolute; clip:rect(1px 2px 3px 4px) }