语法规则
说明
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条边框 设置方法与边框颜色相同