原创CSS网页布局八盒模型

本节将和大家讨论的是CSS网页布局中最核心的内容,盒模型.

 

布局,无论是传统的表格布局,或者是我们正在学习的CSS布局.其核心思想都是对整个网页的分区.

 

在这里,我们索性将网页元素看成一个个的盒子.这样会简单许多.

 

来看看3800hk的网站如果用盒模型来模拟,会是怎样的.

 

这里的效果图不知道大家看起来有想吐的感觉没？

 

意思懂就行了.

 

我们用HTML标签配合CSS来看下盒模型.

 

大家有没有保存XHTML资料表?

 

这里,几乎每个标签,实际上都是一个盒子.因为其中包含了网页内的元素.

 

盒子的属性：

·高度 – width 单位

·宽度 – height 单位

·内边距 - padding

·外边距 - margin

·边框 – border [3个值] ⒈边框粗细,⒉solid 实线 ⒊边框颜色

 

我们来看一个图形,理解下盒子的属性.

 

 

默认的元素是看不见这些区域的,所以我们需要将其显示出来[颜色],以便能醒目的理解盒模型.

 

background:背景色.

 

我们了解了盒模型的属性写法和背景色的属性写法,现在我们看看这些属性的使用方法.

 

我们现在就可以利用所学的盒模型知识来做上中下的分区了.例如blog.我们来试验下.

 

下节：外边距折叠,和盒模型的上,左,右,下四边的单独设置.

 

上一篇：原创CSS网页布局[七]字体属性

下一篇：原创CSS网页布局[九]外边距折叠与预防