推荐彻底弄懂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가 아닌 클래스로 호출). 텍스트 내용이 변경되는 한 통일된 스타일을 가진 많은 섹션이 생성될 수 있습니다. 스타일 및 구조 코드는 다음과 같습니다(웹페이지를 직접 복사하여 생성하지 말고 웹페이지가 있어야 하는 위치에 다음 코드를 붙여넣으세요).

mainBox"> ;

CSS 상자 모드

텍스트 콘텐츠

생각 바꾸기

텍스트 콘텐츠

단계 숙지

텍스트 내용

작업 흐름
실제로 작업을 시작하기 전에 다음과 같은 아이디어를 마음 속에 형성해야 합니다. 테이블이 무엇인지 모르고 글꼴과 같은 성능 제어 태그에 표시되도록 할 수 없습니다. , color, height, width, align 및 기타 태그는 사용할 수 없습니다. 다시 말하지만, (간단히 말하면 작업하기 전에 세뇌하고 기존 관행을 잊어버리고 새로운 방법을 수용하고 사용하는 것입니다.) 저는 단순히 p를 사용하여 조판의 중첩을 구현하는 것이 아닙니다. 블록 수준 요소 및 P도 블록 수준 요소의 경우, 예를 들어 텍스트 콘텐츠의 여러 블록을 분리하려는 경우 p 조판이라고 부르기 위해 p를 사용할 필요는 없습니다. "

text가 아닙니다. 블록 1

텍스트 블록 2

텍스트 블록 3

" 대신 "

텍스트 블록 1

텍스트 블록 2

텍스트 블록 3"이 더 적합합니다.
p+CSS를 사용하는 디자인 아이디어는 다음과 같습니다. 1. p를 사용하여 의미 구조를 정의합니다. 2. 그런 다음 CSS를 사용하여 배경, 줄 테두리, 정렬 속성 등을 추가하는 등 웹 페이지를 아름답게 만듭니다. .; 3. 마지막으로 이 CSS에서 상자에 텍스트, 그림 등과 같은 콘텐츠를 추가합니다. (속성을 표시하는 레이블이 없습니다.) 이 단계에 대한 이해를 돕기 위해 예를 들어 보겠습니다. 먼저 결과 사진을 보세요:


데모 주소: http://www.php.cn/


CSS 레이아웃 결과 사진

p를 사용하여 의미 구조 정의
이제 일반적인 레이아웃 열 구조, 즉 페이지 헤더, 탐색 모음, 콘텐츠, 저작권(아래 참조),

典型版面分栏结构

其结构代码如下：

复制代码 代码如下:

 

 

 

 

 
 

　　最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：

复制代码 代码如下:

body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
margin: 0px auto; 
height: auto; 
width: 760px; 
border: 1px solid #006633; 
} 

　　页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：

#header { 
height: 100px; 
width: 760px; 
background-image: url(headPic.gif); 
background-repeat: no-repeat; 
margin:0px 0px 3px 0px; 
} 

　　导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

#nav { 
height: 25px; 
width: 760px; 
font-size: 14px; 
list-style-type: none; 
} 
#nav li { 
float:left; 
} 
#nav li a{ 
color:#000000; 
text-decoration:none; 
padding-top:4px; 
display:block; 
width:97px; 
height:22px; 
text-align:center; 
background-color: #009966; 
margin-left:2px; 
} 
#nav li a:hover{ 
background-color:#006633; 
color:#FFFFFF; 
} 

　　内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

#content { 
height:auto; 
width: 740px; 
line-height: 1.5em; 
padding: 10px; 
} 
#content p { 
text-indent: 2em; 
} 
#content h3 { 
font-size: 16px; 
margin: 10px; 

　　版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

#footer { 
height: 50px; 
width: 740px; 
line-height: 2em; 
text-align: center; 
background-color: #009966; 
padding: 10px; 
} 

　　最后回到样式开头大家会看到这样的样式代码：

* { 
margin: 0px; 
padding: 0px; 
} 

　　这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

 

结构代码是这样的：

 

 

 

• 首 页
 

• 文 章
 

• 상册
 

• 블로그
 

• 论 坛
 

• 帮助
 

 

 

前言

 

第一段内容

 

리리解CSS盒子模式

 

第二段内容

 
 

 

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

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

 
 
 

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