标签：
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ，以下观点只代表 深海个人立场 希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见 同时不希望将初学的您 带入走火入魔的状态!
1 ：css （cascading style sheet）：
初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完。至于样式手册上的单词（属性和取值） 多久能背完取决你的努力和英语基础，请注意 无论是div 还是css 还是html xhtml，其实如果你英文够好做网页和聊天没有差别：
例1：
<style type="text/css">
.style1{width:500px; height:100px; float:left;}
</style>
你在告诉html 你制定了这样的一个样式 宽度500像素 高度100像素 左浮动（如果你不理解什么是浮动请相信成 左对齐）;
.style - 样式名称 为什么使用大括号扩起来呢？ 因为一句话2句话说不明白 括起来代表他属于某一个集体；
冒号： 前面的教属性 就像你自己 有身高 体重一样！写样式就像是介绍：
深海:{身高:170cm; 体重:60kg; }
2 div （division）：
div 的英文意思是区分，不加入样式的情况下 它和p 标记没有什么大的区别。
3 div+css
给div 制定了样式 他们的组合就演绎出了html 世界中强大的组合；
为什么使用div + css 有人说 它实现了 内容与展示形式的分离。如果你学明白了样式你会拒绝这样的说法；
因为table+css 一样可以！
有人说div+css 天生优化了搜索引擎，为何???
因为同样是布局 div只需要一层结构 而表格需要3层
例：
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>内容</td>
</tr>
</table>
<div>内容</div>
比较起来节省了 4行代码 如果页面上 出现N个table 那么可以节省 N*4 行代码,我觉得这是DIV 唯一可以拿来炫耀一下的东西； 甚至我们也坚信 内层用p标记也可以布局（不信你给p标记加上样式试试）
那么 我们要说 DIV+css 也没什么 初学者千万别被他的无聊和重复吓到
4 最大的呼声！！ 不变形！！！！！！
网上有诸多的文章在说div的变形 （在不同的浏览器下不同的效果）
初学的你是不是很怕火狐 很怕 ie 6？？？？
解决问题的最简单办法：
从哪里来回到哪里去！！！！！！！！！！！！
不要用什么if 去判断浏览器 这个世界上的浏览器种类没你想象的 遇到的那么少！！！！
你要知道你来自table 请你回到table！！
不是叫你用table 是想 table 怎么布局的！！！！ table 有什么重要的值 table 为什么要制定对齐方式！
div +css 永不变形规则：
1> 记住 3个值 宽度 高度 对齐方式 永远记住！
2> 页面上出现变形 是因为你没有用div+css 布局！！！
你是否觉得我在开玩笑？看看以下代码
<div class="style1">
内容1
</div>
<img src="xxx.jpg">
<div class="style2">
内容2
</div>
我相信在页面的某个部分你会出现类型这样的代码 请注意你犯规了 你的布局方式叫 div+image+css
3> 只有矩形和矩形才能布局！！！
html 中所有外层结构都是矩形 哪怕是图片 图上画了 一个圆形 你可以打开图片看看 他是矩形！！！
想办法把元素转换成矩形并制定对齐方式 不能转换成矩形的（文字）利用矩形包裹！ 然后布局 永不变形适用于各种浏览器！！！
有哪些元素是矩形呢？
table p h1 - marquee embed center ...............................常见的html 标记符都是矩形！！
谁不是矩形呢？？？
文字！ 你是否有一种同感 文字和图片布局都很难得到好的效果
谁开始不是矩形但是可以转换成矩形呢？
a 链接本来是文字 当你制定样式为 display:block 的时候它就变成了矩形！！
****************************************************
4> 只要是矩形就有3个必须的属性： 宽度 高度 对齐方式 请别忘记他们 只要你时刻记得 div+css 不变形的秘密你已经掌握了 90%， 图片 也有对齐方式哦！！
一定要掌握当 对齐方式不同是 布局出现的问题！
左右左 - 能不变形吗？
默认 是要换行的哦
div+css的 居中对齐 是有条件的哦（所有当同级元素的对齐方式都为居中对齐的时候可以采用居中对齐）
5> 有些标记是有默认的间距的！！！（内间距 padding 外间距 margin）
body - 外间距
ul - ie下外间距 火狐下 内间距
p - 内间距
所以一旦使用他们要记得把他们先格式化！ 操作方法（内间距 padding:0px; 外间距 margin:0px;）
6> 火狐下 当高度为auto是 无法自适应 解决办法（overfollow:hidden）
7> 在还没有完全掌握定位之前请放弃使用。本人坚信 一般的html 不是用定位完全可以布局，因为talbe 就没有定位！！！！！ 一样可以布局很好 很稳定。div 和 table 没有实际区别 只是节省代码！！
8> 再次强调 3个值 永远记住: 宽度 高度 对齐方式（永不变形的唯一秘诀）+ 只有矩形才有这样的3个值！
div +css 的信心来源于多练 做的越多静态越多 本人学习div 的总计时间是48小时。用的时间超过几百小时。
现在有信心应对所有的浏览器 如果想学好div 请现在起 打开伟大的Dreamweaver 开始你的旅程吧
div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
标签：
原文地址：http://www.cnblogs.com/mengdeep/p/5041849.html
