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

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 文 件供客户选择 , 又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。


相关文章:
CSS核心属性盒模型.doc
中国IT 职业教育领先品牌 精品课程 全程面授 CSS 核心属性盒模型 CSS 的盒...XHTML + CSS 布局的核心... 2页 2下载券 CSS选择符与盒模型 1页 1下载...
XHTML+CSS试题有答案.pdf
XHTML+CSS试题有答案_电子/电路_工程科技_专业资料...符所具有的属性,它是 css 的核心,css2 共有 150...DIV/CSS 中只有一种布局模型即浮动布局模型 (f )...
xhtml css基础知识.doc
学习 web 标准,首先要弄 懂的就是这个盒模型,这就是 DIV 排版的核心所在。...XHTML+CSS网页布局基础-... 15页 1下载券 01-02 xhtml css基础知识......
XHTML.doc
XHTML - 《XHTML+CSS网页设计与布局》 课程简介 本课程由浅入深地对Web 标准、XHTML语 言和CSS的基础知识进行系统地介绍;对CSS 的核心机制盒子模型和3种...
DIV+CSS布局经典_图文.ppt
因此,Table布局的核心是: 设计一个能满足版式要求的...CSS布局代码示例 Xhtml文档 Style1.css <!DOCTYPE ...CSS盒子模型 3.3 文档流及浮动概念 3.4 浮动定位...
盒子模型.doc
盒子模型 - 盒子模型,是 XHTML+CSS 布局页面中的核心!要想学会用 CSS 布局页面,就首先要理解 盒子模型! 什么是盒子模型?对于初学者来说, 很难说出来, 但是...
第7章CSS布局_图文.ppt
7.1.4 DIV元素的布局技巧从技术角度来说,XHTML在控制样式时也不需要过多的...7.2 CSS盒模型盒模型CSS定位布局的核心内容。在上一节中读者学习 了布局...
CSS试题.doc
选题 1.CSS 是利用( B )XHTML 标签构建网页布局...它是 CSS 的核心,css 共有 150 多个属性 D....下列对盒子模型描述不正确的是( B ) A.一个盒子...
DIV+CSS网页布局经典教程_图文.ppt
因此,Table布局的核心是: 设计一个能满足版式要求的...CSS布局代码示例 Xhtml文档 Style1.css <!DOCTYPE ...CSS盒子模型 3.3 文档流及浮动概念 3.4 浮动定位...
基于CSS盒模型中的margin属性解析.doc
CSS 与 HTML、XHTML 结合使用时,CSS 展现出了强大的能力。 CSS 盒模型,是基于 CSS 的 Web 设计中非常重要的概念,因为盒模型CSS 定位布局的 核心内容。...
HTML CSS网页布局与定位_图文.ppt
DIV+CSS ? Div是XHTML中指定的,专门用于 布局设计的容器对象。Div的布局它需 ...理解盒子模型 ? 盒子模型CSS的核心概念之一,它指定元素如何显示以及如何相互...
10天学会div+css.doc
10天学会div+css_IT/计算机_专业资料。学习div+css布局,第一天XHTML CSS基础...学习 web 标准,首先要弄懂的就是 这个盒模型,这就是 DIV 排版的核心所在。...
CSS+DIV学习笔记(史上最实用的CSS笔记)_图文.doc
这才是我们学习 XHTML+CSS 的核心。 将结构与样式分离。 举例: 应用于所有网页...CSS 布局主要是通过盒子模型来实现 张鹏老师的百度空间:闪梦设计 25、关于列表...
CSS设计研究.txt
... 第1章 (X)HTML与CSS核心基础 (X)HTML与CSS核心基础 XHTML与HTML的重要...盒子模型 什么是"模型" 什么是"模型"--本质特征的抽象 本质特征的抽象 布局的...
CSS设计彻底研究_图文.ppt
? 第3章:深入讲解CSS的核心机制盒子模型。 ? 第4章:讲解CSS布局的重点...第1章 (X)HTML与CSS核心基础 ? XHTML与HTML的重要区别 1. 在XHTML中标记...
css设计彻底研究优质资料_图文.ppt
? 第3章:深入讲解CSS的核心机制盒子模型。 ? 第4章:讲解CSS布局的重点...第1章 (X)HTML与CSS核心基础 ? XHTML与HTML的重要区别 1. 在XHTML中标记...
DIV+ CSS_图文.ppt
CSS核心机制-盒子模型 6、CSS重点和难点-定位 7、...XHTML、XML DIV+CSS JavaScript 什么样的网站符合Web...定义了如何 显示HTML元素,用来控制网页的样式和布局...
项目六创建个人博客页面_图文.ppt
网页设计与制作》模块一 网页标准化之路 (一)学习目标 学习并认识XHTML、DIV、盒模型等的概念,理解使用 XHTML+CSS布局页面的优缺点,初步掌握Web标准化布局的核心...
CSS网页布局_图文.ppt
Div是xhtml中指定的用于布局的核心容器,一个简单的...CSS的框架模型 #box { width: 70px; margin: ...2、模式:是指CSS布局中,浏览器将每一个元素当作...
css布局讲解_图文.ppt
4.3 CSS布局基础 ? 所有HTML和XHTML页面就是由“结构、表现和行为”这三方面...4.3 CSS布局基础 ? 布局模型 布局模型盒模型一样都是CSS最基本、最核心的 ...