会精确计算盒子模型尺寸 会使用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
边框粗细
属性值：关键字、数值
边框属性
