1、盒子模型:<div>内容</div>

                   padding:内边距

                   margin:内边距

2、浮动:(css属性)

           float:left  right   none

    清除浮动:

          clear:left   right   both

          例:

              <style>
                      #navigation {
                                   font-family:Arial;
                                        }
                      #navigation u l {
                                   list-style-type:none; 
                                   margin:0px;
                                   padding:0px;
                                            }
                       #navigation li {
                                   float:left;
                                            }
                       #navigation li a:hover{
                                   background-color:#990020; 
                                   color:#ffff00; 
                                             }
               </style>

        <body>

                 <div id="navigation">
                    <ul>
                         <li><a href="#">首页</a></li>
                         <li><a href="#">产品中心</a></li>
                         <li><a href="#">电影</a></li>
                         <li><a href="#">书籍</a></li>
                         <li><a href="#">学习天堂</a></li>
                     </ul>
                 </div>

        </body>

 

3、块级元素:<div>   <ul>   <li>    <p>   <ol>      

          块级元素:占满整行 

 

4、行内元素:<span>  <a>   

         行内元素:只受自身内容大小占位置

 

5、行内元素和块级元素互换:

       display:block           行变块

       display:inline           块变行

      display:inline           具有块和行元素的功能:1、受到高宽的影响   2、不会占满一行

 

             1、padding对行内元素的各种情况是支持的。

             2、margin对行内元素只支持左右,不支持上下。

 

posted on 2015-09-23 07:51  半成品~  阅读(143)  评论(0编辑  收藏  举报