TP06盒子模型.pptxVIP

第六章盒子模型回顾与作业点评使用CSS设置背景图像时，通常会同时设置背景图像的（ ）和（ ）属性使用font属性设置字体类型、风格、大小、粗细时的顺序是什么？使用（ ）属性设置列表项目符号。background-repeat提问background-position字体风格→粗细→大小→类型list-style-type或list-style/30本章任务/30制作导航条页面制作聚美优品商品分类页面制作聚美优品美容热点产品列表制作1号店美妆商品图片列表页面制作聚美优品彩妆热卖产品列表页面本章目标理解盒子模型及其构成会使用盒子属性美化网页元素会计算盒子模型尺寸理解标准文档流及其组成和特点会使用display属性设置元素显示方式/30什么是盒子模型/30什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网 页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。/picview/2758739/2758739/0/b25aae51ddbe20.html 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。每个HTML标记都可看作一个盒子；每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；什么是盒子模型边框（border）外边距（margin）内边距（padding）高（height）网页元素宽（width）/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;/30边框粗细border-widththinmediumthick像素值示例border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px;border-width:5px 1px 6px;border-width:1px 3px 5px 2px;/30边框样式border-stylenonehiddendotteddashedsoliddouble……示例border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-style:solid ;