当前位置：文档之家 › 盒子模型PPT课件

盒子模型PPT课件

  • 格式：ppt
  • 大小：3.44 MB
  • 文档页数：44

下载文档原格式

  / 44

合集下载

第12讲 盒子模型

第12讲 盒子模型
21
• 内边距属性及其属性值
属性
属性值
描述
padding padding-top
length|%|inherit
简写属性，用于在一个声明 中设置四个方向的内边距
length|%|inherit 用于设置上内边距
padding-right length|%|inherit 用于设置右内边距
padding-left
– 取3个属性值时，第一个参数设置上边框的颜色，第二个 参数设置左、右边框的颜色，第三个参数设置下边框的 颜色，例如：
border-color: red blue green;
– 边框风格属性取4个属性值时，按顺时针方向依次设置上、 右、下、左边框的颜色，例如：
border-color: red blue green pink;
margin:7px 6px 8px 9px;
12.5 盒子内容的大小
• 盒子内容的大小分别使用width（宽度）和 height（高度）两个属性来设置。
• 盒子的实际大小等于：内容+内边距+外边距+ 边框，所以盒子的大小会随内容的大小增大而增 大。
33
12.6 盒子外边距合并
• 盒子外边距合并指的是默认情况下，两个或更 多个相邻块级元素在垂直外边距相遇时，会将 垂直方向上的两个外边距合并成一个外边距。
义也不一样：
– 取1个属性值时，表示四个方向的内边距一样，例如：
padding: 10px;
– 取2个属性值时，第一个参数设置上、下内边距，第二个 参数设置左、右内边距，例如：
padding:10px 6px;
– 取3个属性值时，第一个参数设置上内边距，第二个参数 设置左、右内边距，第三个参数设置内边距，例如：

纸盒结构 ppt课件

纸盒结构 ppt课件
颖感和美感，刺激消费者选购欲望。
科学合理性：科学性和合理性是设计中的基本原则。科学合理的纸容器，要
求用料少而容量大，重量轻而抗力强，成本低而功能全。
ppt课件
7
纸包装结构设计
ppt课件
8
纸盒
在纸盒包装中最常用的是折叠纸盒和固定纸盒两种。 折叠纸盒的盒型通常可分为三大类：筒型，浅盘型和特殊型。
按制做结构分又有插口或锁口式、粘贴式、组装式折叠盒等。 固定纸盒有：套筒式纸盒、镶装纸盒、衬垫盖纸盒、异形纸盒、抽屉式纸盒、
纸包装分类
一、纸 盒 类 型 二、纸 箱 类 型 三、纸 袋 类 型 四、纸 罐 类 型 五、纸 杯 类 型
ppt课件
5
材料的应用
在纸材料中，常用的制做纸盒的板纸有白板纸、黄板纸和色板 纸三种。在商品包装中，使用涂层白板纸为最多。
在材料选用时，首先应当考虑包装物品的形态，是多水分物品、 湿性物品、液体物品还是固体物品，是高脂肪物品还是冷冻物 品等。必须注意品质保护性、安全性、操作性、方便性、商品 性和流通性事项。另外，还要考虑商品的用途、销售对象和方 式、运输条件等等。
制成并竖立起来，同时也形
成了压合封闭的底座。通过
挤压纸盒上方的面来完成入
口的制作，用力推压顶部的
缝隙可以打开纸盒。镂空展
示格是为符合纸盒正面轮廓
特地划开的。
ppt课件
54
ppt课件
平面图
55
三角内侧手提盒
这种有防震底座的纸袋适用于促销及包装床上用品和服装等。纸袋的强度要求取决于产品，卡纸的厚
度决定纸袋的强度。这既可以作为一级包装，也可以作为二级包装，所使用的材料在很大程度上会影
产 品 损
箱坏
坯，

各种新型纸盒结构大全 ppt课件

各种新型纸盒结构大全 ppt课件
间壁封底式
ppt课件
20
2.盘式纸盒结构
ppt课件
21
盘式纸盒结构的成型方法
• 锁合组装
• 别插组装 • 预粘式组装
ppt课件
22
盘式纸盒结构的成型方法
锁合组装
ppt课件
23
盘式纸盒结构的成型方法
别插组装
ppt课件
24
盘式纸盒结构的成型方法
预粘式组装
ppt课件
25
盘式纸盒的盒盖结构 • 摇盖式 • 连续插别式 • 罩盖式 • 抽屉式
ppt课件
7
管式纸盒盒盖的结构
摇盖插入式
ppt课件
8
管式纸盒盒盖的结构
锁口式
ppt课件
9
管式纸盒盒盖的结构
插锁式
ppt课件
10
管式纸盒盒盖的结构
摇盖双保险插入式
ppt课件
11
管式纸盒盒盖的结构
粘合封口式
ppt课件
12
管式纸盒盒盖的结构
连续摇翼窝进式
ppt课件
13
管式纸盒盒盖的结构
正揿封口式
致的纸盒包装。慧聪网 塑料瓶
ppt课件
32
特殊形态纸盒结构设计
• • • • • • • • •
异型变化 拟态象形 集合式 手提式 开窗式 POP式 吊挂式 易开式 倒出口式
ppt课件
33
异型变化
在常态结构基础上通过一些特殊手法使纸盒结构产生 变化.
ppt课件
34
拟态象形
在包装造型设计上模仿一些自然界生物、植物以及人造物的形态特 征，通过简洁概括的表现手法，使包装形态更具有形象感、生动性 和吸引力。
• 书本式

网页设计与制作说课稿（盒子模型） -完整课件PPT

网页设计与制作说课稿（盒子模型） -完整课件PPT

教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观： 项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社 《网页制作三合一案例教程》
第9章“CSS标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法

《纸盒结构》 ppt课件

《纸盒结构》 ppt课件

特殊形态纸盒结构设计欣赏
2020/3/25
特殊形态纸盒结构设计欣赏
2020/3/25
特殊形态纸盒结构设计欣赏
2020/3/25
特殊形态纸盒结构设计欣赏
2020/3/25
特殊形态纸盒结构设计欣赏
2020/3/25
®纸盒结构设计作品欣赏
2020/3/25
®纸盒结构设计作品欣赏
2020/3/25
2020/3/25
开窗式——通过开窗使消费者直接看到部分商品内容。 开窗式基本制作原则：
（一）不破坏包装结构的牢固性和对商品的保护性。 （二）不影响商品品牌形象的视觉传达。 （三）注意开窗形状与商品露出部分的视觉协调性。
2020/3/25
2020/3/25
• 开窗盒，盖板双层重合密封，在天板上 设一窗口，作展示商品及取出孔使用。
•
（一） 尽量可压平折叠
•
（二） 尽量减少粘接和插接
•
（三） 让其他人试一下，是否能在无指导情况下自行
组装完成。
2020/3/25
特殊形态纸盒结构设计的一些方式表现
• （1）异形 • （2）拟态象形 • （3）集合式 • （4）手提式 • （5）开窗式 • （6）吊挂式 • （7）易开式 • （8）倒出口式
2020/3/25
2020/3/25
手体盒 种类也很多，尤其是食品类包装中更多，它有便于携带等优点。
2020/3/25
2020/3/25
特殊形态纸盒结构设计的一些方式表现
® （1）异形 ® （2）拟态象形 ® （3）集合式 ® （4）手提式 ® （5）开窗式 ® （6）吊挂式 ® （7）易开式 ® （8）倒出口式
2020/3/25

盒子模型详解

盒子模型详解

盒⼦模型详解盒⼦模型盒⼦模型，英⽂即box model。

⽆论是div、span、还是a都是盒⼦。

但是，图⽚、表单元素⼀律看作是⽂本，它们并不是盒⼦。

这个很好理解，⽐如说，⼀张图⽚⾥并不能放东西，它⾃⼰就是⾃⼰的内容。

⼀个盒⼦中主要的属性就5个：width、height、padding、border、margin。

如下：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。

padding：内边距。

border：边框。

margin：外边距。

盒⼦模型的⽰意图：代码演⽰：上⾯这个盒⼦，width:200px; height:200px; 但是真实占有的宽⾼是302*302。

这是因为还要加上padding、border。

注意：宽度和真实占有宽度，不是⼀个概念！来看下⾯这例⼦。

我们⽬前所学习的知识中，以标准盒⼦模型为准。

标准盒⼦模型：IE盒⼦模型：上图显⽰：在 CSS 盒⼦模型 (Box Model) 规定了元素处理元素的⼏种⽅式：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。

padding：内边距。

border：边框。

margin：外边距。

CSS盒模型和IE盒模型的区别：在标准盒⼦模型中，width 和 height 指的是内容区域的宽度和⾼度。

增加内边距、边框和外边距不会影响内容区域的尺⼨，但是会增加元素框的总尺⼨。

IE盒⼦模型中，width 和 height 指的是内容区域+border+padding的宽度和⾼度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你会⼀点Android，应该⽐较好理解吧。

区别在于，Android中没有border这个东西，⽽且在Android中，margin并不是控件的⼀部分，我觉得这样做更合理⼀些，呵呵。

<body>标签有必要强调⼀下。

很多⼈以为<body>标签占据的是整个页⾯的全部区域，其实是错误的，正确的理解是这样的：整个⽹页最⼤的盒⼦是<document>，即浏览器。

设计制作长方体形状的包装纸盒PPT优秀课件

设计制作长方体形状的包装纸盒PPT优秀课件
本课提要
本节课重点是通过一个具体的数学实践活动， 设计制作长方体形状的包装纸盒，进一步丰富同学 们对现实空间及图形的认识.“技能训练”的题目的 设置目的是使同学们通过练习进一步熟练掌握立体 图形与平面图形有关知识以及它们之间的关系； “拓展应用”栏目中的几个题目重点在于培养同学 们动手实践能力和发展同学们的推理能力.
（1）、（3）、（6）为同一个正方体的表面展开图； （2）、（4）、（5）为同一个正方体的表面展开图．
11．下面四个图形均由六个相同的小正方形组成，折 叠后能围成正方体的是（ C ）．
点此播放教学视频
【问题 2】如图 1 所示，从长为 13cm，宽为 9cm 的长方形硬纸板的四角去掉棱长为 2cm 的正方形， 然后沿虚线折成长方体容器，求这个容器的体积.
90（cm3）
技能训练
4．正方体有 6 个面， 8 个顶点，经过每个顶 点有 3 条棱，这些棱的长度 相同 （填“相同” 或“不同”）；棱长为a cm 的正方体的表面积为 6a2 cm2．）
A．8
B．6
C．5
D．4
2．将一个无底无盖的圆柱的剪开得到一个长方 形，其中圆柱的 底面周长 等于长方形的一个边 长，长方形的另一边长等于 圆柱的高 .
3．将一个无底无盖的长方体沿一条棱剪开得到的平面 图形是什么图形？
长方形
点此播放教学视频
典型问题
【问题 1】下图中的图形不能围成一个长方体的 是（ D ）.
拓展应用
7．把图 4 中的图形折叠起来，它会变为（ B ）．
点此播放动画视频
8．把如图 5 所示的图案折起来组成一个立方体，哪一 个数字会在与 5 所在的平面相对的平面上？
（1）与5所在的平面相对的平面是4， （2）与5所在在平面相对的平面是2．

常用纸盒结构讲解22页PPT

常用纸盒结构讲解22页PPT
6、法律的基础有两个，而且只有两个……公平和实用。——伯克 7、有两种和平的暴力，那就是法律和礼节。——歌德
8、法律就是秩序，有好的法律才有好的秩序。——亚里士多德 9、上帝把法律和公平凑合在一起，可是人类却把它拆开。——查·科尔顿 10、一切法律都是无用的，因为好人用不着它们，而坏人又不会因为它们而变得规矩起来。——德谟耶克斯
常用纸盒结构讲解
21、要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒。——培根 22、业精于勤，荒于嬉；行成于思，毁于随。——韩愈
23、一切节省，归根到底都归结为时间的节省。——马克思 24、意志命运往往背道而驰，决心到最后会全部推倒。——莎士比亚
25、学习是劳动，是

第10讲CSS盒子模型PPT课件

第10讲CSS盒子模型PPT课件
13
对盒子模型的思考
边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的 ，我们只能看到他们对元素的影响
盒子模型中只能设置两类颜色，即边框颜色和背景颜色 盒子模型可设置三类距离，即边界距离margin，填充距离padding和边
框值border
14
属性值的简写形式
方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义 将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框 的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右 边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时 针排序。
margin-right border-right padding-right
padding-left
border-left
margin-left
margin-top border-top padding-top
content
padding-bottom border-bottom margin-bottom
1
回顾
CSS中背景属性的缩写格式如何编写？ CSS中如何实现图片代替文本？ 滑动门技术一般运用在什么地方？如何实现
2
本讲目标
初步了解盒子模型的定义 掌握盒子模型的特性 掌握盒子的定位 了解盒子的margin叠加问题 掌握盒子的浮动 使用盒子模型进行页面布局
3
新知识导入：CSS的盒子模型
width
7
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋ 右边框＋右边界
8
IEE删除后，IE 6对网页的解释会进入quirk（怪异 ）模式，此时盒子的宽度等于左边界＋宽度＋右边界

盒子模型及布局PPT课件

盒子模型及布局PPT课件
background
属性
背景颜色可使用预定义的颜色值、十六进制#RRGGBB 或RGB代码rgb(r,g,b)设置
实现背景图像的设置
背景图像平铺。repeat：平铺（默认值）；no-repeat： 不平铺；repeat-x：水平平铺；repeat-y：竖直方向平铺
设置背景图像的位置
设置背景图像固定，其属性值如下：scroll：图像随页面 元素一起滚动（默认值）；fixed：图像固定在屏幕上， 不随页面元素滚动
Web前端开发
河南省骨干教师培训
• 2.3 外边距属性
– margin属性用于设置外边距，也是复合属性，相关设置如下：
margin-top:上外边距
• margin相关属性的值，以及复合
margin-right:右外边距
属性margin取1~4个值的情况与
margin-bottom:下外边距 margin-left:上外边距
.header{ width:960px; margin:0 auto;}
– 为了更方便地控制网页中的元素，制作网页时，可使用如下代码清 除元素的默认内外边距：
*{
padding:0; /*清除内边距*/
margin:0;
/*清除外边距*/
}
2 盒子模型相关属性
Web前端开发
河南省骨干教师培训
• 2.3 外边距属性
2 盒子模型相关属性
Web前端开发
河南省骨干教师培训
• 2.1 边框属性—综合设置边框
– CSS提供了更简单的边框设置方式：
border-top:上边框宽度 样式 颜色
该设置方式中，宽度、样式、颜
border-right:右边框宽度 样式 颜色 色顺序任意，不分先后，可以只

韦斯伯德六盒模型(六个盒子)详解PPT课件

韦斯伯德六盒模型(六个盒子)详解PPT课件
2
六盒模型是什么？
输入
我们如何协调？
盒子5 支持/帮助
我们为谁创造什么价值？
盒子1 使命/目标
我们如何保持整体平衡？
盒子6 领导/管理
我们如何分工？
盒子2 组织/结构
输出
盒子4 回报/激励
盒子3 关系/流程
我们如何激发动力？
我们如何协作？
组织所处在的内外部环境
3
六盒模型可以用来干什么？
组织诊断工具
如何评价： 1、流程和关系是否清晰和明确？流程不顺畅的原因是什么？ 2、组织冲突和制约是否是良性的？如何更好的解决冲突？ 3、部门之间，人与人之间的沟通是否是顺畅的，氛围是否是和谐的？ 4、流程和关系是否是高效的？
盒子3 关系/流程
8
盒子4：回报/激励 - 我们如何激发动力？
主要内容： 1、如何激发员工工作的动力？ 2、现有哪些激励手段？形式是怎么样的？ 3、现有激励手段达成了什么样的效果？
如何评价： 1、支持和帮助体系是否是清晰和明确的？ 2、支持和帮助体系是否是有效的？是否是在正常运转？ 3、获得支持和帮助的渠道是否是通畅的？
盒子5 支持/帮助
10
盒子6：领导/管理 - 我们如何保持整体平衡？
主要内容： 1、现有的管理团队是怎样一个团队？ 2、现有的管理水平和管理效率如何？ 3、领导获取其他几个盒子状况的渠道和方法有哪些？ 4、现有的领导风格和管理风格是什么样的？ 5、组织需要什么样的领导和管理能力？
该模型是一种观察组织结构和组织设计的具体方式。它注重诸如规划，激励和回报，人员等支助功能，内部竞争，薪酬标 准，伙伴关系，等级制度和权力下放，组织控制，问责制和绩效评估等职能。该模型还遵循组织功能的基本“系统”方法，包 括众所周知的输入和“输出”等。

纸盒结构教案精品PPT课件

纸盒结构教案精品PPT课件

平面图
思考题：
1．纸包装结构设计有哪些要求? 2．纸箱结构设计要注意哪些问题?
作业题：
1．临摹制作通用的纸盒结构数个。 2．设计异型折叠式纸盒2个，附使用说明。 3．设计陈列式纸盒结构2个，附具体产品展示效果
作业要求：
有针对性，有特点，方便使用、省材料、简练大方，结构合理等。
结束语
当你尽了自己的最大努力时，失败也是伟大的， 所以不要放弃，坚持就是正确的。
盘的折痕使它可以被压平和叠起;只要将四面拉起,托盘会自己竖立.
平面图
单件四角上胶 盒盖 和 底盘
这是有内折内壁的纸盒,一面与盒盖相连.它的简单造型显示了另一种折叠/封口的样式.当纸盒被完全打开,便 形成了一个有边展开的托盘.作为闭合的纸盒,它快速且有效的容器结构使它使用于快餐业------对于这种特殊
When You Do Your Best, Failure Is Great, So Don'T Give Up, Stick To The End
感谢聆听
不足之处请大家批评指导
Please Criticize And Guide The Shortcomings
演讲人：XXXXXX 时 间：XX年XX月XX日
应用,需采用防油、防潮的卡纸.
平面图
被隔开的托盘
这种实用的纸盒可安全地盛放两个以上的瓶子,或类似的直立物品,它的平整表面也为销售点的图案或促销提 供实用场所.纸盒的高度取决于所放产品的高度和排列,另外,产品上的印刷图案不能被纸盒遮住.纸盒中间的 横栏有效的隔开产品,防止它们相互碰撞,同时也为纸盒起到支撑加固的作用.
平面图
拉条纸盒
纸盒上拉条的普 遍应用是为防止 胡乱摆弄,因为撕 开纸条的开启方 式是一次性的.为 保证拉条的使用, 所有的盖口必须 黏合或封闭,以免 通过其他途径取 出产品.拉条设计 可应用于许多不 同种类的纸盒

纸盒包装结构培训教材实用PPT(41张)

纸盒包装结构培训教材实用PPT(41张)

►
5.区别在于，注重内心生活的人善于 把外部 生活的 收获变 成心灵 的财富 ，缺乏 此种禀 赋或习 惯的人 则往往 会迷失 在外部 生活中 ，人整 个儿是 散的。 外面的 世界布 满了纵 横交错 的路， 每一条 都通往 不同的 地点
►
6.如果一个人有自己的心灵追求，又 在世界 上闯荡 了一番 ，有了 相当的 人生阅 历，那 么，他 就会逐 渐认识 到自己 在这个 世界上 的位置 。世界 无限广 阔，诱 惑永无 止境， 然而， 属于每 一个人 的现实 可能性 终究是 有限的 。
►
7.一个人不论伟大还是平凡，只要他 顺应自 己的天 性，找 到了自 己真正 喜欢做 的有意 义的事 ，并且 一心把 它做得 尽善尽 美，他 在这个 世界上 就有了 牢不可 破的家 园。
►
8.于是，他不但会有足够的勇气去承 受外界 的压力 ，而且 会以足 够的清 醒来面 对形形 色色的 机会的 诱惑。 我们当 然没有 理由怀 疑，这 样的一 个人必 能获得 生活的 充实和 心灵的 宁静。
►
3.寻求心灵的宁静，前提是首先要有 一个心 灵。在 理论上 ，人人 都有一 个心灵 ，但事 实上却 不尽然 。有一 些人， 他们永 远被外 界的力 量左右 着，永 远生活 在喧闹 的外部 世界里 ，未尝 有真正 的内心 生活。
►
4.对于这样的人，心灵的宁静就无从 谈起。 一个人 唯有关 注心灵 ，才会 因为心 灵被扰 乱而不 安，才 会有寻 求心灵 宁静的 需要。 所以， 具有过 内心生 活的禀 赋，或 者养成 这样的 习惯， 这是最 重要的 。
托盘式结构：
B、套盖盒（又称天地盖） 多用于高档商品及礼盒上
C、开窗式
最大特点将内容物或内包装直 接展示出来。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

语法规则
说明
border-top-style:solid;
上边框为实线
border-right-style:solid; 右边框为实线
border-bottom-style:solid; 下边框为实线
border-left-style:solid;
左边框为实线
2020/1/11
16
边框样式
同时设置4条边框 设置方法与边框颜色相同
元素内容：盒子内的物品
2020/1/11
盒子模型
边框
内边距
元素内容
外边距
6
盒子模型的平面结构图
盒子模型
2020/1/11
7
盒子模型的三维立体结构图
第四层
第二层
盒子模型
第一层
第五层
第三层
2020/1/11
8
边框（border）
用于分隔不同元素
会占据空间
有4条边框
盒子模型有
4条边框
第四章 盒子模型
2020/1/11
1
回顾与检查
字体大小可以使用什么属性设置？ 设置CSS伪类时，应该注意什么？ 如何使<div>中的单行文字垂直居中对齐？
2020/1/11
2
腾讯首页--产品类别 导航
今日淘宝活动 QQ炫舞特色右边栏 腾讯拍拍--热卖专栏 QQ摄影俱乐部
2020/1/11
10
边框属性
边框颜色
同时设置4条边框
属性
语法规则
说明
border-color:#369;
设置4条边框为同一 颜色
border-color:#369 #000;
上、下边框为#369 左、右边框为#000
上边框为#369
border-color
border-color:#369 #000 red;
border-right-color border-right-color:#369; 设置右边框颜色
border-bottom-color border-bottom-color:#369; 设置下边框颜色
border-left-color
border-left-color:#369;
设置左边框颜色
2020/1/11
本章任务
3
本章目标
会使用盒子属性border、padding、 margin美化网页元素
会精确计算盒子模型尺寸 会使用display属性进行块级元素与行内元
素的互相转换
2020/1/11
4
盒子模型（Box Model）
实现页面布局的基础 与生活中的盒子相似
纸壳 填充部分
上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗细为2px
2020/1/11
14
边框样式
边框属性
属性值：关键字
属性值 none
hidden
dotted Βιβλιοθήκη ashed solid double groove ridge inset outset
inherit
2020/1/11
定义3D inset边框，其效果取决于border-color的值
定义3D outset边框，其效果取决于border-color的值
规定应该从父元素继承边框样式。任何IE浏览器版本
都不支持，不推荐使用。
15
边框样式
分别设置4条边框 设置方法与边框颜色相同
边框属性
属性 border-top-style border-right-style border-bottom-style border-left-style
边框属性
属性
语法规则
说明
border-width
border-width:5px; border-width:20px 2px; border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
4条边框粗细均为5px
上、下边框粗细为20px 左、右边框粗细为2px 上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px
上
边框属性
具有宽度， 占据空间
左
2020/1/11
右
元素内容与外边 距的分界线
下
盒子模型可以没有 边框，此时边框宽
度为0
9
边框属性
边框颜色
分别设置4条边框
属性
语法规则
属性值取值与
color属性相 同
说明
border-top-color
border-top-color:#369;
设置上边框颜色
说明 定义细的边框 默认。定义中等的边框 定义粗的边框 允许自定义边框的宽度，如5px、0.1in等 规定应该从父元素继承边框宽度
2020/1/11
12
边框粗细
分别设置4条边框 设置方法与边框颜色相同
边框属性
属性 border-top-width border-right-width
语法规则 border-top-width:5px; border-right-width:10px;
说明
定义无边框
与“none”相同，不过应用于表格时除外，对于表格， hidden用于解决边框冲突
定义点状边框。在大多浏览器中呈现为实线
定义虚线。在大多浏览器中呈现为实线
定义实线
定义双线。双线的宽度等于border-width的值
定义3D凹槽边框，其效果取决于border-color的值
定义3D垄状边框，其效果取决于border-color的值
盒内物品
纸壳外围 间隙
盒子模型
2020/1/11
5
盒子模型（Box Model）
包含以下属性：
边框（border）：对应包 装盒的纸壳，具有一定的厚 度
内边距（padding）：位 于边框内部，是内容与边框 的距离，对应包装盒的填充 部分
外边距（margin）：位于 边框外部，是边框外面周围 的间隙，对应纸壳外围间隙
左、右边框为#000
按顺时针方向上、
下边框为red
右、下、左的顺
上边框为#369
序设置4边颜色
右边框为#000
border-color:#369 #000 red blue; 下边框为red
左边框为blue
2020/1/11
11
边框粗细
属性值：关键字、数值
边框属性
属性值 thin medium thick length inherit
说明 上边框粗细为5px 右边框粗细为10px
border-bottom-width border-bottom-width:8px; 下边框粗细为8px
border-left-width
border-left-width:22px;
左边框粗细为22px
2020/1/11
13
边框粗细
同时设置4条边框 设置方法与边框颜色相同