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

1、高职高专计算机教学改革新体系规划教材 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、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块级元素

3、（block-level elements） 2 内联元素（inline elements） Logo 边界边界 边框边框 填充填充 内容内容 从CSS盒子模型图分析,内容就是盒子里装的 东西;而填充就是盒子与这些东西的空隙;边框就是 盒子本身;至于边界就是与其他盒子之间的空隙。 与现实生活中的盒子不同的是现实生活中的东西 一般不能大于盒子,否则会导致东西装不下或者盒 子被撑坏,而CSS盒子具有弹性,里面的东西大过盒 子本身时会自动适度变大。 Logo CSS盒子模型特定的内部结构有其独特的空间距离 等属性,属性值的大小直接影响整个网页排版效果。每个 部分都有4个方向属性值,分别是:上(top

4、),右( right)、 下( bottom)和左(left),这4个值是按“上、右、下、左 ”顺时针方向原则计算的,其值的大小直接影响各种排版 效果。当然,一个盒子会占有一个矩形,它具有一定的宽 度值( width)或者高度值( height),这也是直接影响排 版效果的另一些重要属性。 Logo 标准流就是CSS规定的默认的块级元素和内 联元素的排列方式,就是没有经过任何CSS样式修 饰的愿始排列,即是竖排和横排两种。从前面一些 例子可以看到,不管body 下来是一个或两个节点, 还是节点有多层,如p、div、ul、li等,这些都是标 准流里的盒子,而这些盒子只有两种:竖排的块级 元素和横

5、排的内联元素。 Logo 1.块级元素 块级元素( Block- level elements) li占 据着一行,并且和相邻li依次竖直排列,左右撑满 ,即占有独立区,如图4-3所。ul、p、div具有 同样的性质,这些就是块级元素,常用的块级元 素还有:form、h1、h2、3、h4、 table等 Logo 2.内联元素 内联元素( Inline elements)b没有像l那样 占据一行,而是在文字元素上指定了一定的范围, 各个字母之间横向排列,也就是它不占有独立的区 域,如图4-4所示;如果在b的右边继续添加其他内 联元素内容,如用i修饰的某些文字,则这些文字依 然会跟b的文字同一行

6、,这些就是内联元素,也叫行 内元素。 Logo 任务4.2 设置盒子边框(border) （1）border-color：设置边框颜色 （2）border-width：设置边框宽度 （3）border-style：设置边框风格 实例 盒子模型的 margin和 padding属性比较简单, 只能设置宽度1值,最多分别对上、右下、左设 置宽度值。而边框 border的属性类型有颜色 ( color)、宽度( width)和样式( stvle),各自也 有上、右、下左4个方向的属性值,分别介绍如 下。 Logo (1) border- color:设置边框颜色,通常为十六进制的值,如 蓝色为“#0

7、000FF”,边框颜色属性设置一个元素的边框 颜色。 (2) border- width:设置边框宽度,可以设置为 mediun、 thin、 thick和,其中为具体的数值 ,如3px等, width的默认值为“ medium”,一般浏览器都 将其解析为2px,但不允许使用负值长度 (3) border - style:设置边框风格,可以设为实线( solid) 、虚线( dashed)、点划线 dotted)、双线( double)等效 果,但IE浏览器不太支持 border - style,在实际制作网页 时常用 solid:实线或者 dashed:虚线。 Logo 盒子模型的 marg

8、in和 padding属性比较简单,只能 设置宽度值,最多分别对上、右下、左设置宽度值。 margin(边界)是用来设置页面中元素和元素之间的距 离,即定义元素周围的空间范围,是页面排版中一个比较重要 的概念。 margin属性包含4个子属性,用于控制元素四周的边距 ,分别为 margin - top(设置元素上边距 margin - right( 设置元素右边距)、margin- bottom(设置元素下边距)和 margin-left(设置元素左边距)。 Logo 语法格式： margin:auto|length 例如： margin-top:195px margin-left:83px

9、margin:0px margin:0px auto; margin:0px 150px 0px 230px; margin:0px auto 0px auto; /元素水平 居中对齐 Logo 注意： 1、在给 margin属性设置数值时,若提供4个参 数值,则是按顺时针的顺序作用于上、右、下、 左 4个边;若只提供1个参数值,则将作用于4个边 ;若提供2个参数值,则第1个参数值作用于上、下 两边,第2个参数值作用于左、右两边;若提供3个 参数值,第1个参数值作用于上边,第2个参数值作 用于左、右两边,第3个参数值作用于下边。 Logo Logo 任务4.3 设置盒子填充(padding)

10、（1）设置1个属性值 :如：padding:2px ; （2）设置2个属性值:padding:2px 4px; （3）设置3个属性值:padding:2px 3px 4px; （4）设置4个属性值:padding:3px 6px 4px 8px; 实例 任务4.4 设置盒子边界(margin) （1）设置1个属性值 :如：margin:2px; （2）设置2个属性值:margin:2px 4px; （3）设置3个属性值:margin:2px 3px 4px; （4）设置4个属性值:margin:3px 6px 4px 8px; 实例 任务4.5 文字盒子属性设置(margin) 文字盒子例子 p width:180px;border:2px solid #003366; padding:10px; background:#D1E9FF; margin:10px; text-indent:28px; font-size:13px; 网页上的任何网页元素都看成是CSS盒子，所以 文字元素盒子同样具有CSS盒子的任何属性。 任务4.6 CSS盒子模型计算 6.1 一个CSS盒子实际宽度计算 一个CSS盒子实际宽度=左边界左边框左填充内容