关于盒模型

关于盒模型,它的属性我们知道分别有以下四个:

content(内容),padding(内边框),border(边框),margin((外边框)

在div,也就是盒模型中,通常会设置padding,border以及margin三个属性

padding一般是设置像素,控制内边框的大小,

border会设置边框的像素,边框线的类型:如solid(实线),double(双实线),dotted(点虚线),dashed(线段虚线),还会设置边框的颜色,

margin就只是设置外边框的像素大小,

但是三个属性都可以分别对上下左右四个边进行属性的设置,以实现不同的效果

接下来就一起来看一个运用了css的层叠性实现的盒模型案例

 

 在以上效果实现的代码中:

第12行就是利用了层叠性,

覆盖了第十一行的部分区域颜色,代码第24,23行同样是这个道理;

第12和24行就是分别对边框底部和顶部的颜色进行了再设置;

第18和25行代码则是对边框圆角进行了设置,以完成不同形状的效果实现

下面则是代码在网页中的效果:

 

 以上