1、第4章盒子模型1 1 考核知识点考核知识点盒子模型、边框属性、内外边距属性、标记、标签、块元素和行内元素等知识点。2 2 练习目标练习目标掌握盒子模型的边框属性、内边距属性、外边距属性。灵活运用边框的复合属性。熟练使用内边距控制盒子内容的位置。熟悉一行文本在一个盒子中垂直居中的方法。掌握元素的分类。掌握标签的应用。实验实验1 1 潮流新品宝贝展示潮流新品宝贝展示请做出以下效果：要求：（1）给最外层的大盒子指定宽为350px;高为540px;，并为其设置单实线型宽为1px颜色为#0CC的边框。（2）大标题“潮流新品”，字大小为:18px，颜色为白色，在宽85px高30px底色为#09F的盒中居中
2、显示。（3）给定的“汽车”图的宽高均为350px。（4）小标题“Strati 3D打印汽车”，字体为“微软雅黑 Light”，字号20px。（5）价格“1999.00”，字号22px，颜色为#F00，字型加粗。（6）“3D打印”、“修复成本低”，字颜色#09F，在边框线为单实线型宽1px色#09F的盒中居中显示。3 3 实验内容及要求实验内容及要求实验实验1 1 潮流潮流新品宝贝展示新品宝贝展示结构分析：页面由标题、图片和说明内容组成，所有内容都包在一个盒子中，盒子用标签定义，标题用、标签定义，图片由标签定义，说明内容用标签定义，设置特殊效果的内容用定义。样式分析：（1）通过进行整体控制，需要
3、对其设置宽度、高度及边框边距样式。（2）、标签定义的元素都是块级元素，可以对其设置高度、宽度、边框、内外边距、背景，实现布局和效果的设置。（3）标签定义的元素是行内元素，可以设置边框、内边距、左右边距，实现行内元素布局和效果的设置。（4）文字效果按要求设置样式即可。4 4 实验分析实验分析实验实验1 1 潮流潮流新品宝贝展示新品宝贝展示1 1 考核知识点考核知识点盒子模型、边框属性、内外边距属性、背景设置、盒子模型布局。2 2 练习目标练习目标掌握盒子模型的边框属性、内边距属性、外边距属性、背景的设置。灵活运用背景的复合属性，掌握调整背景图像位置的方法。熟悉盒子的嵌套使用。灵活运用盒子属性进行
4、布局，使用内边距控制盒子中内容的位置，使用外边距控制盒子的位置。实验实验2 2 酷酷车车e e族宝贝族宝贝展示展示请做出以下效果：要求：（1）利用盒子模型布局。（2）展示区域的大小高宽均为500px，用给定的自行车图片(bicycles.png)做背景。（3）所有的文字内容部分都右对齐。（4）展示区域的边框色为#0CC，标题文字的大小分别为26px、36px，价格的红色文字加粗大小为40px。3 3 实验内容及要求实验内容及要求实验实验2 2 酷酷车车e e族宝贝族宝贝展示展示结构分析：整体由两大部分组成，图片和说明文字内容，所有内容都包在展示区域的大盒子中，图片做为大盒子的背景，所有文字内容
5、放在嵌套在大盒的另一个盒子中，文字内容有两个标题，用标签定义,另外两行内容用段落标签定义，价格设置有突出显示的效果用标签定义。样式分析：图片做为盒子的背景，在盒子底部水平居中显示，用背景的复合属性进行设置（background:url(bicycles.png)no-repeat center bottom;），内容区域的盒子（宽235px高190px）通过左外边距（230px）定位到大盒子的右侧，价格所在的段落区块通过上外边距（42px）定位到内容盒子的最底部，所有文字右对齐，通过设置右内边距，内容距盒子右边框15px距离。4 4 实验分析实验分析实验实验2 2 酷酷车车e e族宝贝族宝贝展示展示
