CSS Layout

position

有四种relative, absolute, static(默认), fixed， 其中relative不长用来对block element定位，但是relative和absolute用来标识其contain 的子是按照他们的位置做references的。

Relative：

1： 一般用法

<style>

    div#outer {
        position: relative;
        width: 750px;
        height: 500px;
        margin: 0px auto;
        background-color: #369;
        border: solid 1px black;
    }

    div#first {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #ccf;
        float: left;
        width: 220px;
        padding: 15px;
    }

    div#second {
        position: absolute;
        top: 0;
        left: 250px;
        background-color: #fcc;
        width: 220px;
        padding: 15px;
    }

    div#third {
        position: absolute;
        top: 0;
        left: 500px;
        background-color: #cff;
        width: 220px;
        padding: 15px;
    }

    </style>

Relative对外部outer居中排版，其他内部元素以outer为基准obsolute其位置

2： Relative的定位规则

定位属性对relative先做影响，比如Margin：0px auto，设置outer处于其外层container的中间（这里是page），并且处于顶部margin是0

如改outer的css为：

div#outer {
        position: relative;
        width: 750px;
        height: 500px;
        top:10px;
        left:50px;
        margin: 0px auto;
        background-color: #369;
        border: solid 1px black;
    }

top，left等是基于之前的relative本来位置而定的，比如这里是在之前margin的基础上左边空出50px，上边空出10px

3：Relative的margin & Padding

注意：这里先设置margin为0px，top：0px， left：0px。 padding对relative的影响会都加在右端和下端，设置padding-top为60px会看到被从下面被顶出去，而设置padding-down为60px会看到也是下面被顶出去。同样设置padding-left三个子blog没有被顶向右边，而是右边被顶出去。出现这种问题的原因是，后面div#first， div#second和div#third都是按照left的数值设置的位置，所有他们的位置已经不再遵循padding。

div#outer {
        position: relative;
        width: 750px;
        height: 500px;
        top:0px;
        left:0px;
        margin: 0px;
        padding: 60px 0px 0px 20px;
        background-color: #369;
        border: solid 1px black;
    }

 4：relative对上级containner的margin敏感

View Code 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 3     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 
 6 <head>
 7   <link rel="stylesheet" type="text/css" href="external.css" />
 8   <title>CSS Positioning: Absolute</title>
 9 
10     <style>
11 
12 #container{
13     margin: 9px 0px;
14     
15 }
16 
17     div#outer {
18         position: relative;
19         width: 750px;
20         height: 500px;
21         top:0px;
22         left:0px;
23         margin: 0px;
24         padding: 0px 0px 0px 0px;
25         background-color: #369;
26         border: solid 1px black;
27     }
28 
29     div#first {
30         position: absolute;
31         top: 0;
32         left: 0;
33         background-color: #ccf;
34         float: left;
35         width: 220px;
36         padding: 15px;
37     }
38 
39     div#second {
40         position: absolute;
41         top: 0;
42         left: 250px;
43         background-color: #fcc;
44         width: 220px;
45         padding: 15px;
46     }
47 
48     div#third {
49         position: absolute;
50         top: 0;
51         left: 500px;
52         background-color: #cff;
53         width: 220px;
54         padding: 15px;
55     }
56 
57     </style>
58 
59 </head>
60 
61 <body>
62 <div id="container">
63 <div id="outer">
64     <div id="first">
65         <h1>1 BW Whois</h1>
66         <p>
67         <a href="http://whois.bw.org/">BW Whois</a> is Bill's open-source whois 
68         client. Originally released in December 1999, and still in active 
69         development, BW Whois has evolved into a full-featured command-line/web 
70         client with rich security features, caching and database support.
71         </p>
72     </div>
73     
74     <div id="second">
75         <h1>2 AMTP</h1>
76         <p>
77         <a href="http://amtp.bw.org">AMTP</a> (Authenticated Mail Transfer 
78         Protocol) is Bill Weinman's solution to the SPAM problem. AMTP is being 
79         designed as a replacement for SMTP, with security features designed to 
80         reduce the impact of Unsolicited Bulk Email (UBE) and the cost of running 
81         mail servers.
82         </p>
83     </div>
84     
85     <div id="third">
86         <h1>3 Writing</h1>
87         <p>
88         Mr. Weinman has written five books, including The CGI Book and, with his
89         sister Lynda, Creative HTML Design. He has contributed to other books on
90         programming and web design and has written articles for various
91         computer-related periodicals.
92         </p>
93     </div>
94 </div>
95 </div>
96 </body>
97 </html>
  • 对于firefox如果不reset css的话最外层的body tag有默认的margin: 8px
  • 选用relative的时候其外部container的margin会有影响。这里外面增加一个id=containner的div，设置top，bottom的margin：8px，发现只有当设置为“8”以上的时候outer方框上面的空隙才会增加（原本是默认浏览器的body margin：8px），又因为verticle margin有overlap，所以两个verticle margin选用较大的那个。

 

Abosulte：

 1：一般用法

outer container 和inner element都是用absolute定位，用top，left，right定位外层outer container在page上的位置，inner element以outer container的位置为reference定义自己在其内部的位置。

View Code 
 1 div#outer {
 2         position: absolute;
 3         width: 750px;
 4         height: 500px;
 5         top:0px;
 6         left:0px;
 7         margin: 0px;
 8         padding: 0px 0px 0px 0px;
 9         background-color: #369;
10         border: solid 1px black;
11     }
12 
13     div#first {
14         position: absolute;
15         top: 0;
16         left: 0;
17         background-color: #ccf;
18         float: left;
19         width: 220px;
20         padding: 15px;
21     }
22 
23     div#second {
24         position: absolute;
25         top: 0;
26         left: 250px;
27         background-color: #fcc;
28         width: 220px;
29         padding: 15px;
30     }

2：abosulte对本层的margin: auto自动居中不敏感，但对直接赋值方式敏感margin-left：30px。

div#outer {
        position: absolute;
        width: 750px;
        height: 500px;
        top:0px;
        left:0px;
        margin: 0px 30px;
        padding: 0px 0px 0px 0px;
        background-color: #369;
        border: solid 1px black;
    }

 

 

3：absolute对外层containner的margin和padding不敏感。

View Code 
#container{
    margin: 10px;
    padding: 20px;
}

    div#outer {
        position: absolute;
        width: 750px;
        height: 500px;
        top:0px;
        left:0px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        background-color: #369;
        border: solid 1px black;
    }

    div#first {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #ccf;
        float: left;
        width: 220px;
        padding: 15px;
    }

    div#second {
        position: absolute;
        top: 0;
        left: 250px;
        background-color: #fcc;
        width: 220px;
        padding: 15px;
    }

    div#third {
        position: absolute;
        top: 0;
        left: 500px;
        background-color: #cff;
        width: 220px;
        padding: 15px;
    }

    </style>

Float

1： 一般用法：

<head>
    <link rel="stylesheet" type="text/css" href="external.css" />
    <title>CSS Positioning: Float Image</title>

    <style>

    div#textbox {
        background-color: #eef;
        width: 720px;
        padding: 15px;
        border: 1px solid black;
        margin: 15px auto;
    }

    img.floatLeft {
        float: left;
        margin-right: 15px;
    }
    
    img.floatRight {
        float: right;
        margin-left: 15px;
    }
    </style>

</head>

<body>

    <div id="textbox">
        <img class="floatLeft" src="surfer.jpg" width="200" height="160" alt="wow! look at that!" />
        <h1>BW Whois</h1>
        <p>
        <a href="http://whois.bw.org/">BW Whois</a> is Bill's open-source whois 
        client. Originally released in December 1999, and still in active 
        development, BW Whois has evolved into a full-featured command-line/web 
        client with rich security features, caching and database support.
        </p>
        <h1>AMTP</h1>
        <p>
        <a href="http://amtp.bw.org">AMTP</a> (Authenticated Mail Transfer 
        Protocol) is Bill Weinman's solution to the SPAM problem. AMTP is being 
        designed as a replacement for SMTP, with security features designed to 
        reduce the impact of Unsolicited Bulk Email (UBE) and the cost of running 
        mail servers.
        </p>
        <h1>Writing</h1>
        <p>
        Mr. Weinman has written five books, including The CGI Book and, with his
        sister Lynda, Creative HTML Design. He has contributed to other books on
        programming and web design and has written articles for various
        computer-related periodicals.
        </p>
    </div>
    
</body>
</html>

2：float后设置margin：

img.floatLeft {
        float: left;
        margin-right: 15px;
    }

字体和float在左边的图形之间有一个15px的空隙

3： clear float：

给<p>增加clear属性

<img class="floatLeft" src="surfer.jpg" width="200" height="160" alt="wow! look at that!" />
 <h1>BW Whois</h1>
 <p style="clear: left">

make the paragraph not wrap around anything that's floating to the left

4：using float to layout 3 colums

div#outer {
        width: 750px;
        height: 500px;
        margin: 15px auto;
        background-color: #369;
        border: solid 1px black;
    }

    div#first {
        background-color: #ccf;
        float: left;
        width: 220px;
        padding: 15px;
    }

    div#second {
        background-color: #fcc;
        float: left;
        width: 220px;
        padding: 15px;
    }

    div#third {
        background-color: #cff;
        float: left;
        width: 220px;
        padding: 15px;
    }

用float left的方法可以align colum在一起，代替以前table的方法。

 

 

posted @ 2013-02-05 06:49  若愚Shawn  阅读(309)  评论(0)  编辑  收藏  举报