【CSS】创建布局

随着对分离HTML元素的语义重要性与其表现的影响的不断强调，CSS在HTML5元素布局方面的作用越来越重要。

1. 定位内容

控制内容最简单的方式就是通过定位，这允许你使用浏览器改变元素的布局方式。

1.1 设置定位类型

position 属性设置了元素的定位方法。

position 属性的不同值指定了元素定位所针对的不同元素。使用 top、bottom、left 和 right 属性设置元素的偏移量的时候，指的是相对与 position 属性指定的元素的偏移量。

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > Example   title  > 
       style   type  ="text/css"  >  
        img   {    top  :   15px  ;   left  :   150px  ;     border  :   medium double black  ;   width  :   150px  ;  } 
       style  > 
   head  > 
   body  > 
   p  >  
    There are lots of different kinds of fruit - there are over 500 varieties of banana alone.
    By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices.
    p  > 
   p  >  
    One of the most interesting aspects of fruit is the variety available in each country.
    I live near London, in an area which is know for its apples.
    p  > 
   img   src  ="imgs/banana.png"   id  ="banana"   alt  ="small banana"   /> 
   p  >  
    When travelling Asia, I was struck by how many different kinds of banana were available
    - many of which had unique flavours and which were only available within a small region.
    p  > 
   p  > 
       button  > Static   button  > 
       button  > Relative   button  > 
       button  > Absolute   button  > 
       button  > Fixed   button  > 
   p  > 
   script  > 
       var   buttons   =   document.getElementsByTagName(  "  button  "  );
      for  (   var   i   =   0  ; i      buttons.length; i  ++  ){
        buttons[i].onclick   =   function  (e){
            document.getElementById(  "  banana  "  ).style.position   =   e.target.innerHTML;
        }
    }
      script  > 
   body  > 
   html  >  

查看更多关于【CSS】创建布局的详细内容...