• 使用Div + CSS布局页面


           在设计网页时,能够控制好各个模块在页面中的位置是非常关键的。本章将讲解利用Div+CSS对页面元素进行定位的方法。

           Div是HTML中指定的专门用于布局设计的容器对象

           Div是CSS布局的核心对象。

           Div本身与样式没有任何关系,样式需要编写CSS来实现,因此Div对象应该说从本质上实现了与样式的分离。(最终样式由CSS来完成)

           无论是多么复杂的布局方法,都可以使用Div之间的并列与嵌套来实现。

    为了实现内容与表现的分离,不应当将align对齐属性与style行间样式表属性编写在Div标签中,因此,Div代码只可能有以下两种形式:

          <div id="id 名称">内容</div>

          <div class="class 名称">内容</div>

    CSS布局定位

        CSS排版首先将页面在整体上进行<Div>标记的分块,然后对各个块进行CSS定位,最后在各个块中添加相应的内容。通过CSS排版的页面,更新

      十分容易,甚至是页面的拓扑结构,都可以通过修改CSS属性来重新定位。

      1. 浮动定位

          浮动定位是CSS排版中非常重要的手段。

          浮动的框可以左右移动,直到其边缘碰到包含框或另一个浮动框的边缘。

              属性:float      可用值:none / left / right

          浮动定位会有一些特殊情况(包含框无法容纳……)

      2. position定位

          position指定块相对于其父块的位置和相对于它自身应该在的位置。

              属性:position

              可用值:

                  relative    相对    对象不可层叠(在正常文档流中偏移位置)

                  absolute    绝对    其层叠通过 z-index 属性来定义(将对象从文档流中拖出)

                  fixed       悬浮    使元素固定在屏幕的某个位置(不随滚动条的滚动而滚动)

          1. 相对定位:

              无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致覆盖其他框。

          2.绝对定位:

              绝对定位使元素的位置与文档流无关,因此不占据空间。

              简单地说,使用了绝对定位之后,对象就浮在网页的上面了。(z-index属性的值越大,框在堆中的位置就越高)

          3.悬浮定位:

              本质上与将其设置为absolute一样,只不过块不随着浏览器的滚动条向上或乡下移动。

        对于定位的主要问题是要记住每种定位的意义。相对定位是相对于元素在文档流中的初始位置,而绝对定位是相对于最近的已定位的父元素(如果不存在

      已定位的父元素,那就相对于最初的包含块)

        因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。

  • 相关阅读:
    一个翻译小程序(带一点点抒情)
    前线解释多线程《二》
    一周杂记(MVC 图片上传)
    MVC杂记<>路由
    MVC杂记<三>Controller
    201920201学期20192412《网络空间安全专业导论》第二周学习总结
    201920201学期20192412《网络空间安全专业导论》第一周学习总结
    命令行执行php脚本 中$argv和$argc
    搭建lnmp教程
    php中static 静态关键字
  • 原文地址:https://www.cnblogs.com/zhangchaoran/p/6920763.html
Copyright © 2020-2023  润新知