zoukankan      html  css  js  c++  java
  • 第四课:盒子模型+浮动+定位

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

  • 相关阅读:
    关于json的一些自己的了解
    .Net Core 控制台 使用Topshelf 加入DI(服务注册)
    【Linux】Centos7 入门到放弃记录
    【git】.net core +git减少包体积
    【git-bug累计】实践中git命令出现的问题总结
    [Bug] uni-app 上下切屏tabbar底部导航显示问题
    .NetCore2.0 vue-element-admin 出现的错误记录
    黑盒测试总结
    sql 学习笔记
    Linux 学习笔记
  • 原文地址:https://www.cnblogs.com/banchengping/p/4831129.html
Copyright © 2011-2022 走看看