5.1盒子模型概述 5.1.3 盒子的宽与高 盒子模型的总宽度与总高度 德 > 盒子的总宽度=width+左右内边距之和+左右 边框宽度之和+左右外边距之和 > 盒子的总高度=height-+上下内边距之和+上 下边框宽度之和+上下外边距之和
✎ 5.1.3 盒子的宽与高 结 论 ➢ 盒子的总宽度= width+左右内边距之和+左右 边框宽度之和+左右外边距之和 ➢ 盒子的总高度= height+上下内边距之和+上 下边框宽度之和+上下外边距之和 • 盒子模型的总宽度与总高度 5.1 盒子模型概述
5.2盒子模型相关属性 5.2.1 边框属性 为了分割页面中不同的盒子，常常需要给元素设置边框效果。 设置内容 样式属性 常用属性值 边框样式 border-style:上边[右边下边左边] none无（默认）、solid单实线、dashed)虚线 dotted点线、double双实线 边框宽度 border--width:上边[右边下边左边] 像素值 边框颜色 border-color:上边[右边下边左边； 颜色值、#十六进制、rgb(c,g,b)、 rgb(r%,g%,b%) 综合设置边框 border::四边宽度四边样式四边颜色； 圆角边框 border--radius:水平半径参数/垂直半径 参数： 像素值或百分比 图片边框 border--images:图片路径裁切方式/边 框宽度/边框扩展距离重复方式：
✎ 5.2 盒子模型相关属性 5.2.1 边框属性 为了分割页面中不同的盒子，常常需要给元素设置边框效果。 设置内容 样式属性 常用属性值 边框样式 border-style:上边 [右边 下边 左边]; none无（默认）、solid单实线、dashed虚线、 dotted点线、double双实线 边框宽度 border-width:上边 [右边 下边 左边]; 像素值 边框颜色 border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%) 综合设置边框 border:四边宽度 四边样式 四边颜色; 圆角边框 border-radius:水平半径参数/垂直半径 参数; 像素值或百分比 图片边框 border-images:图片路径 裁切方式/边 框宽度/边框扩展距离 重复方式;
5,2盒子模型相关属性 5.2.1 边框属性 CSS边框属性 边框样式(border-.style)属性值 none:没有边框 border-style综合属性 solid:边框为单实线 border-style:solid;/*四边均为实线* border-style:solid dotted;/*上下实线、左 dashed:边框为虚线 右点线*) dotted:边框为点线 border-style:solid dotted dashed;,/*上实线 左右点线、下虚线*) double:边框为双实线
✎ 5.2.1 边框属性 CSS边框属性 none：没有边框 solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 边框样式（border-style）属性值 border-style综合属性 border-style:solid ; /*四边均为实线*/ border-style:solid dotted ; /*上下实线、左 右点线*/ border-style:solid dotted dashed; /*上实线、 左右点线、下虚线*/ 5.2 盒子模型相关属性
5.2盒子模型相关属性 5.2.1 边框属性 CSS边框属性 边框样式(border-style) 边框宽度(border-width)属性值 在设置边框宽度时，必须同时设置边框样式，如果未设置样 式或设置为none,则不论宽度设置为多少都无效。 注意：常用取值单位为像素
✎ 5.2.1 边框属性 CSS边框属性 边框样式（border-style） 边框宽度（border-width）属性值 在设置边框宽度时，必须同时设置边框样式，如果未设置样 式或设置为none，则不论宽度设置为多少都无效。 注意：常用取值单位为像素。 5.2 盒子模型相关属性
5,2盒子模型相关属性 5.2.1 边框属性 CSS边框属性 边框样式(border-style) 边框宽度(border-width)属性值 border-width综合属性 border-width:5px/*四边宽度均为5像素*/ border-width:5px3px;/*上下边框5像素宽度 左右边框3像素宽度*7 border--width:5px3px4px;/上边框5像素宽， 左右边框3像素宽度、下边框4像素宽度*/入
✎ 5.2.1 边框属性 CSS边框属性 边框样式（border-style） 边框宽度（border-width）属性值 border-width:5px; /*四边宽度均为5像素*/ border-width:5px 3px ; /*上下边框5像素宽度、 左右边框3像素宽度*/ border-width:5px 3px 4px; /*上边框5像素宽、 左右边框3像素宽度、下边框4像素宽度*/ border-width综合属性 5.2 盒子模型相关属性