CSS盒模型.ppt

彻底弄懂CSS盒模型 一 前言二 理解CSS盒子模型三 转变我们的思路四 实现结构与表现分离五 熟悉工作流程六 实例制作 前言 CSS的盒子模型是DIV排版的核心所在好处 1 网页代码简洁 2 更新方便 3 能兼容更多的浏览器 PDA 理解CSS盒子模型 网页设计中常听到的属性名 内容 content 填充 padding 边框 border 边界 margin CSS盒子模式都具备这些属性 属性介绍 内容 content 就是盒子里装的东西 填充 padding 就是怕盒子里装的东西 贵重的 损坏而添加的泡沫或者其它抗震的辅料 边界 margin 则说明盒子摆放的时候的不能全部堆在一起 要留一定空隙保持通风 同时也为了方便取出 边框 border 就是盒子本身说明 内容常指文字 图片等元素 但是也可以是小盒子 DIV嵌套 与现实生活中盒子不同的是 现实生活中的东西一般不能大于盒子 否则盒子会被撑坏的 而CSS盒子具有弹性 里面的东西大过盒子本身最多把它撑大 但它不会损坏的 填充只有宽度属性 可以理解为生活中盒子里的抗震辅料厚度 而边框有大小和颜色之分 我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的 边界就是该盒子与其它东西要保留多大距离 模型 在现实生活中 假设我们在一个广场上 把不同大小和颜色的盒子 以一定的间隙和顺序摆放好 最后从广场上空往下看 看到的图形和结构就类似我们要做的网页版面设计了 如下图 转变我们的思路 传统的前台网页设计是这样进行的 根据要求 先考虑好主色调 要用什么类型的图片 用什么字体 颜色等等 然后再用Photoshop这类软件自由的画出来 最后再切成小图 再不自由的通过设计HTML生成页面 改用CSS排版后 我们要转变这个思想 此时我们主要考虑的是页面内容的语义和结构 因为一个强CSS控制的网页 等做好网页后 你还可以轻松的调你想要的网页风格 况且CSS排版的另外一个目的是让代码易读 区块分明 强化代码重用 所以结构很重要 实现结构与表现分离 有P标签的地方表示这是一个段落区块 margin是表现属性 我要让一个段落右缩进2字高 有些人会想到加空格 然后不断地加空格 但现在可以给P标签指定一个CSS样式 P text indent 2em 这样结果body内容部分就如下 这没有外加任何表现控制的标签 前言如果你想尝试一下不用表格来排版网页 而是用CSS来排版你的网页 也就是常听的用DIV来编排你的网页结构 又或者说你想学习网页标准设计 再或者说你的上司要你改变传统的表格排版方式 提高企业竞争力 那么你一定要接触到的一个知识点就是CSS的盒子模型 div排版的核心所在 传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容 而改用CSS排版后 就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页 理解CSS盒子模式如果你想尝试一下不用表格来排版网页 而是用CSS来排版你的网页 也就是常听的用DIV来编排你的网页结构 又或者说你想学习网页标准设计 再或者说你的上司要你改变传统的表格排版方式 提高企业竞争力 那么你一定要接触到的一个知识点就是CSS的盒子模型 div排版的核心所在 传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容 而改用CSS排版后 就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页 转变我们的思路如果你想尝试一下不用表格来排版网页 而是用CSS来排版你的网页 也就是常听的用DIV来编排你的网页结构 又或者说你想学习网页标准设计 再或者说你的上司要你改变传统的表格排版方式 提高企业竞争力 那么你一定要接触到的一个知识点就是CSS的盒子模型 div排版的核心所在 传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容 而改用CSS排版后 就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页 熟悉工作流程如果你想尝试一下不用表格来排版网页 而是用CSS来排版你的网页 也就是常听的用DIV来编排你的网页结构 又或者说你想学习网页标准设计 再或者说你的上司要你改变传统的表格排版方式 提高企业竞争力 那么你一定要接触到的一个知识点就是CSS的盒子模型 div排版的核心所在 传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容 而改用CSS排版后 就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页 工作流程 洗脑 在真正开始工作之前我们脑海中要形成这样一种思想 表格是什么我不知道 在内容部分我不能让它再出现表现控制标签 如 font color height width align等标签不能再出现 并不只是单纯的用DIV来实现排版的嵌套 DIV是块级元素 而像P也是块级元素 例如要分出几个文字内容块 不是一定要用DIV才叫DIV排版 不是 文字块一文字块二文字块三 而用 文字块一文字块二文字块三 更合适 工作步骤 1 用div来定义语义结构2 然后用CSS来美化网页 如加入背景 线条边框 对齐属性等3 最后在这个CSS定义的盒子内加上内容 如文字 图片等 没有表现属性的标签 实例 一 用div来定义语义结构 代码片段 上面我们定义了四个盒子 按照我们想要的结果是 我们要让这些盒子等宽 并从下到下整齐排列 然后在整个页面中居中对齐 为了方便控制 我们再把这四个盒子装进一个更大的盒子 这个盒子就是BODY 这样代码就变成 Body的样式设置 最外边的大盒子 装着小盒子的大盒子 我们要让它在页面居中 并重定义其宽度为760像素 同时加上边框 那么它的样式是 body font family Arial Helvetica sans serif font size 12px margin 0pxauto height auto width 760px border 1pxsolid 006633 页头的样式设置 页头为了简单起见 我们这里只要让它整个区块应用一幅背景图就行了 并在其下边界设计定一定间隙 目的是让页头的图像不要和下面要做的导航栏连在一起 这样也是为了美观 其样式代码为 header height 100px width 760px background image url headPic gif background repeat no repeat margin 0px0px3px0px 导航栏部分 导航栏我做成像一个个小按钮 鼠标移上去会改变按钮背景色和字体色 那么这些小小的按钮我们又可以理解为小盒子 如此一来这是一个盒子嵌套问题了 样式代码如下 nav height 25px width 760px font size 14px list style type none navli float left navlia color 000000 text decoration none padding top 4px display block width 97px height 22px text align center background color 009966 margin left 2px navlia hover background color 006633 color FFFFFF 内容部分 内容部分主要放入文章内容 有标题和段落 标题加粗 为了规范化 我用H标签 段落要自动实现首行缩进2个字 同时所有内容看起来要和外层大盒子边框有一定距离 这里用填充 内容区块样式代码为 content height auto width 740px line height 1 5em padding 10px contentp text indent 2em contenth3 font size 16px margin 10px