当前位置:首页 >> 其它语言学习 >>

XHTML + CSS 布局的核心---盒模型

XHTML + CSS 布局的核心 盒模型 布局的核心---盒模型
盒模型 , 是 XHTML + CSS 布局 页面中的核心 ! 是关系到设计中排版定位的关 键 , 都遵循盒模型规范, 例如 <div> 、 <p> 、 <a> …… 盒模型包含( 外边距 )margin , ( 内边距 )padding , ( 内容 )content , ( 边框 )border 。

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

由 “ 盒子 ” 堆出来的网页版面 传统的前台网页设计是这样进行的: 根据要求, 先考虑好主色调, 要用什么类型的图片 , 用什么字体 、 颜色等等 , 然后再用 Photoshop 这类软件自由的画出来 , 最后再切成 小图 , 再不自由的通过设计 HTML 生成页面,改用 CSS 排版后,我们要转变这个思想, 此时我们主要考虑的是页面内容的语义和结构 , 因为一个强 CSS 控制的网页 , 等做好 网页后 , 你还可以轻松的调你想要的网页风格 , 况且 CSS 排版的另外一个目的是让代 码易读 , 区块分明 , 强化代码重用 , 所以结构很重要 。 如果你想说我的网页设计的 很复杂 , 到后来能不能实现那样的效果? 我要告诉你的是 , 如果用 CSS 实现不了的效果 , 一般用表格也是很难实现的 , 因为 CSS 的控制能力实在是太强大了 , 顺便说一点的是用 CSS 排版有一个很实用的好处 是 , 如果你是接单做网站的 , 如果你用了 CSS 排版网页 , 做到后来客户有什么不满 意 , 特别是色调的话 , 那么改起来就相当容易 , 甚至你还可以定制几种风格的 CSS 文 件供客户选择 , 又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。