table布局div布局优势 浏览器支持完善 表现和结构分离 样式设计控制功能强大 可以继承,层叠处理

Transitional // 松散过度型

Strict //严格型

Frameset //比较不常用的，使用框架使用这种模式

XHTML中的所有标签都是要闭合的比如 "<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) }

转载于:https://www.cnblogs.com/diligenceday/p/3972192.html

相关资源：JAVA上百实例源码以及开源项目