CSS的三种定位形式

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

本节介绍在普通流下的定位方式：

  • 行内元素在同一行内横向排列：行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行。 行内元素举例：a，img，font，b，i，u， span，input
  • 块级元素占满整个一行，在页面中竖向排列：块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。 块级元素举例：p, div, hn, pre, hr, ul, ol, li, form
  • 对于嵌套的元素盒子也是嵌套的关系
实例：
<body>
    <div style="border:1px solid #CCC; width:50%;">
       <div style="border:1px solid red;margin:15px;">网页的banner（块级元素）</div>
       <a href="#" style="border:1px solid gray;margin:5px;padding:3px;">行内元素1</a>
       <a href="#" style="border:1px solid gray;margin:5px;padding:3px;">行内元素2</a>
       <a href="#" style="border:1px solid gray;margin:5px;padding:3px;">行内元素3</a>
       <div style="border:1px solid green;margin:15px;">这是块级元素<p>这是盒子中的盒子</p></div>
    </div>
</body>
单击我看效果
普通流下定位的应用：制作竖直导航菜单

  1. 下面实例中的第一个div内是6个行内元素：标记a，在默认情况下行内元素a在浏览器窗口中显示为一行，可以作为横向导航菜单
  2. 为第二个div设置了id为nav，在head中将元素 a 的display属性设置为了block
    • 通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示
    • display的属性有：block | inline | none | list-item
      1. 若display的属性设为block，则元素总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非用width设定一个宽度
      2. 若display的属性设为inline，则元素和其他元素都在一行上，高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
      3. 若display的属性设为none，该元素被设置为隐藏，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。如制作下拉菜单、tab面板等有时就需要用 display: none把菜单或面板隐藏起来
      4. 在html中只有li元素默认是 list-item ，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。
<head>
    <title>菜单导航</title>
    <style type="text/css">
       a:hover{
          text-decoration:none;
       }
       #nav a {
          font-size: 14px;
          color: #333333;
          text-decoration: none;
          background-color: #CCCCCC;
          display: block;
          width:140px;
          padding: 6px 10px 4px;
          border: 1px solid #000000;
          margin: 2px;
       }
       #nav a:hover {
          color: #FFFFFF;
          background-color: #666666;
       }
    </style>
</head>
<body>
    <div>
       <a href="#">首 页</a>
       <a href="#">中心简介</a>
       <a href="#">政策法规</a>
       <a href="#">常用下载</a>
       <a href="#">为您服务</a>
       <a href="#">技术支持和服务</a>
    </div>
    <div id="nav">
       <a href="#">首 页</a>
       <a href="#">中心简介</a>
       <a href="#">政策法规</a>
       <a href="#">常用下载</a>
       <a href="#">为您服务</a>
       <a href="#">技术支持和服务</a>
    </div>
</body>
单击我看效果

©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持：淮阴工学院计算机与软件工程学院《Web开发技术》教学团队