码迷,mamicode.com
首页 > 其他好文 > 详细

第四课:盒子模型+浮动+定位

时间:2015-09-23 08:56:58      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

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对行内元素只支持左右,不支持上下。

 

第四课:盒子模型+浮动+定位

标签:

原文地址:http://www.cnblogs.com/banchengping/p/4831129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!