第4章盒子模型.pptxVIP

第四章 盒子模型 • 盒子模型的概念 • 元素的类型 • 盒子相关属性 • 元素的转换 让IT教学更简单 ， 让IT学习更有效 4.4 块元素垂直外边距的合并 阶段案例—制作音乐盒 4.2 盒子模型相关属性 元素的类型与转换 让IT教学更简单 ， 让IT学习更有效 认识盒子模型 目录 所谓盒子模型就是把HTML页面中的元素看作是 一个矩形的盒子 ， 也就是一个盛装内容的容器。 每个矩形都由元素的内容 、 内边距（ padding） 、边框（border ）和外边距（margin ）组成。 4. 1 认识盒子模型 • 盒子模型的概念 让IT教学更简单 ， 让IT学习更有效 如果把手机想象成HTML元素 ， 那么 手机盒子就是一个CSS盒子模型， 其中手机为CSS盒子模型的内容， 填充泡沫的厚度为CSS盒子模型的 内边距 ， 纸盒的厚度为CSS盒子模 型的边框。 以手机盒子为例 ， 更形象地认识CSS盒子模型 4. 1 认识盒子模型 让IT教学更简单 ， 让IT学习更有效 多个手机盒子放在一起时 ， 它们之间的距离就是CSS盒子模型的外边距。 4. 1 认识盒子模型 让IT教学更简单 ， 让IT学习更有效 结论： – 网页就是多个盒子嵌套排列的结果。 – 内边距出现在内容区域的周围 ， 当给元素添加背景色或背景图像时 , 该元素的背景色