盒子模型课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式asf,第二级asdf,第三级asdf,第四级asdf,第五级asdf,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式asf,第二级asdf,第三级asdf,第四级asdf,第五级asdf,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式asf,第二级asdf,第三级asdf,第四级asdf,第五级asdf,*,*,第四章 盒子模型,2024/8/30,1,第四章 盒子模型2023/9/61,回顾与检查,字体大小可以使用什么属性设置？,设置,CSS,伪类时，应该注意什么？,如何使,中的单行文字垂直居中对齐？,2024/8/30,2,回顾与检查字体大小可以使用什么属性设置？2023/9/62,本章任务,腾讯首页,-,产品类别导航,今日淘宝活动,QQ,炫舞特色右边栏,腾讯拍拍,-,热卖专栏,QQ,摄影俱乐部,2024/8/30,3,本章任务腾讯首页-产品类别导航2023/9/63,本章目标,会使用盒子属性,border,、,padding,、,margin,美化网页元素,会精确计算盒子模型尺寸,会使用,display,属性进行块级元素与行内元素的互相转换,2024/8/30,4,本章目标会使用盒子属性border、padding、marg,盒子模型,盒子模型（,Box Model,）,实现页面布局的基础,与生活中的盒子相似,盒内物品,填充部分,纸壳外围间隙,纸壳,2024/8/30,5,盒子模型盒子模型（Box Model）盒内物品填充部分纸壳外,盒子模型,盒子模型（,Box Model,）,包含以下属性：,边框（,border,）：对应包装盒的纸壳，具有一定的厚度,内边距（,padding,）：位于边框内部，是内容与边框的距离，对应包装盒的填充部分,外边距（,margin,）：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙,元素内容：盒子内的物品,边框,元素内容,外边距,内边距,2024/8/30,6,盒子模型盒子模型（Box Model）边框元素内容外边距内边,盒子模型,盒子模型的平面结构图,2024/8/30,7,盒子模型盒子模型的平面结构图2023/9/67,盒子模型,盒子模型的三维立体结构图,第一层,第二层,第三层,第四层,第五层,2024/8/30,8,盒子模型盒子模型的三维立体结构图第一层第二层第三层第四层第五,边框属性,边框（,border,）,用于分隔不同元素,会占据空间,有,4,条边框,元素内容与外边距的分界线,具有宽度，占据空间,盒子模型可以没有边框，此时边框宽度为,0,上,右,盒子模型有,4,条边框,下,左,2024/8/30,9,边框属性边框（border）元素内容与外边距的分界线具有宽度,边框属性,边框颜色,分别设置,4,条边框,属性,语法规则,说 明,border-top-color,border-top-color:,#369,;,设置上边框颜色,border-right-color,border-right-color:#369;,设置右边框颜色,border-bottom-color,border-bottom-color:#369;,设置下边框颜色,border-left-color,border-left-color:#369;,设置左边框颜色,属性值取值与,color,属性相同,2024/8/30,10,边框属性边框颜色属性语法规则说 明border-top-c,边框属性,边框颜色,同时设置,4,条边框,属性,语法规则,说 明,border-color,border-color:#369;,设置,4,条边框为同一颜色,border-color:#369 #000;,上、下边框为,#369,左、右边框为,#000,border-color:#369 #000 red;,上边框为,#369,左、右边框为,#000,下边框为,red,border-color:#369 #000 red blue;,上边框为,#369,右边框为,#000,下边框为,red,左边框为,blue,按顺时针方向上、右、下、左的顺序设置,4,边颜色,2024/8/30,11,边框属性边框颜色属性语法规则说 明border-color,边框属性,边框粗细,属性值：关键字、数值,属性值,说 明,thin,定义细的边框,medium,默认。定义中等的边框,thick,定义粗的边框,length,允许自定义边框的宽度，如,5px,、,0.1in,等,inherit,规定应该从父元素继承边框宽度,2024/8/30,12,边框属性边框粗细属性值说 明thin定义细的边框mediu,边框属性,边框粗细,分别设置,4,条边框,设置方法与边框颜色相同,属性,语法规则,说 明,border-top-width,border-top-width:5px;,上边框粗细为,5px,border-right-width,border-right-width:10px;,右边框粗细为,10px,border-bottom-width,border-bottom-width:8px;,下边框粗细为,8px,border-left-width,border-left-width:22px;,左边框粗细为,22px,2024/8/30,13,边框属性边框粗细属性语法规则说 明border-top-w,边框属性,边框粗细,同时设置,4,条边框,设置方法与边框颜色相同,属性,语法规则,说 明,border-width,border-width:5px;,4,条边框粗细均为,5px,border-width:20px 2px;,上、下边框粗细为,20px,左、右边框粗细为,2px,border-width:5px 1px 6px;,上边框粗细为,5px,左、右边框粗细为,1px,下边框粗细为,6px,border-width:1px 3px 5px 2px;,上边框粗细为,1px,右边框粗细为,3px,下边框粗细为,5px,左边框粗细为,2px,2024/8/30,14,边框属性边框粗细属性语法规则说 明border-width,边框属性,边框样式,属性值：关键字,属性值,说 明,none,定义无边框,hidden,与“,none,”相同，不过应用于表格时除外，对于表格，,hidden,用于解决边框冲突,dotted,定义点状边框。在大多浏览器中呈现为实线,dashed,定义虚线。在大多浏览器中呈现为实线,solid,定义实线,double,定义双线。双线的宽度等于,border-width,的值,groove,定义,3D,凹槽边框，其效果取决于,border-color,的值,ridge,定义,3D,垄状边框，其效果取决于,border-color,的值,inset,定义,3D inset,边框，其效果取决于,border-color,的值,outset,定义,3D outset,边框，其效果取决于,border-color,的值,inherit,规定应该从父元素继承边框样式。任何,IE,浏览器版本都不支持，不推荐使用。,2024/8/30,15,边框属性边框样式属性值说 明none定义无边框hidden,边框属性,边框样式,分别设置,4,条边框,设置方法与边框颜色相同,属性,语法规则,说 明,border-top-style,border-top-style:solid;,上边框为实线,border-right-style,border-right-style:solid;,右边框为实线,border-bottom-style,border-bottom-style:solid;,下边框为实线,border-left-style,border-left-style:solid;,左边框为实线,2024/8/30,16,边框属性边框样式属性语法规则说 明border-top-s,边框属性,边框样式,同时设置,4,条边框,设置方法与边框颜色相同,属性,语法规则,说 明,border-style,border-style:solid;,4,条边框均,为实线,border-style:solid dotted;,上、下边框为实线,左、右边框为点线,border-style:solid dotted dashed;,上边框为实线,左、右边框为点线,下边框为虚线,border-style:solid dotted dashed double;,上边框为实线,右边框为点线,下边框为虚线,左边框为双线,2024/8/30,17,边框属性边框样式属性语法规则说 明border-style,边框属性,边框样式的显示差异,在,IE,和,Firefox,中略有区别,groove,、,inset,、,outset,和,ridge,，,IE,都支持得不够理想,IE,浏览器不支持的,border-style,效果，不推荐使用,2024/8/30,18,边框属性边框样式的显示差异IE浏览器不支持的border-s,边框属性,边框属性简写,同时设置边框的三个属性,border:1px dashed #336699;,4,条边框粗细均为,1px,4,条边框均为虚线,4,条边框颜色均为,#336699,当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置,2024/8/30,19,边框属性边框属性简写border:1px dashed,内边距属性,内边距（,padding,）,用于控制内容与边框之间的距离,会占据空间,可设置盒子模型上、右、下、左,4,个方向的内边距值,设置方式与,border,属性相似,padding,属性的值可以为,0,，即无内边距,上边距,内容,边框,2024/8/30,20,内边距属性内边距（padding）padding属性的值可以,2024/8/30,21,2023/9/621,内边距属性,内边距,分别设置,4,个方向的内边距,属性,语法规则,说 明,padding-left,padding-left:10px;,左内边距为,10px,padding-right,padding-right:5px;,右内边距为,5px,padding-top,padding-top:20px;,上内边距为,20px,padding-bottom,padding-bottom:8px;,下内边距为,8px,2024/8/30,22,内边距属性内边距属性语法规则说 明padding-left,内边距属性,内边距,同时设置,4,个方向的内边距,属性,语法规则,说 明,padding,padding:10px ;,设置,4,个方向内边距均为,10px,padding:10px 5px;,上、下内边距为,10px,左、右内边距为,5px,padding:30px 8px 10px ;,上内边距为,30px,左、右内边距为,8px,下内边距为,10px,padding:20px 5px 8px 10px ;,上内边距为,20px,右内边距为,5px,下内边距为,8px,左内边距为,10px,2024/8/30,23,内边距属性内边距属性语法规则说 明paddingpaddi,外边距属性,外边距（,margin,）,用于控制元素与元素之间的距离,会占据空间,可设置盒子模型上、右、下、左,4,个方向的外边距值,设置方式与,padding,属性相同,margin,属性的值可以为,0,，即无外边距,2024/8/30,24,外边距属性外边距（margin）margin属性的值可以为0,外边距属性,body,的外边距,本身是一个盒子,默认情况下，有若干像素外填充,body,的,margin,属性值设置为,0,时,默认情况下的,body,2024/8/30,25,外边距属性body的外边距body的margin属性值设置为,外边距属性,外边距设置方法,与,padding,属性设置方法类似,可以设置,1,、,2,、,3,或,4,个属性值,设置,1,个属性值时，表示上、下、左、右,4,个,margin,均为该值,设置,2,个属性值时，前者为上、下,margin,值，后者为左、右,margin,值,设置,3,个属性值时，第,1,个为上,margin,的值，第,2,个为左、右,margin,的值，第,3,个为下,margin,的值,设置,4,个属性值时，按照顺时针方向，依次为上、右、下、左,margin,的值,2024/8/30,26,外边距属性外边距设置方法2023/9/626,盒子模型尺寸,盒子尺寸,盒子模型总尺寸,=,border-width+padding+margin+,内容尺寸（宽度,/,高度）,内容的宽度或者高度,该盒子尺寸没有包含边框尺寸，表示无边框,2024/8/30,27,盒子模型尺寸盒子尺寸盒子模型总尺寸=border-width,演示案例,-,制作“主题相册”,页面效果,2024/8/30,28,演示案例-制作“主题相册”页面效果2023/9/628,演示案例,-,制作“网页热门标签”,思路分析,使用,ID,选择器定义划分,html,文档的,div,使用盒子属性美化网页元素外观,使用盒子属性控制元素间距,使用标题标签排版各级标题,使用盒子属性制作带边框的图片,教师讲解实现思路并演示,带边框，且与边框有间距的图片效果,2024/8/30,29,演示案例-制作“网页热门标签”思路分析 教师讲解实现思路,标准文档流,概念,简称“标准流”，指在不适用其他的排版和定位相关的特殊,CSS,规则时，各种元素的排列规则,分两类,块级元素（,block level,）,以一个块地形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满,占有独立空间,2024/8/30,30,标准文档流概念2023/9/630,标准文档流,分两类,行内元素（,inline,）,各个字母之间横向排列，到最右端自动折行,标签本身不占有独立的区域，仅仅在其他元素的基础上指定了一定的范围,2024/8/30,31,标准文档流分两类2023/9/631,标准文档流,块级元素与行内元素的区别,块级元素拥有自己的区域,行内元素没有自己的区域,2024/8/30,32,标准文档流块级元素与行内元素的区别2023/9/632,标签与,标签,标签,区块容器标记，即,与,之间相当于一个容器,通用的块级元素，无逻辑语义,可以容纳各种,HTML,元素,使用,CSS,控制,时，其中的各标签都会随之改变,2024/8/30,33,标签与标签标签2023/9/,标签与,标签,标签,区块容器标记，区划行内元素,通用的行内元素，无逻辑语义,可以容纳各种,HTML,元素,使用,CSS,控制,时，其中的各标签都会随之改变,2024/8/30,34,标签与标签标签2023/9,标签与,标签,标签与,标签的异同,相同点：,区块容器标记,独立出各个区块,不同点：,是块级元素，在它前后的元素会自动换行,是行内元素，在它的前后不会换行,2024/8/30,35,标签与标签标签与,display,属性,display,属性,用于指定,HTML,标签的显示方式,属性值：关键字,常用的有,3,个,属性,常用可能值,说 明,display,block,将元素显示为块级元素，该元素前后会带有换行符,inline,默认。元素会被显示为行内元素，该元素前后没有换行符,none,该元素不会被显示,2024/8/30,36,display属性display属性属性常用可能值说 明d,display,属性,display,属性的应用,块级元素与行内元素的相互转换,为,div,和,span,标签设置,display,属性,div,变成了行内显示,span,变成了块状显示,盒子,7,、,8,消失了,2024/8/30,37,display属性display属性的应用为div和span,演示案例,-,制作“腾讯网站导航”,页面效果,2024/8/30,38,演示案例-制作“腾讯网站导航”页面效果2023/9/638,演示案例,-,制作“腾讯网站导航”,思路分析,使用,ID,选择器定义用于分块的,div,使用定义列表排版网站导航,使用,display,属性将,span,标签转换为块级元素，并用它排版带背景图的标题,使用盒子属性美化网站导航外观,教师演示操作步骤,2024/8/30,39,演示案例-制作“腾讯网站导航”思路分析 教师演示操作步骤,总结,盒子模型属性有哪些？,如何计算盒子模型尺寸？,简单描述块级元素与行内元素的异同？,如何进行块级元素与行内元素的互相转换？,总结并布置作业,2024/8/30,40,总结盒子模型属性有哪些？ 总结并布置作业2023/9/640,2024/8/30,41,2023/9/641,