css设置板块变高时不被挡住,DIV+CSS布局中的几个重难点属性.docx

DIV+CSS布局中的几个重难点属性

1、组织元素(SPan禾口 div )

SPan和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。

在这一课中，我们将进一步探究 SPan和div的用法，因为这两个HTML元素对于CSS是很重要的。 用SPan组织元素

SPan元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，

SPan可以对文档中的部分文本增添视觉效果。

让我们用一句本杰明?弗兰克林(Benjamin Franklin )的名言来举个例子：

以下是代码片段：

早睡早起使人健康、富裕又聪颖。

假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以

用标签来标记上述每一点好处。然后，我们将这几个SPan设置为相同的class。这样，我们

稍后就可以在样式表里针对这个 class定义特定的样式。

以下是代码片段：

早睡早起使人 健康 、VSPan CIaSS="benefit">富裕

禾口 聪颖 。

相应的CSS代码如下：

以下是代码片段：

SPa n.ben efit{

coloured;

}

当然，你也可以采用id来为SPan元素添加样式。如果采用 id的话，你必须为这三个SPan元素

各自分别指定一个唯一的id。

用div组织元素

如前面例子所示，SPan的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。

除去这点区别，div和SPan在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总 统按其所属的政营分别组织为两个列表:

以下是代码片段：

• 富兰克林? D?罗斯福
• 哈利? S ?杜鲁门
• 约翰? F ?肯尼迪
• 林登? B ?约翰逊
• 吉米?卡特
• 比尔?克林顿
  • 德怀特? D ?艾森豪威尔
  • 理查德?尼克松
  • 杰拉尔德?福特
  • 罗纳德?里根
  • 乔治?布什
  • 乔治? W?布什

    在这里，我们可以采用跟上例同样的方法来处理样式表: 以下是代码片段：

    ★democrats {

    backgro Un d:blue;

    }

    #republica ns{

    backgro Un d:red;

    2、盒状模型

    CSS中的盒状模型(box model )用于描述一个为 HTML元素形成的矩形盒子。盒状模型还涉及 为各个元素调整外边距(margin )、边框(border )、内边距(Padding )和内容的具体操作。

    CSS中的盒状模型

    !

    margin

    I

    I

    I

    ||

    border

    I

    I

    I

    I

    I

    I I

    Padeling

    I I

    I I

    I

    I

    I

    I

    I

    I

    I I

    COntenU

    I I

    I I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    I

    □oπon

    hoed de Ia IILaEge

    bord de La bordure

    hord (Ie 1'亡SPaCeiaerLt

    hord du CCIntenU

    在例子中，有一个标题和一些文本。该例的HTML代码如下(摘自世界人权宣言)

    以下是代码片段：

    Article 1:

    AII huma n beings are born free

    and equal in dig nity and rights.

    They are en dowed With reas On and Con SCie nce

    and should act towards Oneano ther in a

    SPirit of brotherhood

    通过添加一些颜色及字体信息，该例可以有以下显示效果:

    ArtiCIe 1

    All human be∣∩gs are born free and equal in dignity and rights. They are endowed With reason 日nd COnSCienCe and ShOUld act towards One another in a SPirit Of brotherhood.

    这个例子包含