日期:2014-05-17  浏览次数:20586 次

CSS样式学习笔记之二:定位

   1 P ,H1,div等元素称为块元素,就是说这些元素显示为一块内容。而Strong,Span则是行内元素,应为他们的内容显示在行中,即行内框。

   2可以使用display属性改变框的类型,通过将display属性设置为block,可以让行内元素变的像块一样,也可以通过将dispay属性设置为NONE,让生成的元素没有框。

   3CSS样式中有3种定位机制,普通流,浮动,绝对定位。默认为普通流定位。

   <div id="myBox">
??? ??? ??? some text
??? ??? ??? <p>Some more text</p>
??? ??? </div>

???? some会被当作段落对待,下面显示Some more text的时候会自动换行显示。

   A相对定位:

   #myBox{
    position:relative ;
    left:500px;
    top:20px;

   }

   B绝对定位:

   
   #branding{
    width:600px;
    height:50px;
    position:relative;
   }

   #branding .tel{
    position:absolute ;
    right:10px;
    bottom:10px;
    text-align:left;

   }

   C浮动定位:

   .news{
      background-color:gray;
      border: solid 1px black;
      float:left;

      }
   .news img{
      float:left;
      }
   .news p{
      float:right;
     }

  .clear{
    clear:both;
   }

?