彻底弄懂CSS盒子模式之一(DIV布局快速入门)

作者:唐国辉 来源:蓝色经典 时间:2007-05-11 17:03:00 


2.彻底弄懂CSS盒子模式二(导航栏实例)
3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 
5.彻底弄懂CSS盒子模式五(定位强化练习) 


前言

如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查找相关信息。

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。


CSS盒子模式

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而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内容部分就如下,这没有外加任何表现控制的标签:


<p>加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。</p>


如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:


<p><font color="#FF0000" face="宋体">段落内容</font></p>


这个是结构和表现混合一起写的,如果很多段落有统一结构和表现的话,再这样累加写下去代码就繁冗了。

标签:css,div,盒子
0
投稿

猜你喜欢

  • Pytorch PyG实现EdgePool图分类

    2022-03-17 15:47:55
  • sql2008评估期已过的解决办法及序列号

    2024-01-13 10:32:11
  • 解释FCKeditor样式的工作原理

    2007-10-11 13:34:00
  • 基于javascript实现九宫格大转盘效果

    2024-04-17 10:33:13
  • Java实现数据库连接的最详细教程分享

    2024-01-28 01:34:15
  • 浅谈Mybatis+mysql 存储Date类型的坑

    2024-01-17 19:13:14
  • Oracle中PL/SQL的块与表达式

    2024-01-28 21:30:34
  • 基于python实现Pycharm断点调试

    2021-05-18 03:16:22
  • 一文带你掌握Go语言中文件的写入操作

    2024-02-07 13:23:54
  • Mysql的列修改成行并显示数据的简单实现

    2024-01-24 01:39:54
  • python中pylint使用方法(pylint代码检查)

    2023-10-28 09:41:52
  • Python常见库matplotlib学习笔记之多个子图绘图

    2023-02-17 19:40:14
  • MSSQL中部分字段重复数据的删除方法

    2008-12-29 13:59:00
  • Golang操作sqlite3数据库的详细教程

    2024-01-14 05:32:52
  • python3结合openpyxl库实现excel操作的实例代码

    2021-02-24 05:06:59
  • python学习笔记之调用eval函数出现invalid syntax错误问题

    2023-11-03 01:48:30
  • Python标准库os.path包、glob包使用实例

    2021-09-04 13:49:03
  • 将后台数据从Berkeley的文件DB转到MySQL

    2009-01-04 13:31:00
  • 简单的PHP图片上传程序

    2024-05-22 10:06:54
  • Python socket 套接字实现通信详解

    2023-05-16 04:18:08
  • asp之家 网络编程 m.aspxhome.com