1、盒子模型的平面结构:
这就是每个网页的基本盒子模型:从内到外元素组成:
1、外边距:margin 2、盒子边框:border
3、盒子内边距:padding 4、盒子内容:content
其中margin、border、padding分别有四个方向属性:top、right、bottom、left;
其中的border存在三个属性,常用简写:border{1px solid red}
border属性:
div{
border-width:2px;
border-style:solid;
border-color:red;
}
padding顺序写入一、二、三、四个值的含义:(margin与之类似)
padding:10px; 四个内边距都是10px
padding:5px 10px; 上下5px 左右10px
padding:5px 10px 15px; 上5px 右10px 下15px 左因为缺省与右相等,则为10px
padding:5px 10px 15px 20px; 上5px 右10px 下15px 左20px
2、盒子模型的3D立体结构:
盒子模型从上到下显示为5层:
1、边框:border
2、内容和内边距:content+padding
3、背景图片:background-image
4、背景色:background-color
5、外边距:margin
这样就很容易理解
background: url(../images/logo.gif)
img(src(../images/logo.gif))
背景图片与插入图片层次为背景图片在下了。