格式与布局

来源：互联网发布：python 验证码识别库编辑：程序博客网时间：2024/06/08 04:40

格式与布局

一、定位

定位有相对定位、绝对定位和固定位置，详细写下各个定位属性：

绝对定位是相对于浏览器边框或父级；相对定位是相对于原来位置移动；固定位置相对于浏览器边界，用例子来看：

定位position属性：绝对定位absolute(对于top、bottom、right、left属性，只有设置了position才能用前面的那四个属性)

(1)样式表absolute的属性设置代码：

<head><br><style type="text/css">
 *{ margin:0px auto; padding:0px;}
#a3{
    width:300px;
        height:300px;
    background-color:#000;
    position:absolute;
     }
#a4{
    width:200px;
        height:200px;
    background-color:#F00;
    position:absolute;
     }
</style>
</head>
     
<body>
      <div id="a3"></div>
      <div id="a4"></div>
</body>

样式表的绝对定位的效果：

(2)定位position属性：固定位置fixed

样式表fixed的属性设置代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<head>
 <style type="text/css">
 *{ margin:0px auto; padding:0px;}
#a4{
    width:200px;
    height:200px;
    background-color:#F00;
    position:fixed;
             
    }
    </style>
    </head>
     
    <body>
<div id="a4"></div>
 <div id="a3">
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
    <img src="../图片/MTXX_20160817174806.jpg"/>
</div>
  
    </body>

样式效果图：红色的方框设置了固定位置属性值，它不随滚动条的滚动上去，页面怎么滚动它也是不动的。

(3)

定位position属性：固定位置relative

样式表relative的属性设置代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
 <style type="text/css">
 *{ margin:0px auto; padding:0px;}
#a4{
    width:200px;
    height:200px;
    background-color:#F00;
    (A)position:fixed;
 
        (B)position:fixed;
            top:10px;
             
    }
    </style>
    </head>
     
    <body>
<div id="a4"></div>
    </body>