HTML5+CSS3网页设计实战 课件 第3章 盒子模型

第3章

盒子模型01学习目标02课程思政目标03知识点04本章练习PPT模板/moban/

学习目标理解盒子模型的特点，知晓盒子模型的种类；能记住常见的容器的英文命名；深刻理解标准盒模型的构成，掌握宽高、内外边距、边框属性的代码格式；掌握通过数值计算，能正确设置稍微复杂点的嵌套结构的容器各项属性；了解容器溢出、容器坍塌等现象的原因；能根据页面效果合理地定义、绘制出页面的容器结构图；养成给目标容器设置边框或背景色辅以观察的良好习惯。第3章

盒子模型1通过本章学习，要求达到以下既定目标：课程思政目标2对盒子各属性的精确计算，提升一丝不苟的学习态度、精益求精的工作态度。通过布局案例，了解“感动中国”的众多人物，树立正确的时代价值观，远离畸形的追星文化。世界最大单口径射电望远镜——“天眼”，了解中国天眼的技术含量。北京奥运会吉祥物“福娃”，回忆起开幕式各种天马行空、精彩纷呈的节目，为中国呐喊，中国人智慧的骄傲。了解本章成语的出处，理解成语含义与知识点理解的结合：“层见叠出”，一个看似复杂的事情，我们也可以拆解为一个个简单的小项目，理解透彻后再组合起来，强调培养学生由繁入简，由简返繁的能力。第3章

盒子模型3知识点3.1盒子模型特点3.2标准盒模型width属性、height属性安装调试用的浏览器margin外边距属性padding内边距属性border边框属性background背景属性第3章

盒子模型3.3盒子模型的相关属性3.1盒子模型特点3知识点页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局，浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。盒子模型分为两种：第一种是W3C标准的盒子模型，第二种IE浏览器下的IE盒子模型。在ie8版本已上的浏览器的浏览器默认是标准盒模型，所以目前我们不需要为十几年前的电脑考虑它的IE浏览器版本，毕竟IT行业中的摩尔定律反映出硬件更新换代速度极快。而IE盒子模型的计算方式就不在本书中论述，怕各位学起来混淆。3.1盒子模型特点3知识点给盒子（容器）定义id或者class选择器，而这些选择器的名称虽然是自定义的，但不能使用毫无意义的abc，或者a1、a2、a3等名字。以下是常用的容器（盒子）名字，如表3-1所示。3.1盒子模型特点容器内容id或class名称容器内容id或class名称整个页面或很大的容器container主内容区Content、main主导航mainnav子导航subnav页头header页脚footer顶导航topnav边导航（侧边栏）sidebar公司标志logo海报区banner菜单menu子菜单submenu标题title图标icon面包屑导航（当前所处位置提示）breadcrumb搜索search登陆login

3知识点标准盒模型如图3-1所示，width指的是内容区域content的宽度；height指的是内容区域content的高度。3.2标准盒模型W3C标准盒模型下盒子的大小=width（content）+border+padding+margin3.1标准盒模型3知识点3.2标准盒模型知识点：标准盒模型记忆关键词：层见叠出关键词解析：层见叠出理解为容器计算宽高数值时要考虑接连不断的父子嵌套关系。当网页总体宽高比喻成一个集装箱，里面有包含大量木箱子，木箱子又装着若干个中箱子…………从单个箱子容器来说，内容区以外有三层（内边距、边框、外边距）。装物品的纸盒可以认为是容器的边框，那内边距就是纸盒与物品之间的防撞的填充物，外边距就是防纸盒被挤压的木箱子。在精确计算网页中每个元素的宽高时，我们要先固定总体的宽高值，如同集装箱尺寸在国际标准中是固定的，一层一层往内部计算各种中小箱子的尺寸，而非从内部最小的箱子开始计算。明·沈德福《万历野获编补遗·场题犯讳》：“盖上是时方修祈年永命故事，臣下争进谀词以求媚，故至诚无息一章，层出叠见，初不计及御名上一字也。”层见叠出——意思是指接连不断出现，比喻事物很多。3知识点width和height：这两个属性定义了盒子的内容区域的宽度和高度。在W3C盒子模型（标准盒模型）中，width和height指的是内容区域的宽度和高度。padding：内边距，定义了内容和边框之间的空间。border：边框，定义了盒子边框的样式、宽度和颜色。margin：外边距，定义了盒子与其他元素之间的空间。此外，盒子模型还有一些扩展属性，如背景属性、颜色透明度、圆角、图片边框、阴影和渐变等，这些属性为网页布局提供了更多的视觉效果。3.3盒子模型的相关属性3.3盒子模型的相关属性3知识点3.3盒子模型的相关属性3.3.1width属性、height属性width读音——英[wɪdθ]height读音——英[haɪt]width、height属性用于定义元素的宽度、高度，通常使用像素px、百分比%等形式来指定高度的数值，其他形式不做深入了解，只需要知道这些单位的应用场景、所起作用即可。像素值（px）：像素值是固定的，不论屏幕分辨率如何变化，它的宽度都是不变的。例如：width:300px;百分比（%）：百分比宽度是相对于父元素的宽度的。例如：width:50%;em单位：这是一个相对单位，通常相对于当前元素的字体大小。例如：width:2em;3知识点3.3盒子模型的相关属性rem单位：这个单位相对于根元素（html）的字体大小。例如：width:2rem;vw/vh单位：这些单位分别代表视口宽度/高度的一百分之一。例如：width:50vw;auto：当设置为auto时，浏览器将自动决定元素的宽度。例如：width:auto;fit-content：这个值会根据内容的多少自动调整元素的宽度，但是最大不会超过它的父元素的宽度。例如：width:fit-content;min-content和max-content：这两个值会根据内容的最小尺寸或最大尺寸自动调整元素的宽度。例如：width:min-content;或width:max-content;3知识点3.3盒子模型的相关属性【案例1】完成如图3-2所示的“推荐信息”版块的HTML代码。3知识点3.3盒子模型的相关属性【案例2】子元素宽度大于父容器宽度时的处理手法。思路一：结合overflow设置超过区域隐藏，处理图片与容器大小相差无几的情况。思路二：强行修改宽高，优点是能保留图片所有内容，缺点是可能出现图片比例偏差过大。思路三：将图片设置为背景图，背景图片X、Y偏移一定比例的方式，优点是不影响原图比例，缺点是舍弃了图片四周内容。3知识点3.3盒子模型的相关属性【案例3】文字超过容器宽度时，后续文字改成省略号，把过长文字用省略号替代，既起到提示有后续文字的作用，也不会让文字被切割的支离破碎。3知识点3.3盒子模型的相关属性【案例4】容器异常塌陷容器塌陷，可以理解为元素位置偏离我们预期，毫无道理的窜到前面元素的位置。产生塌陷的原因主要来自于前面有元素出现浮动属性，而父容器未设置高度导致。时刻提醒各位，在标准流布局下容器不设置height属性，可以由子元素撑开高度，但如果子元素使用了浮动或定位方式后，就会出现该父容器高度值被认为是0px的情况，也就产生了高度塌陷问题。3知识点3.3盒子模型的相关属性3.3.2margin外边距属性margin读音——英[ˈmɑːdʒɪn]margin属性是CSS中用于设置元素周围空间的关键属性，它允许开发者控制元素的上、右、下、左四个方向的外边距，从而影响元素与其周围元素的间距。简单理解成：只要不属于该容器内部的元素都算“外部”元素，margin用途就是拉开与其他元素的距离，可谓有点“拒人于千里之外”的意味。margin属性允许使用负值，但建议非特殊场合，不要使用负值写法。3知识点3.3盒子模型的相关属性相关属性详见表-2所示。属性描述margin简写属性。在一个声明中设置所有外边距属性。margin-top设置元素的上外边距。margin-right设置元素的右外边距。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin简写：分别写“上右下左”的外边距数值（时针0到12点顺时针旋转来记忆），如图3-35所示。3知识点3.3盒子模型的相关属性以下是一些示例：margin:10px20px30px40px;/*上边有10px的边距，右边有20px的边距，下边有30px的边距，左边有40px的边距。*/margin:10px;/*四个边都有10px的边距*/margin:10px20px;/*上/下边有10px的边距，左/右边有20px的边距*/margin:10px20px30px;/*上边有10px的边距，左/右边有20px的边距，下边有30px的边距*/3知识点3.3盒子模型的相关属性【案例5】完成如图3-38所示的浅灰色容器水平居中效果，同时设置各图片之间的间距，不要求整体图片集的左右间距对称。3知识点3.3盒子模型的相关属性3.3.3padding内边距属性padding读音——英[ˈpædɪŋ]CSS的padding属性用于定义元素内部的空间，即元素内容和元素边框之间的空白区域。它允许你设置元素的上、下、左、右四个方向的内边距。padding属性不允许使用负值，相关属性详见表3-3所示。属性描述padding简写属性。在一个声明中设置所有内边距属性。padding-top设置内容（子元素）与该元素顶部（上边框）的距离。padding-right设置内容（子元素）与该元素右边（右边框）的距离。padding-bottom设置内容（子元素）与该元素底部（下边框）的距离。padding-left设置内容（子元素）与该元素左边（左边框）的距离。3知识点3.3盒子模型的相关属性【案例6】设置图片与边框之间的间距，如图3-41所示。3知识点3.3盒子模型的相关属性3.3.4border边框属性border读音——英[ˈbɔːdə(r)]border简写属性在一个声明设置所有的边框属性，可以按顺序设置如下属性：border-width、border-style（必需）、border-color。相关属性详见表3-4所示。属性值描述borderborder边框属性的简写border-width指定边框的宽度border-style指定边框的样式，其中：dotted点线、dashed虚线、solid实线、double定义两个边框。border-color指定边框的颜色，CSS颜色表达的方式有：颜色名称，如red,blue,green等。十六进制颜色代码：如#FF0000表示红色，#0000FF表示蓝色。RGB值：如rgb(255,0,0)表示红色，rgb(0,0,255)表示蓝色。RGBA值：类似于RGB，但增加了alpha透明度值，如rgba(255,0,0,0.5)半透明红色。border-radius设置四个角的圆角半径（圆角度）。3知识点3.3盒子模型的相关属性3.3.5background背景属性background读音——英[ˈbækɡraʊnd]background属性是一个简写属性，用于设置一个或多个背景相关的子属性。最常用的的语法如下：background:<background-color><background-image><background-repeat><background-position><background-size>;其中：background-color为背景颜色。background-image为背景图像。background-position为背景图像的位置。background-repeat 规定如何重复背景图像。background-size为背景图片的尺寸。3知识点3.3盒子模型的相关属性【案例7】完成精灵图效果。所谓的精灵图(sprite)，就是通过将多个小的图标集合到一张图片上，然后通过CSS背景定位来显示需要的图标。这样做可以减少HTTP请求的次数，从而加快页面加载速度。核心的技法就是将容器设置padding-left，这空出的区域专门用于显示背景图。接下来我们使用如图3-46所示的sprite.png图像文件，完成三个容器显示图标的效果。sprite.png文件版面效果3.3基础练习4本章练习【练习1】以某公司页面的产品或新闻列表区为例，如图3-50所示，使用Photoshop或画笔工具绘制它的容器包含关系。3.3基础练习4本章练习【练习2】以某公司首页的页脚区域为例，如图3-52所示，使用Photoshop或画笔工具绘制它的容器包含关系。3.3基础练习4本章练习【练习3】下图所示为之前练习的页面，如图3-53所示，通过计