CSS构造模型

1. div
2. 边距
3. 边框
4. 定位
5. 浮动

   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;

   }