盒子模型课件.pptxVIP

第四章盒子模型 2023/10/15 1 回顾与检查 字体大小可以使用什么属性设置? 设置CSS 伪类时，应该注意什么? 如何使div 中的单行文字垂直居中对齐? 回 顾 与 检 查 2023/10/15 2 腾讯首页--产品类别 导航 今日淘宝活动 QQ 炫舞特色右边栏 腾讯拍拍--热卖专栏 QQ 摄影俱乐部 收藏夹 通信 社区 休闲 竞技 网游 手机 生活 本章任务 2023/10/15 本章目标 会使用盒子属性border、padding、 margin 美化网页元素 会精确计算盒子模型尺寸 会使用display 素的互相转换 属性进行块级元素与行内元 2023/10/15 4 盒子模型 盒子模型 (Box Model) →实现页面布局的基础 →与生活中的盒子相似 纸壳 填充部分 纸壳外围 间隙 盒内物品 2023 /10 /15 盒子模型 (Box Model) →包含以下属性： ● 边框 (border): 对应包 装盒的纸壳，具有一定的厚 度 ● 内边距 (padding): 位 于边框内部，是内容与边框 的距离，对应包装盒的填充 部分 ● 外边距 (margin): 位于 边框外部，是边框外面周围 的间隙，对应纸壳外围间隙 ● 元素内容：盒子内的物品 外 边 距 盒子下方的内容. 2023/10/15 6 盒子模型 元素内容 内边距 边框 盒子上方 盒子模型的平面结构图 border (边框) margin (外边距) padding (内边距) 2023/10/15 7 盒子模型 element (元素) height (高度) width (宽度) 盒子模型的三维立体结构图 CSS2.0盒模型层次3D 示意图 第二层 第四层 第三层 padding background-image background-color marain 2023/10/15 盒子模型 content border 第五层 第一层 透明元素 8 边框 (border) →用于分隔不同元素 →会占据空间 →有4条边框 盒子模型有 4条边框 margin 上 padding H 山 content 元素内容与外边 距的分界线 下 2023/10/15 盒子模型可以没有 边框，此时边框宽 度为0 9 边框属性 具有宽度， 占据空间 属性 语法规则 属性值取值与 color属性相 同 border-top-color border-top-color:#369; 设置上边框颜色 border-right-co lo r border-right-color:#369; 设置右边框颜色 border-bottom-color border-bottom-color:#369; 设置下边框颜色 border-le ft-co lo r border-left-color:#369; 设置左边框颜色 边框属性 边框颜色 →分别设置4条边框 2023/10/15 10 说明 属性 语法规则 说明 border-col or border-color:#369; 设置4条边框为同一 颜色 border-color:#369 #000; 上、下边框为#369 左、右边框为#000 border-color:#369 #000 red; 上边框为#369 左、右边框为#000