梁小芳《css+div网页设计与制作》项目四.pptVIP

任务4.5 文字盒子属性设置(margin) html head title文字盒子例子/title style type=text/css p{ width:180px;border:2px solid #003366; padding:10px; background:#D1E9FF; margin:10px; text-indent:28px; font-size:13px; } /style/head body p网页上的任何网页元素都看成是CSS盒子，所以文字元素盒子同样具有CSS盒子的任何属性。/p/body/html 任务4.6 CSS盒子模型计算 6.1 一个CSS盒子实际宽度计算 一个CSS盒子实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界 6.2 块级元素之间的距离计算：取最大者 6.3 行内元素之间的距离计算：margin-right + margin-left 6.4 嵌套关系的距离计算：子块级元素离父块级元素距离为margin + padding 任务4.7 CSS盒子模型与DOM树关系应用 谢谢观赏 项目1 高职高专计算机教学改革新体系规划教材 Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo CSS+DIV 网页设计与制作 主 编 梁小芳 副主编 梁文锋 朱平 项目1 了解网页设计相关知识 目录 1 项目2 CSS+DIV网页设计与制作 2 项目3 创建CSS样式 3 项目4 CSS 盒子在网页中的应用 4 项目5 CSS美化网页元素 5 项目6 CSS盒子的浮动 6 项目7 CSS盒子的定位 7 项目8 首页设计与美化 8 项目9 子页制作 9 项目10 网页特效制作 10 项目11 房产企业网站设计与实现 11 项目12 网站上传与维护 12 项目四 CSS 盒子在网页中的应用 任务4.1 盒子模型探究 任务4.2 设置盒子边框(border) 任务4.3 设置盒子填充(padding) 任务4.4 设置盒子边界(margin) 任务4.5 文字盒子属性设置(margin) 任务4.6 CSS盒子之间的关系 任务4.7 CSS盒子模型的计算方法 实训4 使用CSS样式实现图文混排效果 任务4.1 盒子模型探究 4.1.1 盒子模型定义 盒子模型是CSS的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互,盒子模型是现实生活中某些事物本质特性的一种抽象,CSS盒子模型就是在建立这种特性后所形成的对网页设计定位与布局的一套原则和规范。 4.1.2 在标准流中定位默认CSS盒子 1块级元素（block-level elements） 2 内联元素（inline elements） Logo 边界 边框 填充 内容 从CSS盒子模型图分析,内容就是盒子里装的东西;而填充就是盒子与这些东西的空隙;边框就是盒子本身;至于边界就是与其他盒子之间的空隙。与现实生活中的盒子不同的是现实生活中的东西一般不能大于盒子,否则会导致东西装不下或者盒子被撑坏,而CSS盒子具有弹性,里面的东西大过盒子本身时会自动适度变大。 Logo CSS盒子模型特定的内部结构有其独特的空间距离等属性,属性值的大小直接影响整个网页排版效果。每个部分都有4个方向属性值,分别是:上(top),右( right)、下( bottom)和左(left),这4个值是按“上、右、下、左”顺时针方向原则计算的,其值的大小直接影响各种排版效果。当然,一个盒子会占有一个矩形,它具有一定的宽度值( width)或者高度值( height),这也是直接影响排版效果的另一些重要属性。 Logo 标准流就是CSS规定的默认的块级元素和内联元素的排列方式,就是没有经过任何CSS样式修饰的愿始排列,即是竖排和横排两种。从前面一些例子可以看到,不管body 下来是一个或两个节点,还是节点有多层,如p、div、ul、li等,这些都是标准流里的盒子,而这些盒子只有两种:竖排的块级元素和横排的内联元素。 Logo 1.块级元素 块级元素( Block- level elements) li占据着一行,并且和相邻li依次竖直排列,左右撑满,即占有独立区,如图4-3所。ul、p、div具有同样的性质,这些就是块级元素,常用的块级元素还有:form、h1、h2、3、h4、 table等 Logo 2.内联元素 内联元素( Inline elements)b没有像l那样占据一行,而是在文字元素上指定了一定的范围,各个字母