盒子模型课件.ppt

1、第四章第四章 盒子模型盒子模型2023-5-211回顾与检查回顾与检查n字体大小可以使用什么属性设置？字体大小可以使用什么属性设置？n设置设置CSSCSS伪类时，应该注意什么？伪类时，应该注意什么？n如何使如何使中的单行文字垂直居中对齐？中的单行文字垂直居中对齐？2023-5-212本章任务本章任务n腾讯首页腾讯首页-产品类别产品类别导航导航n今日淘宝活动今日淘宝活动nQQQQ炫舞特色右边栏炫舞特色右边栏n腾讯拍拍腾讯拍拍-热卖专栏热卖专栏nQQQQ摄影俱乐部摄影俱乐部2023-5-213本章目标本章目标n会使用盒子属性会使用盒子属性borderborder、paddingpadding、ma

2、rginmargin美化网页元素美化网页元素n会精确计算盒子模型尺寸会精确计算盒子模型尺寸n会使用会使用displaydisplay属性进行块级元素与行内元属性进行块级元素与行内元素的互相转换素的互相转换2023-5-214盒子模型盒子模型n盒子模型（盒子模型（Box ModelBox Model）实现页面布局的基础实现页面布局的基础与生活中的盒子相似与生活中的盒子相似盒内物品填充部分纸壳外围间隙纸壳2023-5-215盒子模型盒子模型n盒子模型（盒子模型（Box ModelBox Model）包含以下属性：包含以下属性：l边框（边框（borderborder）：对应包）：对应包装盒的纸壳，具

3、有一定的厚装盒的纸壳，具有一定的厚度度l内边距（内边距（paddingpadding）：位于）：位于边框内部，是内容与边框的边框内部，是内容与边框的距离，对应包装盒的填充部距离，对应包装盒的填充部分分l外边距（外边距（marginmargin）：位于）：位于边框外部，是边框外面周围边框外部，是边框外面周围的间隙，对应纸壳外围间隙的间隙，对应纸壳外围间隙l元素内容：盒子内的物品元素内容：盒子内的物品边框元素内容外边距内边距2023-5-216盒子模型盒子模型n盒子模型的平面结构图盒子模型的平面结构图2023-5-217盒子模型盒子模型n盒子模型的三维立体结构图盒子模型的三维立体结构图第一层第二层

4、第三层第四层第五层2023-5-218边框属性边框属性n边框（边框（borderborder）用于分隔不同元素用于分隔不同元素会占据空间会占据空间有有4 4条边框条边框元素内容与外边距的分界线具有宽度，具有宽度，占据空间占据空间盒子模型可以没有盒子模型可以没有边框，此时边框宽边框，此时边框宽度为度为0 0上上右右盒子模型有4条边框下下左左2023-5-219边框属性边框属性n边框颜色边框颜色分别设置分别设置4 4条边框条边框属性属性语法规则语法规则说说 明明border-top-colorborder-top-color:#369;设置上边框颜色设置上边框颜色border-right-colo

5、rborder-right-color:#369;设置右边框颜色设置右边框颜色border-bottom-colorborder-bottom-color:#369;设置下边框颜色设置下边框颜色border-left-colorborder-left-color:#369;设置左边框颜色设置左边框颜色属性值取值与color属性相同2023-5-2110边框属性边框属性n边框颜色边框颜色同时设置同时设置4 4条边框条边框属性属性语法规则语法规则说说 明明border-colorborder-color:#369;设置设置4条边框为同一条边框为同一颜色颜色border-color:#369#000

6、;上、下边框为上、下边框为#369左、右边框为左、右边框为#000border-color:#369#000 red;上边框为上边框为#369左、右边框为左、右边框为#000下边框为下边框为redborder-color:#369#000 red blue;上边框为上边框为#369右边框为右边框为#000 下边框为下边框为red左边框为左边框为blue按顺时针方向上、右、下、左的顺序设置4边颜色2023-5-2111边框属性边框属性n边框粗细边框粗细属性值：关键字、数值属性值：关键字、数值属性值属性值说说 明明thin定义细的边框定义细的边框medium默认。定义中等的边框默认。定义中等的边框

7、thick定义粗的边框定义粗的边框length允许自定义边框的宽度，如允许自定义边框的宽度，如5px、0.1in等等inherit规定应该从父元素继承边框宽度规定应该从父元素继承边框宽度2023-5-2112边框属性边框属性n边框粗细边框粗细分别设置分别设置4 4条边框条边框设置方法与边框颜色相同设置方法与边框颜色相同属性属性语法规则语法规则说说 明明border-top-widthborder-top-width:5px;上边框粗细为上边框粗细为5px5pxborder-right-widthborder-right-width:10px;右边框粗细为右边框粗细为10px10pxborder

8、-bottom-widthborder-bottom-width:8px;下边框粗细为下边框粗细为8px8pxborder-left-widthborder-left-width:22px;左边框粗细为左边框粗细为22px22px2023-5-2113边框属性边框属性n边框粗细边框粗细同时设置同时设置4 4条边框条边框设置方法与边框颜色相同设置方法与边框颜色相同属性属性语法规则语法规则说说 明明border-widthborder-width:5px;4条边框粗细均为条边框粗细均为5pxborder-width:20px 2px;上、下边框粗细为上、下边框粗细为20px左、右边框粗细为左、右边

9、框粗细为2pxborder-width:5px 1px 6px;上边框粗细为上边框粗细为5px左、右边框粗细为左、右边框粗细为1px下边框粗细为下边框粗细为6pxborder-width:1px 3px 5px 2px;上边框粗细为上边框粗细为1px右边框粗细为右边框粗细为3px下边框粗细为下边框粗细为5px左边框粗细为左边框粗细为2px2023-5-2114边框属性边框属性n边框样式边框样式属性值：关键字属性值：关键字属性值属性值说说 明明none定义无边框定义无边框hidden与与“none”相同，不过应用于表格时除外，对于表格，相同，不过应用于表格时除外，对于表格，hidden用于解决边

10、框冲突用于解决边框冲突dotted定义点状边框。在大多浏览器中呈现为实线定义点状边框。在大多浏览器中呈现为实线dashed定义虚线。在大多浏览器中呈现为实线定义虚线。在大多浏览器中呈现为实线solid定义实线定义实线double定义双线。双线的宽度等于定义双线。双线的宽度等于border-width的值的值groove定义定义3D凹槽边框，其效果取决于凹槽边框，其效果取决于border-color的值的值ridge定义定义3D垄状边框，其效果取决于垄状边框，其效果取决于border-color的值的值inset定义定义3D inset边框，其效果取决于边框，其效果取决于border-color

11、的值的值outset定义定义3D outset边框，其效果取决于边框，其效果取决于border-color的值的值inherit规定应该从父元素继承边框样式。任何规定应该从父元素继承边框样式。任何IE浏览器版本浏览器版本都不支持，不推荐使用。都不支持，不推荐使用。2023-5-2115边框属性边框属性n边框样式边框样式分别设置分别设置4 4条边框条边框设置方法与边框颜色相同设置方法与边框颜色相同属性属性语法规则语法规则说说 明明border-top-styleborder-top-style:solid;上边框为实线上边框为实线border-right-styleborder-right-st

12、yle:solid;右边框为实线右边框为实线border-bottom-styleborder-bottom-style:solid;下边框为实线下边框为实线border-left-styleborder-left-style:solid;左边框为实线左边框为实线2023-5-2116边框属性边框属性n边框样式边框样式同时设置同时设置4 4条边框条边框设置方法与边框颜色相同设置方法与边框颜色相同属性属性语法规则语法规则说说 明明border-styleborder-style:solid;4条边框均条边框均为实线为实线border-style:solid dotted;上、下边框为实线上、下边

13、框为实线左、右边框为点线左、右边框为点线border-style:solid dotted dashed;上边框为实线上边框为实线左、右边框为点线左、右边框为点线下边框为虚线下边框为虚线border-style:solid dotted dashed double;上边框为实线上边框为实线右边框为点线右边框为点线下边框为虚线下边框为虚线左边框为双线左边框为双线2023-5-2117边框属性边框属性n边框样式的显示差异边框样式的显示差异在在IEIE和和FirefoxFirefox中略有区别中略有区别groovegroove、insetinset、outsetoutset和和ridgeridge，

14、IEIE都支持得不够都支持得不够理想理想IEIE浏览器不浏览器不支持的支持的border-border-stylestyle效果，效果，不推荐使用不推荐使用2023-5-2118边框属性边框属性n边框属性简写边框属性简写同时设置边框的三个属性同时设置边框的三个属性border:1px dashed#336699;4条边框粗细均为1px4条边框均为虚线4条边框颜色均为#336699当有多条规则作用于同一个边框时，会产生冲突，后当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置面的设置会覆盖前面的设置2023-5-2119内边距属性内边距属性n内边距（内边距（paddingpa

15、dding）用于控制内容与边框之间用于控制内容与边框之间的距离的距离会占据空间会占据空间可设置盒子模型上、右、下、可设置盒子模型上、右、下、左左4 4个方向的内边距值个方向的内边距值设置方式与设置方式与borderborder属性相属性相似似paddingpadding属性的值可以为属性的值可以为0 0，即无内边距，即无内边距上边距内容边框2023-5-21202023-5-2121内边距属性内边距属性n内边距内边距分别设置分别设置4 4个方向的内边距个方向的内边距属性属性语法规则语法规则说说 明明padding-left padding-left:10px;左内边距为左内边距为10pxpad

16、ding-rightpadding-right:5px;右内边距为右内边距为5pxpadding-toppadding-top:20px;上内边距为上内边距为20pxpadding-bottompadding-bottom:8px;下内边距为下内边距为8px2023-5-2122内边距属性内边距属性n内边距内边距同时设置同时设置4 4个方向的内边距个方向的内边距属性属性语法规则语法规则说说 明明paddingpadding:10px;设置设置4个方向内边距均个方向内边距均为为10pxpadding:10px 5px;上、下内边距为上、下内边距为10px左、右内边距为左、右内边距为5pxpadd

17、ing:30px 8px 10px;上内边距为上内边距为30px左、右内边距为左、右内边距为8px下内边距为下内边距为10pxpadding:20px 5px 8px 10px;上内边距为上内边距为20px右内边距为右内边距为5px下内边距为下内边距为8px左内边距为左内边距为10px2023-5-2123外边距属性外边距属性n外边距（外边距（marginmargin）用于控制元素与元素之间的距离用于控制元素与元素之间的距离会占据空间会占据空间可设置盒子模型上、右、下、左可设置盒子模型上、右、下、左4 4个方向的外边个方向的外边距值距值设置方式与设置方式与paddingpadding属性相同属

18、性相同marginmargin属性的值可以为属性的值可以为0 0，即无外边距，即无外边距2023-5-2124外边距属性外边距属性nbodybody的外边距的外边距本身是一个盒子本身是一个盒子默认情况下，有若干像素外填充默认情况下，有若干像素外填充body的margin属性值设置为0时默认情况下的body2023-5-2125外边距属性外边距属性n外边距设置方法外边距设置方法与与paddingpadding属性设置方法类似属性设置方法类似可以设置可以设置1 1、2 2、3 3或或4 4个属性值个属性值l设置设置1 1个属性值时，表示上、下、左、右个属性值时，表示上、下、左、右4 4个个marg

19、inmargin均均为该值为该值l设置设置2 2个属性值时，前者为上、下个属性值时，前者为上、下marginmargin值，后者为左、值，后者为左、右右marginmargin值值l设置设置3 3个属性值时，第个属性值时，第1 1个为上个为上marginmargin的值，第的值，第2 2个为个为左、右左、右marginmargin的值，第的值，第3 3个为下个为下marginmargin的值的值l设置设置4 4个属性值时，按照顺时针方向，依次为上、右、个属性值时，按照顺时针方向，依次为上、右、下、左下、左marginmargin的值的值2023-5-2126盒子模型尺寸盒子模型尺寸n盒子尺寸盒

20、子尺寸盒子模型总尺寸盒子模型总尺寸=border-width+padding+margin+border-width+padding+margin+内容尺寸（宽度内容尺寸（宽度/高度）高度）内容的宽度或者高度该盒子尺寸没有包含边框尺寸，表示无边框2023-5-2127演示案例演示案例-制作制作“主题相册主题相册”n页面效果页面效果2023-5-2128演示案例演示案例-制作制作“网页热门标签网页热门标签”n思路分析思路分析使用使用IDID选择器定义划分选择器定义划分htmlhtml文档的文档的divdiv使用盒子属性美化网页元素外观使用盒子属性美化网页元素外观使用盒子属性控制元素间距使用盒子属

21、性控制元素间距使用标题标签排版各级标题使用标题标签排版各级标题使用盒子属性制作带边框的图片使用盒子属性制作带边框的图片 教师讲解实现思路并演示带边框，且与边框有间距的图片效果2023-5-2129标准文档流标准文档流n概念概念简称简称“标准流标准流”，指在不适用其他的排版和定位，指在不适用其他的排版和定位相关的特殊相关的特殊CSSCSS规则时，各种元素的排列规则规则时，各种元素的排列规则n分两类分两类块级元素（块级元素（block levelblock level）l以一个块地形式表现出来，并且跟同级的兄弟块依次竖以一个块地形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满直排列，左右撑满

22、l占有独立空间占有独立空间2023-5-2130标准文档流标准文档流n分两类分两类行内元素（行内元素（inlineinline）l各个字母之间横向排列，到最右端自动折行各个字母之间横向排列，到最右端自动折行l标签本身不占有独立的区域，仅仅在其他元素的基础上标签本身不占有独立的区域，仅仅在其他元素的基础上指定了一定的范围指定了一定的范围2023-5-2131标准文档流标准文档流n块级元素与行内元素的区别块级元素与行内元素的区别块级元素拥有自己的区域块级元素拥有自己的区域行内元素没有自己的区域行内元素没有自己的区域2023-5-2132标签与标签与标签标签n标签标签区块容器标记，即区块容器标记，即

23、与与之间相当于一个之间相当于一个容器容器通用的块级元素，无逻辑语义通用的块级元素，无逻辑语义可以容纳各种可以容纳各种HTMLHTML元素元素使用使用CSSCSS控制控制时，其中的各标签都会随之改时，其中的各标签都会随之改变变2023-5-2133标签与标签与标签标签n标签标签区块容器标记，区划行内元素区块容器标记，区划行内元素通用的行内元素，无逻辑语义通用的行内元素，无逻辑语义可以容纳各种可以容纳各种HTMLHTML元素元素使用使用CSSCSS控制控制时，其中的各标签都会随之时，其中的各标签都会随之改变改变2023-5-2134标签与标签与标签标签n标签与标签与标签的标签的异同异同相同点：相同

24、点：l区块容器标记区块容器标记l独立出各个区块独立出各个区块不同点：不同点：l是块级元素，在它前是块级元素，在它前后的元素会自动换行后的元素会自动换行l是行内元素，在它的是行内元素，在它的前后不会换行前后不会换行2023-5-2135displaydisplay属性属性ndisplaydisplay属性属性用于指定用于指定HTMLHTML标签的显示方式标签的显示方式属性值：关键字属性值：关键字l常用的有常用的有3 3个个属性属性常用可能值常用可能值说说 明明displayblock 将元素显示为块级元素，该元素前将元素显示为块级元素，该元素前后会带有换行符后会带有换行符inline默认。元素会

25、被显示为行内元素，默认。元素会被显示为行内元素，该元素前后没有换行符该元素前后没有换行符 none该元素不会被显示该元素不会被显示2023-5-2136displaydisplay属性属性ndisplaydisplay属性的应用属性的应用块级元素与行内元素的相互转换块级元素与行内元素的相互转换为div和span标签设置display属性div变成了行内显示span变成了块状显示盒子7、8消失了2023-5-2137演示案例演示案例-制作制作“腾讯网站导航腾讯网站导航”n页面效果页面效果2023-5-2138演示案例演示案例-制作制作“腾讯网站导航腾讯网站导航”n思路分析思路分析使用使用IDID

26、选择器定义用于分块的选择器定义用于分块的divdiv使用定义列表排版网站导航使用定义列表排版网站导航使用使用displaydisplay属性将属性将spanspan标签标签转换为块级元素，并用它排版转换为块级元素，并用它排版带背景图的标题带背景图的标题使用盒子属性美化网站导航外使用盒子属性美化网站导航外观观 教师演示操作步骤2023-5-2139总结总结n盒子模型属性有哪些？盒子模型属性有哪些？n如何计算盒子模型尺寸？如何计算盒子模型尺寸？n简单描述块级元素与行内元素的异同？简单描述块级元素与行内元素的异同？n如何进行块级元素与行内元素的互相转换？如何进行块级元素与行内元素的互相转换？总结并布置作业总结并布置作业2023-5-21402023-5-2141