DIV+CSS布局1

一、div与span的区别

div:块(block)元素,在元素后面换行，显示下一个元素，可以改变元素的宽度和高度

span:内联(inline)元素，多个元素可以显示在一行内，不可以改变元素的宽度和高度

.div1{

background-color:red;

}

.div2{

background-color:green;

}

.span1{

background-color:red;

}

.span2{

background-color:green;

}

---

二、盒模型

margin(盒子外边距) 、padding(盒子内边距)、 border(盒子边框宽度)、 width(盒子宽度) 、height(盒子高度)

margin：不会改变盒子的宽度和高度  

padding、border:会改变盒子的宽度和高度

.div3,.div4{

background-color:lightgray;

width:300px;

height:300px;

text-align:center;

}

.div3{

border:solid 10px red;

}

.div4{

margin:10px;

}

待续。。。