no10 制作侧边栏（盒模型）

制作侧边栏模块4理解盒模型提升网页空间感湖南安全技术职业学院网页设计与制作教学团队入门测作业分析复习巩固网页设计中要学会精准计算元素实际占据的页面空间，合理地布局页面各元素，也要注重页面空间感设计，在不同栏目及不同内容之间设置留白，或添加边框线，提升作品视觉层次、可读性和美观度。本任务学习盒模型的相关知识，美化目录列表，制作侧边栏。学习内容理解CSS盒模型边框(border）内边距(padding)&外边距(margin)理解CSS盒模型网页中每一个HTML元素（如文字、图片、按钮）都是一个“盒子”。这个盒子由内到外依次包含：内容区(Content)——内边距(Padding)——边框(Border)——外边距(Margin)盒模型属性决定了元素在页面上实际占据的空间大小，以及与相邻元素的距离理解CSS盒模型内边距(padding)内容区与边框之间的空白区域。内容区(content)大小由width和height属性决定，用于显示文本、图片等实际内容。边框(border)围绕在内边距之外的框线。外边距(margin)盒子边框以外的空白区域，用来控制相邻元素之间的距离。理解CSS盒模型每个属性又有4个方向：top、bottom、left、right如：padding:20px;/*指每个方向都留20px的内边距*/

padding-top:10px;/*仅设置上内边距为10px*/📐盒子在页面上的总宽度计算公式总宽度=width+padding-left+padding-right

+border-left+border-right+margin-left+margin-right计算盒子实际占位尺寸理解CSS盒模型实际宽度为：300+20*2+1*2+30*2=402px在实际开发中，设置好盒子的宽度后，其高度由内容自然撑开，通常不建议给盒子再设置固定的高度值。边框(border）border-style(边框样式)•用于指定边框的线型，必设属性。•常用值：none(无),solid(实线),dashed(虚线),dotted(点线),double(双实线)。border-width(边框宽度)•用于指定边框的线型。•通常使用像素(px)作为单位，例如：1px,2px,3px。border-color(边框颜色)•用于设置边框的颜色。•支持颜色名(red)、十六进制(#FF0000)、rgb()、rgba()等。简写属性：border•将width、style、color三个属性合并书写例:

border:solid2pxred;盒子边框的设置包括边框样式（border-style)、宽度(border-width)及颜色(border-color)3个属性。边框(border）内边距(padding)&外边距(margin)边距padding(内边距)•边框线以内与内容之间的空白。•会直接撑大盒子，padding区域是会被背景覆盖的。margin(外边距)•边框线以外的留白。•不会撑大盒子，是透明的，不被背景覆盖。padding:10px;上下左右全为10pxpadding:10px20px;上下10px/左右20pxpadding:10px20px30px;上10/左右20/下30padding:10px20px30px40px;上→右→下→左(顺时针)值复制规则：内边距(padding)&外边距(margin)边距内边距(padding)&外边距(margin)边距垂直外边距会合并外边距在垂直方向上不会累加，而是取较大值。即上方元素的margin-bottom和下方元素的margin-top值步累加，而取较大值。示例解析•上方盒子：margin-bottom:20px;•下方盒子：margin-top:30px;实际间距≠50px，而是取最大值：30px结构分析“相关推荐”栏目内容可以分成两个部分：一是标题栏，可以使用标题标签组织；二是新闻目录，可以使用无序列表进行组织，注意每一个列表项里都是一个超链接。样式分析设置侧边栏宽度为360px，后面任务中涉及侧边栏的都按此宽度设置。栏目标题的高度设置为80px，上边框为3px的实线，框线颜色值为#95c62e，背景颜色为#f4f9ea。列表内容与边线之间可设置20px的空隙。列表项目符号使用背景图片，新闻标题不换行，超过部分用省略号表示。设置超链接的hover状态效果。出门测小结理解CSS盒模型盒子总宽度=width+左右padding+左右border+左右margin边框(border）borer:solid2pxred;设置盒子水平居中，需同时满足两个条件width:100px;m