zoukankan      html  css  js  c++  java
  • HTML5布局总结篇

    1.块级元素<div>,<p>,<h>,<hr>等标签

        总是从新的一行开始
        高度,行高,内边距,外边距都是可以控制的

     2.行级元素<span>,<a>,<img>,<input>

        和其他的元素在同一行
        高度,行高,内边距,外边距都是不可以改变的

     3.display的属性值none,  block,  inline, table ,inline-block

     4.visibility的属性值visible,hidden,collapse

     5.display="none"  与 visivility="hidden"的区别

           前者不占用页面空间,后者是要占用页面空间的

      6.定位position的属性:相关属性top ,bottom,left,right    常用属性值aotu

     

     
    7. z-index的属性:值越大,可表示显示的内容的位置越高

    8.overfolow的属性:当元素的内容溢出区域的时发生的事情设置

           属性值:hidden ,  visible, scroll, auto

    9.网页布局分为自然布局,浮动布局, 定位布局

    10.当一个元素被定义为浮动显示时,即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以,应该有个好的习惯即把浮动元素设置高和宽。如果没有设置,则元素会按照它所包含的内容大小来确定它的大小

    11.当元素浮动后,周边的对象会自动环绕浮动元素周围,形成一种环绕关系。

    12.块状元素之间的外边距会有重叠现象,但是浮动元素之间的外边距不会发声重叠现象。

    13.浮动元素移动,上移:margin-top:-**; 下移:margin-botom:-*px,其他以此类推。

    14.一般定位元素(绝对或是相对元素)都会覆盖在文档流对象之上。但是,select元素的窗口控件还不完全支持z-index

    15.在css定位布局中,一般遵循“外部相对定位,内部绝对定位”

    16.在body中设置min-760px,可以避免布局重叠现象。

    17.浮动的元素会脱离普通流,是下一个元素会被覆盖,

     注意:当下一个元素被覆盖的时候,应用使用clear属性,来清空浮动效果,查看到布局效果

    <!DOCTYPE html>
    
    <html>
    
        <head>
    
            <meta charset="utf-8" />
    
            <title>浮动布局</title>
    
            <style type="text/css">
    
                body{ margin: 0 auto;width: 1000px;align-content: center;}
    
                #div-1{width: 1000px; height: 30px;background-color: slateblue;margin: 3px auto;}
    
                #div-2{width: 1000px;height: 40px;background-color: forestgreen;margin: 1px auto;}
    
                #div-3{width: 590px;height: 400px;background-color: darkgoldenrod;float: left;margin:  3px auto5;}
    
                #div-4{width: 400px;height: 400px;background-color: darkmagenta; float: right;}
    
                #div-5{width: 1000px;height: 40px;background-color: deeppink;clear: both;}
    
               
    
            </style>
    
        </head>
    
        <body>
    
            <div id="div-1"></div>
    
            <div id="div-2"></div>
    
            <div id="div-3"></div>
    
            <div id="div-4"></div>
    
            <div id="div-5"></div>
    
        </body>
    
    </html>

     



  • 相关阅读:
    how to uninstall devkit
    asp.net中bin目录下的 dll.refresh文件
    查找2个分支的共同父节点
    Three ways to do WCF instance management
    WCF Concurrency (Single, Multiple, and Reentrant) and Throttling
    检查string是否为double
    How to hide TabPage from TabControl
    获取当前系统中的时区
    git svn cygwin_exception
    lodoop打印控制具体解释
  • 原文地址:https://www.cnblogs.com/zhengweizhao/p/6337533.html
Copyright © 2011-2022 走看看