TP06盒子模型

盒子模型第六章回顾与作业点评使用CSS设置背景图像时，通常会同时设置背景图像的（）和（）属性使用font属性设置字体类型、风格、大小、粗细时的顺序是什么？使用（）属性设置列表项目符号。提问background-repeatbackground-position字体风格→粗细→大小→类型list-style-type或list-style2/30本章任务制作导航条页面制作聚美优品商品分类页面制作聚美优品美容热点产品列表制作1号店美妆商品图片列表页面制作聚美优品彩妆热卖产品列表页面3/30本章目标理解盒子模型及其构成会使用盒子属性美化网页元素会计算盒子模型尺寸理解标准文档流及其组成和特点会使用display属性设置元素显示方式4/30什么是盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。每个HTML标记都可看作一个盒子；每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；5/30什么是盒子模型边框（border）高（height）宽（width）外边距（margin）内边距（padding）网页元素6/30边框边框border-colorborder-widthborder-style属性说明示例border-top-color上边框颜色border-top-color:#369;border-right-color右边框颜色border-right-color:#369;border-bottom-color下边框颜色border-bottom-color:#fae45b;border-left-color左边框颜色border-left-color:#efcd56;border-color四个边框为同一颜色border-color:#eeff34;上、下边框颜色：#369左、右边框颜色：#000border-color:#369#000;上边框颜色：#369左、右边框颜色：#000下边框颜色：#f00border-color:#369#000#f00;上、右、下、左边框颜色：#369、#000、#f00、#00fborder-color:#369#000#f00#00f;7/30边框粗细border-widththinmediumthick像素值border-top-width:5px;border-right-width:10px;border-bottom-width:8px;border-left-width:22px;border-width:5px;border-width:20px2px;border-width:5px1px6px;border-width:1px3px5px2px;示例8/30边框样式border-stylenonehiddendotteddashedsoliddouble……示例border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-style:solid;border-style:soliddotted;border-style:soliddotteddashed;border-style:soliddotteddasheddouble;9/30border简写同时设置边框的颜色、粗细和样式border-bottom:9px#F00dashed;border:9px#F00dashed;示例边框文本框边框演示示例1：边框样式空白间隙10/30外边距marginmargin-topmargin-rightmargin-bottommargin-leftmarginmargin-top:1pxmargin-right:2pxmargin-bottom:2pxmargin-left:1pxmargin:3px5px7px4px;margin:3px5px;margin:3px5px7px;margin:8px;示例演示示例2：外边距样式11/30外边距的妙用网页居中对齐margin:0pxauto;演示示例3：网页居中对齐12/30内边距paddingpadding-leftpadding-rightpadding-toppadding-bottompaddingpadding-left:10px;padding-right:5px;padding-top:20px;padding-bottom:8px;padding:20px5px8px10px;padding:10px5px;padding:30px8px10px;padding:10px;示例内边距演示示例4：内边距样式13/30盒子型模的尺寸10px10px5px5px70px盒子模型总尺寸=border-width+padding+margin+内容宽度外边距（margin）：10px内边距（padding）：5px内容宽度width：70px14/30学员操作—聚美优品商品分类2-1训练要点使用定义列表dl-dt-dd制作商品分类使用border属性设置边框样式使用margin和padding消除外边距和内边距使用background设置页面背景需求说明使用定义列表dl-dt-dd制作商品分类列表分类列表标题与列表内容对齐显示讲解需求说明指导15/30学员操作—聚美优品商品分类2-2实现思路页面背景颜色直接使用标签选择器body设置。使用margin和padding设置标题标签、定义列表标签的外边距、内边距为0px。商品分类标题放在dt标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，然后通过类样式使用background属性分别设置分类标题前的背景小图标。列表内容放在dd标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，使用border-bottom设置下边框的虚线边框。完成时间：10分钟指导16/30学员操作—聚美优品美容热点2-1训练要点使用无序列表制作热点产品列表使用border属性设置边框样式使用CSS设置外边距和内边距使用background设置页面背景会使用后代选择器样式需求说明使用无序列表制作美容品列表列表图标使用背景图像实现讲解需求说明指导17/30学员操作—聚美优品美容热点2-2实现思路页面背景颜色直接使用标签选择器body设置。使用margin和padding设置段落标签、无序列表标签的外边距、内边距为0px。使用list-style-type设置列表的项目符号为无。使用border-bottom设置列表下边框的虚线边框。使用a和a:hover分别设置超链接样式和鼠标悬停在超链接上时文本样式。完成时间：10分钟指导列表前的数字放在span标签中#beautyaspan{color:#FFF;background:url(../image/dot_01.gif)0px5pxno-repeat;text-align:center;padding:10px;font-weight:bold;}#beautya:hoverspan{color:#FFF;background:url(../image/dot_02.gif)0px5pxno-repeat;}18/30学员操作—制作商品图片列表需求说明使用无序列表实现商品图片列表的排列。超链接图片边框为1px灰色实线，当鼠标移至超链接图片上时，图片边框为1px橙色实线。完成时间：5分钟练习19/30共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解20/30什么是标准文档流简称“标准流”，是指在不使用其他的排版定位相关特殊CSS规则时，各种排列规则，即CSS网页元素默认的排列方式。标准文档流组成块级元素（blocklevel）h1…h6、p、div、列表内联元素（inline）特点：1、和其他元素都在一行上;2、高度、行高和顶以及底边距都不可改变；3、宽度就是它的文字或图片的宽度，不可改变。总的来说，内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用。span、a、img/、strong...标准文档流内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立经验21/30①总是在新行上开始；②高度，行高以及外边距和内边距都可控制；③宽度缺省是它的容器的100%，除非设定一个宽度。④它可以容纳内联元素和其他块元素display属性控制元素的显示和隐藏块级元素与行级元素的转变值说明block块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符inline内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符none设置元素不会被显示演示示例5：display属性22/30学员操作—彩妆热卖产品列表2-1训练要点使用无序列表制作产品列表使用margin和padding设置外边距和内边距使用background设置页面背景使用display控制元素的显示和隐藏需求说明使用无序列表制作热卖彩妆产品列表教员讲解需求指导23/30学员操作—彩妆热卖产品列表2-2实现思路鼠标移至超链接上时显示产品详细信息内容全放在li标签的div中使用display属性设置div的显示和隐藏……divid=cosmeticspclass=title大家都喜欢的彩妆/pulliahref=#span1/spanZa姬芮新能真皙美白隔离霜35gdivimgsrc=image/icon-1.jpgalt=Za姬芮新能真皙美白隔离霜/p￥62.00最近69122人购买/p/div/a/li……/ul/div完成时间：10分钟提示指导#cosmeticslidiv{display:none;text-align:center;}#cosmeticsa:hoverdiv{display:block;}24/30共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解25/30总结掌握盒子模型的边框、外边距和内边距在网页中的使用方法。会使用盒子模型属性美化图片、div、列表、表单元素等网页元素。能够精确计算盒子模型的尺寸。了解什么是标准文档流，以及标准文档流由块级元素和内联元素组成。使用display属性对块级元素和内联元素进行转换，并且使用display属性设置网页元素的显示和隐藏。26/30作业课后作业教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求预习作业预习目标了