TP06-盒子模型

盒子模型,第六章,回顾与作业点评,使用CSS设置背景图像时，通常会同时设置背景图像的（）和（）属性使用font属性设置字体类型、风格、大小、粗细时的顺序是什么？使用（）属性设置列表项目符号。,提问,background-repeat,background-position,字体风格粗细大小类型,list-style-type或list-style,2/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,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/30,border简写,同时设置边框的颜色、粗细和样式,border-bottom:9px#F00dashed;border:9px#F00dashed;,示例,边框,文本框边框,空白间隙,10/30,外边距,marginmargin-topmargin-rightmargin-bottommargin-leftmargin,margin-top:1pxmargin-right:2pxmargin-bottom:2pxmargin-left:1pxmargin:3px5px7px4px;margin:3px5px;margin:3px5px7px;margin:8px;,示例,11/30,外边距的妙用,网页居中对齐,margin:0pxauto;,12/30,内边距,paddingpadding-leftpadding-rightpadding-toppadding-bottompadding,padding-left:10px;padding-right:5px;padding-top:20px;padding-bottom:8px;padding:20px5px8px10px;padding:10px5px;padding:30px8px10px;padding:10px;,示例,内边距,13/30,盒子型模的尺寸,10px,10px,5px,5px,70px,盒子模型总尺寸=border-width+padding+margin+内容宽度,外边距（margin）：10px,内边距（padding）：5px,内容宽度width：70px,14/30,学员操作聚美优品商品分类2-1,训练要点使用定义列表dl-dt-dd制作商品分类使用border属性设置边框样式使用margin和padding消除外边距和内边距使用background设置页面背景需求说明使用定义列表dl-dt-dd制作商品分类列表分类列表标题与列表内容对齐显示,指导,15/30,学员操作聚美优品商品分类2-2,实现思路页面背景颜色直接使用标签选择器body设置。使用margin和padding设置标题标签、定义列表标签的外边距、内边距为0px。商品分类标题放在标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，然后通过类样式使用background属性分别设置分类标题前的背景小图标。列表内容放在标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，使用border-bottom设置下边框的虚线边框。,指导,16/30,学员操作聚美优品美容热点2-1,训练要点使用无序列表制作热点产品列表使用border属性设置边框样式使用CSS设置外边距和内边距使用background设置页面背景会使用后代选择器样式需求说明使用无序列表制作美容品列表列表图标使用背景图像实现,指导,17/30,学员操作聚美优品美容热点2-2,实现思路页面背景颜色直接使用标签选择器body设置。使用margin和padding设置段落标签、无序列表标签的外边距、内边距为0px。使用list-style-type设置列表的项目符号为无。使用border-bottom设置列表下边框的虚线边框。使用a和a:hover分别设置超链接样式和鼠标悬停在超链接上时文本样式。,指导,列表前的数字放在标签中,#beautyaspancolor:#FFF;background:url(./image/dot_01.gif)0px5pxno-repeat;text-align:center;padding:10px;font-weight:bold;#beautya:hoverspancolor:#FFF;background:url(./image/dot_02.gif)0px5pxno-repeat;,18/30,学员操作制作商品图片列表,需求说明使用无序列表实现商品图片列表的排列。超链接图片边框为1px灰色实线，当鼠标移至超链接图片上时，图片边框为1px橙色实线。,练习,19/30,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,共性问题集中讲解,20/30,什么是标准文档流简称“标准流”，是指在不使用其他的排版定位相关特殊CSS规则时，各种排列规则，即CSS网页元素默认的排列方式。标准文档流组成块级元素（blocklevel）、列表内联元素（inline）特点：1、和其他元素都在一行上;2、高度、行高和顶以及底边距都不可改变；3、宽度就是它的文字或图片的宽度，不可改变。总的来说，内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用。、.,标准文档流,内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立,经验,21/30,总是在新行上开始；高度，行高以及外边距和内边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。它可以容纳内联元素和其他块元素,display属性,控制元素的显示和隐藏块级元素与行级元素的转变,22/30,学员操作彩妆热卖产品列表2-1,训练要点使用无序列表制作产品列表使用margin和padding设置外边距和内边距使用background设置页面背景使用display控制元素的显示和隐藏需求说明使用无序列表制作热卖彩妆产品列表,指导,23/30,学员操作彩妆热卖产品列表2-2,实现思路鼠标移至超链接上时显示产品详细信息内容全放在标签的中使用display属性设置div的显示和隐藏,大家都喜欢的彩妆1Za姬芮新能真皙美白隔离霜35g￥62.00最近69122人购买,提示,指导,#cosmeticslidivdisplay:none;text-align:center;,#cosmeticsa:hoverdivdisplay:block;,24/30,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,共性问题集中讲解,25/30,总结,掌握盒子模型的边框、外边距和内边距在网页中的使用方法。会使用盒子模型属性美化图片、列表、表单元素等网页元素。能够精确计算盒子模型的尺寸。了解什么是标准文档流，以及标准文档流由块级元素和内联元素组成。使用di