(转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的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 开始你的旅程吧

祝你愉快！

个人拙见 欢迎批评！

本文转自站酷，因为感觉极好，适合CSS+DIV初学者，故保存下来，以备不时之需！