第12章 css布局模型

来源：互联网发布：c 高性能编程编辑：程序博客网时间：2024/05/16 11:07

css布局模型
元素有三种布局模型：1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）

12.1 流动模型（一）
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
如三个块状元素标签(div，h1，p)宽度显示为100%

<title>流动模式下的块状元素</title>
      <style type="text/css">
      #box1{
            width:300px;
            height:100px;
           }
       div,h1,p{
            border:1px solid red;
               }
      </style>
      <div id="box2">box2</div>
      <h1>标题</h1>
      <p>文本</p>
      <div id="box1">box1</div>

12.2 流动模型（二）
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
内联元素标签a、span、em、strong都是内联元素。

12.3 浮动模型
      div、p、table、img 等元素都可以被定义为浮动
      例:设置两个元素一左一右可以实现一行显示
      div{
          width:200px;
          height:200px;
          border:2px red solid;
          }
      #div1{float:left;}
      #div2{float:right;}

12.4 什么是层模型？
      层模型有三种形式：1、绝对定位(position: absolute)
                        2、相对定位(position: relative)
                        3、固定定位(position: fixed)

12.5 层模型--绝对定位(position: absolute)
      实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
      <style type="text/css">
      div{
      width:200px;
      height:200px;
      border:2px red solid;
      position:absolute;
      left:100px;
      top:50px;
         }
      <div id="div1"></div>
      </style>

12.6 层模型--相对定位(position: relative)
     偏移前的位置保留不动
     <style type="text/css">
     #div1{
          width:200px;
          height:200px;
   border:2px red solid;
     position:relative;
     left:100px;
     top:50px;
         }
    </style>
    <body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
    </body>

12.7 层模型--固定定位
    实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
    #div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
        }
    <p>文本</p>

12.8 Relative与Absolute组合使用
     <style type="text/css">
    div{border:2px red solid;}
    #box1{
    width:200px;
    height:200px;
    position:relative;
         }
    #box2{
  position:absolute;
top:20px;
left:30px;
    /*下面是任务部分*/
    #box3{
    width:200px;
    height:200px;
    position:relative;
        }
    #box4{
    width:99%;
   position:absolute;
bottom:0;
     left:0; /*这条css样式可以省略*/
         }
    </style>
---------------------------------------------------------------------------------------------

0 0