推荐彻底弄懂CSS盒子模式(DIV布局快速入门)_经验交流

前言
      如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用p来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是p排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。
理解CSS盒子模型
      什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（p嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。

由“盒子”堆出来的网页版面

现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。
转变我们的思路
　　传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。
实现结构与表现分离
　　在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：
如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

段落内容

 

这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离：
用CSS排版

 
 
  
 
 
 
 
 

 

不用CSS排版 

 
 
 
 

첫 번째 방법은 콘텐츠 부분의 코드가 단순해야 한다는 것입니다. 이미지 목록이 더 많으면 첫 번째 CSS 레이아웃 방법이 더 많은 장점을 가지게 됩니다. 이해하시죠: I BODY에서 한 사람을 소개하고 싶습니다. 그 사람이 어떤 사람인지, 키가 얼마나 큰지, 남자인지 아닌지만 말씀드리겠습니다. 여자라면 CSS에서 확인해 보면 알 수 있습니다. 이렇게 하면 BODY에서의 작업이 단순해지며, 이는 BODY의 코드도 단순해진다는 의미입니다. BODY에 팀원이 있으면 CSS에 항목을 기록하면 됩니다. 이는 Flash 소프트웨어의 구성 요소 및 인스턴스 개념과 약간 비슷합니다. 서로 다른 인스턴스가 동일한 구성 요소를 공유하므로 애니메이션 파일이 크지 않을 것입니다. 아이디어를 CSS 웹 디자인으로 옮기는 것입니다. 즉, 코드가 복잡하지 않고 웹 페이지 파일이 작아서 클라이언트가 더 빨리 다운로드할 수 있다는 것입니다.

CSS 레이아웃을 사용하여 웹페이지 파일 크기 줄이기

위에서 만든 레이아웃처럼 4개의 블록으로 나누어지고, 각 블록의 프레임은 네, 이 프레임워크는 CSS로 작성되었습니다. 스타일이 작성되면 셀 수 없이 호출할 수 있습니다(ID가 아닌 클래스로 호출). 텍스트 내용이 변경되는 한 통일된 스타일을 가진 많은 섹션이 생성될 수 있습니다. 스타일 및 구조 코드는 다음과 같습니다(웹페이지를 직접 복사하여 생성하지 말고 웹페이지가 있어야 하는 위치에 다음 코드를 붙여넣으세요).

 

结构代码是这样的：

 

 
 

首 页

 

文 章

 

상册

 

블로그

 

论 坛

 

帮助

 
 
 

前言

 

第一段内容

 

리리解CSS盒子模式

 

第二段内容

 

 
 

关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管리 | 会员登录 | 购物车

Copyright ©2006 - 2008 Tang Guohui. 모든 권리 보유

 

 
 

　　好了,此文到此结束，更多内容，如：CSS中的盒子宽島计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^