盒子模型课件.ppt

《盒子模型课件.ppt》由会员分享，可在线阅读，更多相关《盒子模型课件.ppt（41页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第四章 盒子模型2023/1/251回顾与检查n字体大小可以使用什么属性设置？n设置CSS伪类时，应该注意什么？n如何使中的单行文字垂直居中对齐？2023/1/252本章任务n腾讯首页-产品类别导航n今日淘宝活动nQQ炫舞特色右边栏n腾讯拍拍-热卖专栏nQQ摄影俱乐部2023/1/253本章目标n会使用盒子属性border、padding、margin美化网页元素n会精确计算盒子模型尺寸n会使用display属性进行块级元素与行内元素的互相转换2023/1/254盒子模型n盒子模型（Box Model）实现页面布局的基础与生活中的盒子相似盒内物品填充部分纸壳外围间隙纸壳2023/1/255盒子

2、模型n盒子模型（Box Model）包含以下属性：l边框（border）：对应包装盒的纸壳，具有一定的厚度l内边距（padding）：位于边框内部，是内容与边框的距离，对应包装盒的填充部分l外边距（margin）：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙l元素内容：盒子内的物品边框元素内容外边距内边距2023/1/256盒子模型n盒子模型的平面结构图2023/1/257盒子模型n盒子模型的三维立体结构图第一层第二层第三层第四层第五层2023/1/258边框属性n边框（border）用于分隔不同元素会占据空间有4条边框元素内容与外边距的分界线具有宽度，占据空间盒子模型可以没有边框，此

3、时边框宽度为0上右盒子模型有4条边框下左2023/1/259边框属性n边框颜色分别设置4条边框属性属性语法规则语法规则说说 明明border-top-colorborder-top-color:#369;设置上边框颜色设置上边框颜色border-right-colorborder-right-color:#369;设置右边框颜色设置右边框颜色border-bottom-colorborder-bottom-color:#369;设置下边框颜色设置下边框颜色border-left-colorborder-left-color:#369;设置左边框颜色设置左边框颜色属性值取值与color属性相同2

4、023/1/2510边框属性n边框颜色同时设置4条边框属性属性语法规则语法规则说说 明明border-colorborder-color:#369;设置设置4条边框为同一条边框为同一颜色颜色border-color:#369#000;上、下边框为上、下边框为#369左、右边框为左、右边框为#000border-color:#369#000 red;上边框为上边框为#369左、右边框为左、右边框为#000下边框为下边框为redborder-color:#369#000 red blue;上边框为上边框为#369右边框为右边框为#000 下边框为下边框为red左边框为左边框为blue按顺时针方向上

5、、右、下、左的顺序设置4边颜色2023/1/2511边框属性n边框粗细属性值：关键字、数值属性值属性值说说 明明thin定义细的边框定义细的边框medium默认。定义中等的边框默认。定义中等的边框thick定义粗的边框定义粗的边框length允许自定义边框的宽度，如允许自定义边框的宽度，如5px、0.1in等等inherit规定应该从父元素继承边框宽度规定应该从父元素继承边框宽度2023/1/2512边框属性n边框粗细分别设置4条边框设置方法与边框颜色相同属性属性语法规则语法规则说说 明明border-top-widthborder-top-width:5px;上边框粗细为上边框粗细为5px5

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

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

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

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

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

11、yle:solid dotted dashed;上边框为实线上边框为实线左、右边框为点线左、右边框为点线下边框为虚线下边框为虚线border-style:solid dotted dashed double;上边框为实线上边框为实线右边框为点线右边框为点线下边框为虚线下边框为虚线左边框为双线左边框为双线2023/1/2517边框属性n边框样式的显示差异在IE和Firefox中略有区别groove、inset、outset和ridge，IE都支持得不够理想IE浏览器不支持的border-style效果，不推荐使用2023/1/2518边框属性n边框属性简写同时设置边框的三个属性border:1p

12、x dashed#336699;4条边框粗细均为1px4条边框均为虚线4条边框颜色均为#336699当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置2023/1/2519内边距属性n内边距（padding）用于控制内容与边框之间的距离会占据空间可设置盒子模型上、右、下、左4个方向的内边距值设置方式与border属性相似padding属性的值可以为0，即无内边距上边距内容边框2023/1/25202023/1/2521内边距属性n内边距分别设置4个方向的内边距属性属性语法规则语法规则说说 明明padding-left padding-left:10px;左内边距为左内边距为

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

14、0px;上内边距为上内边距为30px左、右内边距为左、右内边距为8px下内边距为下内边距为10pxpadding:20px 5px 8px 10px;上内边距为上内边距为20px右内边距为右内边距为5px下内边距为下内边距为8px左内边距为左内边距为10px2023/1/2523外边距属性n外边距（margin）用于控制元素与元素之间的距离会占据空间可设置盒子模型上、右、下、左4个方向的外边距值设置方式与padding属性相同margin属性的值可以为0，即无外边距2023/1/2524外边距属性nbody的外边距本身是一个盒子默认情况下，有若干像素外填充body的margin属性值设置为0时

15、默认情况下的body2023/1/2525外边距属性n外边距设置方法与padding属性设置方法类似可以设置1、2、3或4个属性值l设置1个属性值时，表示上、下、左、右4个margin均为该值l设置2个属性值时，前者为上、下margin值，后者为左、右margin值l设置3个属性值时，第1个为上margin的值，第2个为左、右margin的值，第3个为下margin的值l设置4个属性值时，按照顺时针方向，依次为上、右、下、左margin的值2023/1/2526盒子模型尺寸n盒子尺寸盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）内容的宽度或者高度

16、该盒子尺寸没有包含边框尺寸，表示无边框2023/1/2527演示案例-制作“主题相册”n页面效果2023/1/2528演示案例-制作“网页热门标签”n思路分析使用ID选择器定义划分html文档的div使用盒子属性美化网页元素外观使用盒子属性控制元素间距使用标题标签排版各级标题使用盒子属性制作带边框的图片 教师讲解实现思路并演示带边框，且与边框有间距的图片效果2023/1/2529标准文档流n概念简称“标准流”，指在不适用其他的排版和定位相关的特殊CSS规则时，各种元素的排列规则n分两类块级元素（block level）l以一个块地形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满l占有独立

17、空间2023/1/2530标准文档流n分两类行内元素（inline）l各个字母之间横向排列，到最右端自动折行l标签本身不占有独立的区域，仅仅在其他元素的基础上指定了一定的范围2023/1/2531标准文档流n块级元素与行内元素的区别块级元素拥有自己的区域行内元素没有自己的区域2023/1/2532标签与标签n标签区块容器标记，即与之间相当于一个容器通用的块级元素，无逻辑语义可以容纳各种HTML元素使用CSS控制时，其中的各标签都会随之改变2023/1/2533标签与标签n标签区块容器标记，区划行内元素通用的行内元素，无逻辑语义可以容纳各种HTML元素使用CSS控制时，其中的各标签都会随之改变2

18、023/1/2534标签与标签n标签与标签的异同相同点：l区块容器标记l独立出各个区块不同点：l是块级元素，在它前后的元素会自动换行l是行内元素，在它的前后不会换行2023/1/2535display属性ndisplay属性用于指定HTML标签的显示方式属性值：关键字l常用的有3个属性属性常用可能值常用可能值说说 明明displayblock 将元素显示为块级元素，该元素前后将元素显示为块级元素，该元素前后会带有换行符会带有换行符inline默认。元素会被显示为行内元素，该默认。元素会被显示为行内元素，该元素前后没有换行符元素前后没有换行符 none该元素不会被显示该元素不会被显示2023/1

19、/2536display属性ndisplay属性的应用块级元素与行内元素的相互转换为div和span标签设置display属性div变成了行内显示span变成了块状显示盒子7、8消失了2023/1/2537演示案例-制作“腾讯网站导航”n页面效果2023/1/2538演示案例-制作“腾讯网站导航”n思路分析使用ID选择器定义用于分块的div使用定义列表排版网站导航使用display属性将span标签转换为块级元素，并用它排版带背景图的标题使用盒子属性美化网站导航外观 教师演示操作步骤2023/1/2539总结n盒子模型属性有哪些？n如何计算盒子模型尺寸？n简单描述块级元素与行内元素的异同？n如何进行块级元素与行内元素的互相转换？总结并布置作业总结并布置作业2023/1/25402023/1/2541