盒子模型ppt课件
合集下载
第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个属性值时，第一个参数设置上内边距，第二个参数 设置左、右内边距，第三个参数设置内边距，例如：
• 内边距属性及其属性值
属性
属性值
描述
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课件
7
纸包装结构设计
ppt课件
8
纸盒
在纸盒包装中最常用的是折叠纸盒和固定纸盒两种。 折叠纸盒的盒型通常可分为三大类：筒型，浅盘型和特殊型。
按制做结构分又有插口或锁口式、粘贴式、组装式折叠盒等。 固定纸盒有：套筒式纸盒、镶装纸盒、衬垫盖纸盒、异形纸盒、抽屉式纸盒、
纸包装分类
一、纸 盒 类 型 二、纸 箱 类 型 三、纸 袋 类 型 四、纸 罐 类 型 五、纸 杯 类 型
ppt课件
5
材料的应用
在纸材料中，常用的制做纸盒的板纸有白板纸、黄板纸和色板 纸三种。在商品包装中，使用涂层白板纸为最多。
在材料选用时，首先应当考虑包装物品的形态，是多水分物品、 湿性物品、液体物品还是固体物品，是高脂肪物品还是冷冻物 品等。必须注意品质保护性、安全性、操作性、方便性、商品 性和流通性事项。另外，还要考虑商品的用途、销售对象和方 式、运输条件等等。
制成并竖立起来，同时也形
成了压合封闭的底座。通过
挤压纸盒上方的面来完成入
口的制作，用力推压顶部的
缝隙可以打开纸盒。镂空展
示格是为符合纸盒正面轮廓
特地划开的。
ppt课件
54
ppt课件
平面图
55
三角内侧手提盒
这种有防震底座的纸袋适用于促销及包装床上用品和服装等。纸袋的强度要求取决于产品，卡纸的厚
度决定纸袋的强度。这既可以作为一级包装，也可以作为二级包装，所使用的材料在很大程度上会影
产 品 损
箱坏
坯，
科学合理性：科学性和合理性是设计中的基本原则。科学合理的纸容器，要
求用料少而容量大，重量轻而抗力强，成本低而功能全。
ppt课件
7
纸包装结构设计
ppt课件
8
纸盒
在纸盒包装中最常用的是折叠纸盒和固定纸盒两种。 折叠纸盒的盒型通常可分为三大类：筒型，浅盘型和特殊型。
按制做结构分又有插口或锁口式、粘贴式、组装式折叠盒等。 固定纸盒有：套筒式纸盒、镶装纸盒、衬垫盖纸盒、异形纸盒、抽屉式纸盒、
纸包装分类
一、纸 盒 类 型 二、纸 箱 类 型 三、纸 袋 类 型 四、纸 罐 类 型 五、纸 杯 类 型
ppt课件
5
材料的应用
在纸材料中，常用的制做纸盒的板纸有白板纸、黄板纸和色板 纸三种。在商品包装中，使用涂层白板纸为最多。
在材料选用时，首先应当考虑包装物品的形态，是多水分物品、 湿性物品、液体物品还是固体物品，是高脂肪物品还是冷冻物 品等。必须注意品质保护性、安全性、操作性、方便性、商品 性和流通性事项。另外，还要考虑商品的用途、销售对象和方 式、运输条件等等。
制成并竖立起来，同时也形
成了压合封闭的底座。通过
挤压纸盒上方的面来完成入
口的制作，用力推压顶部的
缝隙可以打开纸盒。镂空展
示格是为符合纸盒正面轮廓
特地划开的。
ppt课件
54
ppt课件
平面图
55
三角内侧手提盒
这种有防震底座的纸袋适用于促销及包装床上用品和服装等。纸袋的强度要求取决于产品，卡纸的厚
度决定纸袋的强度。这既可以作为一级包装，也可以作为二级包装，所使用的材料在很大程度上会影
产 品 损
箱坏
坯，
各种新型纸盒结构大全 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课件
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
教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观： 项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社 《网页制作三合一案例教程》
第9章“CSS标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法
《纸盒结构》 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优秀课件
本课提要
本节课重点是通过一个具体的数学实践活动， 设计制作长方体形状的包装纸盒，进一步丰富同学 们对现实空间及图形的认识.“技能训练”的题目的 设置目的是使同学们通过练习进一步熟练掌握立体 图形与平面图形有关知识以及它们之间的关系； “拓展应用”栏目中的几个题目重点在于培养同学 们动手实践能力和发展同学们的推理能力.
（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．
本节课重点是通过一个具体的数学实践活动， 设计制作长方体形状的包装纸盒，进一步丰富同学 们对现实空间及图形的认识.“技能训练”的题目的 设置目的是使同学们通过练习进一步熟练掌握立体 图形与平面图形有关知识以及它们之间的关系； “拓展应用”栏目中的几个题目重点在于培养同学 们动手实践能力和发展同学们的推理能力.
（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．
第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（怪异 ）模式，此时盒子的宽度等于左边界＋宽度＋右边界
对盒子模型的思考
边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的 ，我们只能看到他们对元素的影响
盒子模型中只能设置两类颜色，即边框颜色和背景颜色 盒子模型可设置三类距离，即边界距离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（怪异 ）模式，此时盒子的宽度等于左边界＋宽度＋右边界
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
会精确计算盒子模型尺寸 会使用display属性进行块级元素与行内元
素的互相转换
盒子模型（Box Model）
实现页面布局的基础 与生活中的盒子相似
纸壳 填充部分
盒内物品
纸壳外围 间隙
盒子模型
盒子模型（Box Model）
包含以下属性：
边框（border）：对应包 装盒的纸壳，具有一定的厚 度
第四章 盒子模型
回顾与检查
字体大小可以使用什么属性设置？ 设置CSS伪类时，应该注意什么？ 如何使<div>中的单行文字垂直居中对齐？
腾讯首页--产品类别 导航
今日淘宝活动 QQ炫舞特色右边栏 腾讯拍拍--热卖专栏 QQ摄影俱乐部
本章任务
本章目标
会使用盒子属性border、padding、 margin美化网页元素
边框粗细
同时设置4条边框 设置方法与边框颜色相同
边框属性
属性
语法规则
说明
border-width
border-width:5px; border-width:20px 2px; border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
4条边框粗细均为5px
边框样式
分别设置4条边框 设置方法与边框颜色相同
边框属性
属性 border-top-style border-right-style border-bottom-style border-left-style
语法规则
说明
border-top-style:solid;
上边框为实线
border-right-style:solid; 右边框为实线
语法规则
说明
border-top-width:5px;
上边框粗细为5px
border-right-width:10px; 右边框粗细为10px
border-bottom-width:8px; 下边框粗细为8px
border-left-width
border-left-width:22px;
左边框粗细为22px
border-left-color:#369;
设置左边框颜色
边框属性
边框颜色
同时设置4条边框
属性
语法规则
说明
border-cபைடு நூலகம்lor:#369;
设置4条边框为同一 颜色
border-color:#369 #000;
上、下边框为#369 左、右边框为#000
上边框为#369
border-color
inherit
说明
定义无边框 与“none”相同，不过应用于表格时除外，对于表格， hidden用于解决边框冲突 定义点状边框。在大多浏览器中呈现为实线 定义虚线。在大多浏览器中呈现为实线 定义实线 定义双线。双线的宽度等于border-width的值 定义3D凹槽边框，其效果取决于border-color的值 定义3D垄状边框，其效果取决于border-color的值 定义3D inset边框，其效果取决于border-color的值 定义3D outset边框，其效果取决于border-color的值 规定应该从父元素继承边框样式。任何IE浏览器版本 都不支持，不推荐使用。
上、下边框粗细为20px 左、右边框粗细为2px
上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px 上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗细为2px
边框样式
边框属性
属性值：关键字
属性值 none
hidden
dotted dashed solid double groove ridge inset outset
border-bottom-style:solid; 下边框为实线
border-left-style:solid;
左边框为实线
边框样式
同时设置4条边框 设置方法与边框颜色相同
属性
语法规则 border-style:solid;
border-style:solid dotted;
border-style border-style:solid dotted dashed;
属性值 thin medium thick length inherit
说明 定义细的边框 默认。定义中等的边框 定义粗的边框 允许自定义边框的宽度，如5px、0.1in等 规定应该从父元素继承边框宽度
边框粗细
分别设置4条边框 设置方法与边框颜色相同
边框属性
属性 border-top-width border-right-width border-bottom-width
border-style:solid dotted dashed double;
border-top-color
border-top-color:#369;
设置上边框颜色
border-right-color border-right-color:#369; 设置右边框颜色
border-bottom-color border-bottom-color:#369; 设置下边框颜色
border-left-color
内边距（padding）：位于 边框内部，是内容与边框的 距离，对应包装盒的填充部 分
外边距（margin）：位于 边框外部，是边框外面周围 的间隙，对应纸壳外围间隙
元素内容：盒子内的物品
盒子模型
边框
内边距
元素内容
外边距
盒子模型的平面结构图
盒子模型
盒子模型的三维立体结构图
第四层
第二层
盒子模型
第一层
第五层
第三层
边框（border）
用于分隔不同元素
会占据空间
有4条边框
盒子模型有
4条边框
上
边框属性
具有宽度， 占据空间
左
右
元素内容与外边 距的分界线
下
盒子模型可以没有 边框，此时边框宽
度为0
边框属性
边框颜色
分别设置4条边框
属性
语法规则
属性值取值与 color属性相同 说 明
border-color:#369 #000 red;
左、右边框为#000
按顺时针方向上、
下边框为red
右、下、左的顺
上边框为#369
序设置4边颜色
右边框为#000
border-color:#369 #000 red blue; 下边框为red
左边框为blue
边框粗细
属性值：关键字、数值
边框属性
素的互相转换
盒子模型（Box Model）
实现页面布局的基础 与生活中的盒子相似
纸壳 填充部分
盒内物品
纸壳外围 间隙
盒子模型
盒子模型（Box Model）
包含以下属性：
边框（border）：对应包 装盒的纸壳，具有一定的厚 度
第四章 盒子模型
回顾与检查
字体大小可以使用什么属性设置？ 设置CSS伪类时，应该注意什么？ 如何使<div>中的单行文字垂直居中对齐？
腾讯首页--产品类别 导航
今日淘宝活动 QQ炫舞特色右边栏 腾讯拍拍--热卖专栏 QQ摄影俱乐部
本章任务
本章目标
会使用盒子属性border、padding、 margin美化网页元素
边框粗细
同时设置4条边框 设置方法与边框颜色相同
边框属性
属性
语法规则
说明
border-width
border-width:5px; border-width:20px 2px; border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
4条边框粗细均为5px
边框样式
分别设置4条边框 设置方法与边框颜色相同
边框属性
属性 border-top-style border-right-style border-bottom-style border-left-style
语法规则
说明
border-top-style:solid;
上边框为实线
border-right-style:solid; 右边框为实线
语法规则
说明
border-top-width:5px;
上边框粗细为5px
border-right-width:10px; 右边框粗细为10px
border-bottom-width:8px; 下边框粗细为8px
border-left-width
border-left-width:22px;
左边框粗细为22px
border-left-color:#369;
设置左边框颜色
边框属性
边框颜色
同时设置4条边框
属性
语法规则
说明
border-cபைடு நூலகம்lor:#369;
设置4条边框为同一 颜色
border-color:#369 #000;
上、下边框为#369 左、右边框为#000
上边框为#369
border-color
inherit
说明
定义无边框 与“none”相同，不过应用于表格时除外，对于表格， hidden用于解决边框冲突 定义点状边框。在大多浏览器中呈现为实线 定义虚线。在大多浏览器中呈现为实线 定义实线 定义双线。双线的宽度等于border-width的值 定义3D凹槽边框，其效果取决于border-color的值 定义3D垄状边框，其效果取决于border-color的值 定义3D inset边框，其效果取决于border-color的值 定义3D outset边框，其效果取决于border-color的值 规定应该从父元素继承边框样式。任何IE浏览器版本 都不支持，不推荐使用。
上、下边框粗细为20px 左、右边框粗细为2px
上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px 上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗细为2px
边框样式
边框属性
属性值：关键字
属性值 none
hidden
dotted dashed solid double groove ridge inset outset
border-bottom-style:solid; 下边框为实线
border-left-style:solid;
左边框为实线
边框样式
同时设置4条边框 设置方法与边框颜色相同
属性
语法规则 border-style:solid;
border-style:solid dotted;
border-style border-style:solid dotted dashed;
属性值 thin medium thick length inherit
说明 定义细的边框 默认。定义中等的边框 定义粗的边框 允许自定义边框的宽度，如5px、0.1in等 规定应该从父元素继承边框宽度
边框粗细
分别设置4条边框 设置方法与边框颜色相同
边框属性
属性 border-top-width border-right-width border-bottom-width
border-style:solid dotted dashed double;
border-top-color
border-top-color:#369;
设置上边框颜色
border-right-color border-right-color:#369; 设置右边框颜色
border-bottom-color border-bottom-color:#369; 设置下边框颜色
border-left-color
内边距（padding）：位于 边框内部，是内容与边框的 距离，对应包装盒的填充部 分
外边距（margin）：位于 边框外部，是边框外面周围 的间隙，对应纸壳外围间隙
元素内容：盒子内的物品
盒子模型
边框
内边距
元素内容
外边距
盒子模型的平面结构图
盒子模型
盒子模型的三维立体结构图
第四层
第二层
盒子模型
第一层
第五层
第三层
边框（border）
用于分隔不同元素
会占据空间
有4条边框
盒子模型有
4条边框
上
边框属性
具有宽度， 占据空间
左
右
元素内容与外边 距的分界线
下
盒子模型可以没有 边框，此时边框宽
度为0
边框属性
边框颜色
分别设置4条边框
属性
语法规则
属性值取值与 color属性相同 说 明
border-color:#369 #000 red;
左、右边框为#000
按顺时针方向上、
下边框为red
右、下、左的顺
上边框为#369
序设置4边颜色
右边框为#000
border-color:#369 #000 red blue; 下边框为red
左边框为blue
边框粗细
属性值：关键字、数值
边框属性