盒子模型 | 易学教程

1.盒子模型的相关属性

1.边框属性

1.边框样式（border-style）
none：没有边框设置
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为实线
在设置边框的样式时，既可以单边进行设置，也可以同时设置4条边的样式
例如：
border-top-style:上边框样式
border-right-style:右边框样式
border-bottom-style下边框样式
border-left-style:左边框样式
border -style:上边框样式右边框样式下边框样式左边框样式
border-style:上边框样式左右边框设置下边框设置
border-style:上下边框样式左右边框设置
border-style:上下左右边框样式
实现方式：
p{border-style:dashed solid solid solid}
2.设置边框宽度（border-width）
border-top-width:上边框宽度
border-right-width:右边框宽度
border-bottom-width下边框宽度
border-left-width:左边框样式
border-width：上边框宽度【右，，，，下，，，，左】
实现方式：
p{border-width：3px；/设置综合的4边宽度/
}
3.边框颜色（border-color）
和以上的俩个差不多
4.综合边框的设置
boder：思辨宽度样式颜色
实现方式：
p{border：50px double #ccc }

2.内边距属性

padding-top:上内边距框
padding-right：右内边距框
padding-left：左内边距框
padding：上内边距框【右内，，，下内，，，，左内，，】
可以进行图像的边框设置
实现方式：
第一步：css的文件中进行img的方法设置
img{
padding：80px ； /图像的4个方向的内边距相同/
padding-bottom：0； /单独设置下内边距/
}
第二步：进行图片的插入就能实现
注意：要对图片进行内边距设置时的代码应是