我在 CSS基础学习十三：盒子模型的i博文只是阐释了CSS盒子模型，并没有过多的使用实例来演示。这篇博
文就来做一些盒子模型知识的补充。这一部分对于网页总体布局还是蛮重要的，过去大多数使用HTML中的table元素
和框架标签来进行网页的整体布局，现在我们使用最多的是DIV+CSS网页布局。所以一定要掌握好盒子模型，记住
content，border，padding和margin各自在盒子中的作用和使用方式。
先来看一个完整元素的盒子模型实例：
CSS盒子模型演示
第一个盒子
第二个盒子
第三个盒子
运行的结果为：
我们会好奇哪些元素可以作为盒子模型？其实任何一个HTML标签都可以盒子！但是盒子的类型是有区别的，我
们重点讨论这个问题，这就涉及到了display属性。
display属性：
设置元素的盒模型的类型，也就是行内元素和块级元素的类型。
经常可用的值：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+ICAgICAgIG5vbmUgsrvP1Mq+o6zS/rLYPC9wPgo8cD4gICAgICAgaW5saW5lIMTawarUqsvYKNDQxNrUqsvYKTwvcD4KPHA+ICAgICAgIGJsb2NrIL/pvLbUqsvYPC9wPgo8cD4gICAgICAgaW5saW5lLWJsb2NrINDQxNq/6by21KrL2DwvcD4KPHA+ICAgICAgIM7Sw8fPyMC0u9jS5MTE0KnKx7/pvLbUqsvYo6zQ0MTa1KrL2DwvcD4KPHA+ICAgICAgIEhUTUyx6sept9bOqsG9tPPA4KO6PC9wPgo8cD4gICAgICAgMb/pvLax6sepKNSqy9gpo7rSu7j2zerV+7XEx/i/6aOsx/jT8qGjserHqb3hyvi687a809C7u9DQoaOzo9PDserHqdPQo7pkaXYgcCBkbCB0YWJsZSBvbCB1bCB0aXRsZbXIoaM8L3A+CjxwPiAgICAgICAy0NDE2rHqx6ko1KrL2CmjutPD09q/6by21KrL2MTao6yyu8Tcse3KvtK7uPbN6tX7tcTH+L/po6zSu7j2x/i/6bvy1d/Wu8rH0rvQ0MTatcTEs9K7sr+31qGjserHqb3hPC9wPgo8cD7K+Lrzw7vT0Lu70NCho7Oj08Ox6sep09CjumZvbnQgc3BhbiBpbWcgaW5wdXQgc2VsZWN0IGG1yKGjPC9wPgo8cD4gICAgICAgz8LD5s7Sw8e+2cD919PAtMu1w/fU9cO0yrnTw2Rpc3BsYXnK9NDUo7o8L3A+CjxwPiAgICAgICAgyrXA/dK7o7q4+GRpdtSqy9i6zXNwYW7UqsvYyejWw8/gzay1xL/ttsi6zbjftsijujwvcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;">
p区域
span区域
运行的结果为：
看上述的结果一目了然，p区域显示宽度和高度，与文本内容的多少无关；而span区域不显示设置宽度和高度，
文本内容有多少它就有多少的宽度和高度，这就说明了p元素和span元素的盒子类型不一样。
实例二：再增加一个span元素，设置同样的高度和宽度，再把它的display属性设置为：block
CSS盒模型演示
p区域
span区域1
span区域2
运行的结果为：
这一次我们看到了不一样的两个span元素，因为第二个span元素它通过display属性设置为了块级元素，所以高度
和宽度都显示了出来。
实例三：区别行内块级元素和块级元素
CSS盒模型演示
p区域
span区域1
span区域2
欢迎来到攻城课堂
span区域3
欢迎来到攻城课堂
运行的结果为：
行内块级元素还是处于一行，它的右侧还可以其他的元素；但是块级元素就不可以，第二个元素必须换行才能显
示，这就是它们最直接的区别。
对于盒子模型的display属性暂时了解了这么多，如果有什么错误，会及时更正！！后续会学到更深层次的知识，
回头来在进行补充。
