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

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

 

转载于:https://www.cnblogs.com/banchengping/p/4831129.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值