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

  • 相关阅读:
    JavaScript打开新窗口被拦截问题
    FileReader读取本地文件
    JS实现数组去重的6种方法总结
    cssReset
    鼠标拖拽定位和DOM各种尺寸详解
    关于前端本地压缩图片,兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js
    AJAX的get和post请求原生编写方法
    Grunt的配置和使用
    浏览器的工作流程
    Python基础——函数的迭代器和生成器
  • 原文地址:https://www.cnblogs.com/banchengping/p/4831129.html
Copyright © 2011-2022 走看看