盒子模型基础属性.pptx

《物联网Web前端开发基础》课程 盒子模型基础属性【任务3-2】盒子模型基础属性需求分析盒子模型的基础属性包括边框属性、内边距属性、外边距属性、背景属性、宽度属性和高度属性，通过设置这些属性可使HTML元素的表现形式更加多样化。下面将带领读者认识盒子模型的基础属性。【任务3-2】盒子模型基础属性知识储备—边框属性为了分割页面中不同的盒子，常常需要给元素设置边框效果。设置内容样式属性常用属性值边框样式border-style:上边 [右边 下边 左边];none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线边框宽度border-width:上边 [右边 下边 左边];像素值边框颜色border-color:上边 [右边 下边 左边];颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)综合设置边框border:四边宽度 四边样式 四边颜色;?none：没有边框solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线【任务3-2】盒子模型基础属性知识储备—边框属性CSS边框属性边框样式（border-style）属性值border-style综合属性 border-style:solid ; /*四边均为实线*/border-style:solid dotted ; /*上下实线、左右点线*/ border-style:solid dotted dashed; /*上实线、左右点线、下虚线*/【任务3-2】盒子模型基础属性知识储备—边框属性CSS边框属性边框样式（border-style） 边框宽度（border-width）属性值在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。注意：常用取值单位为像素。【任务3-2】盒子模型基础属性知识储备—边框属性CSS边框属性边框样式（border-style） border-width综合属性边框宽度（border-width）属性值border-width:5px; /*四边宽度均为5像素*/border-width:5px 3px ; /*上下边框5像素宽度、左右边框3像素宽度*/border-width:5px 3px 4px; /*上边框5像素宽、左右边框3像素宽度、下边框4像素宽度*/颜色值，例：red、green#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)【任务3-2】盒子模型基础属性知识储备—边框属性CSS边框属性边框样式（border-style） 边框宽度（border-width）#十六进制色值，例：#ccc实际工作中最常用边框颜色（border-color）属性值【任务3-2】盒子模型基础属性知识储备—边框属性CSS边框属性边框样式（border-style） border-color综合属性边框宽度（border-width）边框颜色（border-color）属性值border-color:#f00; /*四边均为红色*/border-color:#f00 #00f ; /*上下红色、左右蓝色*/border-color:#f00 #00f #0f0; /*上红色、左右蓝色、下绿色*/【任务3-2】盒子模型基础属性知识储备—边框属性CSS边框属性边框样式（border-style） ?border-top:上边框宽度 样式 颜色;?border-right:右边框宽度 样式 颜色;?border-bottom:下边框宽度 样式 颜色;?border-left:左边框宽度 样式 颜色;?border:四边宽度 样式 颜色;边框宽度（border-width）边框颜色（border-color）注意：宽度、样式、颜色顺序任意，不分先后边框综合属性（border）border:宽度,样式,颜色内边距（内填充）padding-top:上边距;padding-right:右边距;padding-bottom:下边距;padding-left:左边距;padding：四边内边距;【任务3-2】盒子模型基础属性知识储备—内边距属性内边距注意：内边距padding不允许使用负值padding:5px /*四个方向内边距为5像素宽度*/padding:5px 3px /*上下内边距为5像素，左右内边距为3像素*/padding:5px 3px 4px /*上内边距为5像素，左右内边距为3像素，下内边距为4像素*/【任务3-2】盒子模型基础属性知识储备—外边距属性我们设置的内边距为百分比，都是相对于父元素宽度width的百分比，随父元素width的变化而变化，和高