CSS构造模型

21.1 div

部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域.

1.添加div

    <div>

        <p>This is our content area.</p>

</div>

给div添加一个id

<div id="container">

        <p>This is our content area.</p>

</div>

#container {

    Padding: 20px;

    Border:1px solid #000;

    Background:#ccc;

}

2.添加子div

<div id="container">

        <p>This is our content area.</p>

        <div class="box">

            <p>I'm in a box!</p>

</div>

<div class="box">

            <p>I'm also in a box!</p>

</div>

</div>

.box {

    margin: 10px;

    padding: 20px;

    border: 1px solid #000;

}

3.div和上下文选择器

    .box p {

        Color: #333;

}

#container p {

    Color: #333;

}

21.2 边距

外边距(margin)

    外边距声明:

    #container {

        Margin-top: 20px;

        Margin-left: auto;

        Margin-right: auto;

        Margin-bottom; 20px;

        Width: 300px;

        Border: 1px solid #333;

        background: #ccc;

}

#container {

    Margin: 20px auto 1em auto; /*上,右,下,左*/

}

    用margin:auto居中

    Body {

        Text-align: center;

}

    #container {

        Width: 400px;

        Margin: 10px auto 10px auto;

        Padding: 20px;

        Background: #ccc;

        Text-align: left;

}

5.内边距(padding)

    #container {

        Padding-top: 20px;

        Padding-left: 10%;

        Padding-right: 1em;

        Padding-bottom: 0;

        Background: #ccc;

}

6.外边距,内边距和主体

    Body {

        Margin: 0;

        Padding: 0;

}

21.3 边框

    Border-style (边框样式)

None(无边框),dotted(点线),dashed(虚线),

Solid(实线),double(双线),groove(凹槽),ridge(凸槽),

Inset(凹边),outset(凸边)

/*上 右 下 左*/

Border-style: solid dotted inset outset;

    Border-width(长度)

    Border-top-width

    Border-right-width

    Border-bottom-width

    Borer-left-width

    Border-color

    Border

    Border-top

    Border-right

    Border-bottom

    Border-left

    Border(四周)Border-top(上)…

21.4 定位

    P,h1和div等成为块级元素.意思是这些元素显示为一块内容,即"块框".与之相反,strong和span等元素称为行内元素,即"行内框".更多内容,后章在述.

    (1).相对定位

    #myBox {

        Position: relative;

        Top: 20px;

        Left: 20px;

}

(2).绝对定位

    #myBox {

Position:absolute;

        Top: 20px;

        Left: 20px;

}

21.5 浮动

    .news img {

        Float: left;

}

.news p {

    Float: right;

}