Layout(CSS)

理解box

inner content width: border + padding + width(如果没有margin在的情况下inner content超过outer container的时候，会sacrifice outter padding， 用overflow控制）

inner containner width: margin + border + padding + width(如果当有margin在的情况下inner containner超过outer container的时候，会sacrifice inner magrin， 用overflow控制）

 

 

verticle margin collapse：（当没有任何padding或者border组织两个element或者两个div里面各包含一个p的结构组织他们margin touch彼此，collapse margin，）

1：当有两个同级element上下重合的时候选用两个中最大的margin作为他们之间的margin，比如p{margin:10px;  margin-top:20px} 重合结果2个P之间空出20px的margin

------>

 2：这样的结构的时候，外层div下面10px，上面20px的margin，内部p上下各10px的margin

<div>　　//margin：10px 0；

<p>......</p> //margin：10px 0；  margin-top：20px；

</div>

<div>

<p>......</p>

</div>

div里没有border/padding包含p的时候：

div里加入border/padding，这样就包含其内部p的资源，也就隔断了内部的margin与外部的margin的碰面。

 

 

加入背景图片：

 

<!--导入一张grid图-->
html {
    background: url(images/grid.gif) 5px 5px;    
}

<!--2个有alpha效果的背景-->
p {
    background: rgba(237,226,197,.8);
    line-height:20px;
}
div {
    background: rgba(109,154,197,.8);
}

 

em

 size有如下三种表达：px,em,%

body{
  font-size = 100%;     //代表当前浏览器设置的某人font-size，网页是10px
}
h1{
  font-size = 3em;      //取父亲body font-size的大小的3倍=30px；
  margin-bottom:1em;  //取本element的font-size的大小的1倍 = 30px；
}
h2{
  font-size = 2em;
  margin-bottom:1em;  //取本element的font-size的大小的1倍 = 20px；
p{
  font-size = 1.5em;
  margin-bottom:1em;  //取本element的font-size的大小的1倍 = 15px；
}

 注意：要想扩大整个段落字体，直接扩大上层的字体，如果上层和下层有联系，则下层也会参考上层变

本层font-size em参照父层font-size

本层其他em参照本层font-size

%(css3才支持border的%)

对于width，padding和margin，border等，用%参考父的width：body参考viewpoint，如果第一层的父没有设置width则继续找父的父

一般用于dynamic layout：考虑一个element要左右各10px大小的padding，那么父为960，差不多10%。 padding: 10%

 

Reset

 

aside, article, section, header, footer, nav {
    display: block;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #ccc;
}
body {
    width: 600px;
    background: #fff;
    margin: 2em auto 2em;
}

 

Float

left：Take the object and float it to the far leftmost edge of its parent container

right：Take the object and float it to the far rightmost edge of its parent container

inherit: Follow the parent containner's rule

 

none: no floating on current element

 

float的rule

从normal document里移去

overlap在最高层

注意container collapse

View Code 
 1 /*add styles here*/
 2 .element1 {
 3     background: rgb(211, 206, 61);
 4     float:right;
 5 }
 6 .element2 {
 7     background: rgb(85, 66, 54);
 8 }
 9 .element3 {
10     background: rgb(247,120,37);
11 }
12 </style>
13 </head>
14 <body>
15 <p>The float property has four possible values: left | right | inherit | none<p>
16 <p>Floating an element to the left or to the right will cause it to move to the left-most or right-most edge of its parent container. Floating removes the element from normal flow, and will cause elements below it to shift accordingly.</p>
17 <div class="element1"></div>
18 <div class="element2"></div>
19 <div class="element3"></div>
20 </body>
21 </html>

当设置了float:right；后，会把它从normal document里移去，2和3都看不到1，所以2和3上移占据1以前的位置。

把1的style变成

.element1 {
    background: rgb(211, 206, 61);
    float:left;
}

View Code 
.element1 {
    background: rgb(211, 206, 61);
    float:left;
    margin-right:1em;
    
}
.element2 {
    background: rgb(85, 66, 54);
    float:left
    
    
}
.element3 {
    background: rgb(247,120,37);
    float:left
    
}

body container包含1，2，3，但是当float的时候他们都被从body里移除，所以body的白底collapse

float在一起的element会遵循排在一行，但是如果超出parent container（这里是body）的尺寸则自动wrap

 

理解float的真正含义：

 

View Code 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>The float property</title>
 6 <!--[if lt IE 9]>
 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 8 <![endif]-->
 9 <style>
10 aside, article, section, header, footer, nav {
11     display: block;
12 }
13 html, body {
14     margin: 0;
15     padding: 0;
16 }
17 html {
18     background: #ccc;
19 }
20 body {
21     width: 600px;
22     background: #fff;
23     margin: 2em auto 2em;
24     font: 100% Arial, Helvetica, sans-serif;
25 }
26 div {
27     margin-bottom: 1em;
28     margin-right: 2em;
29     width: 50px;
30     height: 50px;
31     border: 1px solid #000;
32     padding: 25px;
33     float: left;
34 }
35 /*add styles here*/
36 .element1 {
37     background: rgb(211, 206, 61);
38 }
39 .element2 {
40     background: rgb(85, 66, 54);
41     
42 }
43 .element3 {
44     background: rgb(247,120,37);
45     
46 }
47 .element4 {
48     background: rgb(26, 78, 175);
49 }
50 .element5 {
51     background: rgb(195, 156, 61);
52 }
53 .element6 {
54     background: rgb(225,68,37);
55 }
56 </style>
57 </head>
58 <body>
59 <p>The clear property has five possible values: left | right | both | inherit | none<p>
60 <p>By clearing an element, you can ensure the element does not appear to the left or the right of any floated element. This has the result of turning a float "off" and restoring normal document flow to the remaining elements.</p>
61 <div class="element1">one</div>
62 <div class="element2">two</div>
63 <div class="element3">three</div>
64 <div class="element4">four</div>
65 <div class="element5">five</div>
66 <div class="element6">six</div>
67 </body>
68 </html>

 

 

elemnt2有一个1float在它的左边，3有1，2float在它左边。每个element没有float在右边的元素，clear的时候应该写成left

 

 

Clear：By clearing an element, you can ensure the element does not appear to the left or the right of any floated element. This has the result of turning a float "off" and restoring normal document flow to the remaining elements.

 

left:nothing floated element can float to my right

1,2,3，4，5，6正常的float left， 4加上一句clear left

right:nothing floated element can float to my right

View Code 
 1 ...
 2 html {
 3     background: #ccc;
 4 }
 5 body {
 6     width: 600px;
 7     background: #fff;
 8     margin: 2em auto 2em;
 9     font: 100% Arial, Helvetica, sans-serif;
10 }
11 div {
12     margin-bottom: 1em;
13     
14     width: 150px;
15     height: 50px;
16     border: 1px solid #000;
17     padding: 25px;
18     
19 }
20 /*add styles here*/
21 .element1 {
22     background: rgb(211, 206, 61);
23     float: right;
24     width: 50px;
25 }
26 .element2 {
27     background: rgb(85, 66, 54);
28     float: left;
29     width: 50px;
30     
31 }
32 .element3 {
33     background: rgb(247,120,37);
34     clear:right;
35 }
36 .element4 {
37     background: rgb(26, 78, 175);
38     
39 }
40 .element5 {
41     background: rgb(195, 156, 61);
42     
43 }
44 .element6 {
45     background: rgb(225,68,37);
46     
47 }
48 ...

both:nothing floated element is allowed to float to my right or my left

问题：为什么需要both？在不确定是否有什么float在左边或者右边，左边右边的floated element的长度也不确定的时候用

先看改变1的长度为150px; 并且3clear：left的情况：

View Code 
 1 ...
 2 div {
 3     margin-bottom: 1em;
 4     
 5     width: 150px;
 6     height: 50px;
 7     border: 1px solid #000;
 8     padding: 25px;
 9     
10 }
11 /*add styles here*/
12 .element1 {
13     background: rgb(211, 206, 61);
14     float: right;
15     width: 50px;
16     height:150px;
17 }
18 .element2 {
19     background: rgb(85, 66, 54);
20     float: left;
21     width: 50px;
22     
23 }
24 .element3 {
25     background: rgb(247,120,37);
26     clear:left;
27 }
28 .element4 {
29     background: rgb(26, 78, 175);
30     
31 }
32 .element5 {
33     background: rgb(195, 156, 61);
34     
35 }
36 .element6 {
37     background: rgb(225,68,37);
38     
39 }
40 ...

1长度为150px；2的长度改为200px超过1，3改为 clear：right，所以1会overlap到3

1，2的长度保持，float方向保持，3 clear：both： It's doesn't matter who is taller,好处是3总是另起一行，不关心1，2谁的长会overlap到3

 

inherit:whatever my parent has that's what I want

none:Turnning clearing off

 

 

阻止container collapsing：

  • containner collapse的问题：
View Code 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>containing floats</title>
 6 <!--[if lt IE 9]>
 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 8 <![endif]-->
 9 <style>
10 aside, article, section, header, footer, nav {
11     display: block;
12 }
13 html, body {
14     margin: 0;
15     padding: 0;
16 }
17 html {
18     background: rgb(108,135,178);
19 }
20 body {
21     width: 600px;
22     background: #fff;
23     margin: 0 auto;
24     font: 90% Georgia, "Times New Roman", Times, serif;
25 }
26 div {
27     width: 50px;
28     height: 50px;
29     padding: 50px;
30 }
31 section {
32     background: rgb(178,155,107);
33     border: 1px solid black;
34     padding: 10px;
35 }
36 .one {
37     background: rgb(207, 255, 245);
38 }
39 .two {
40     background: rgb(101,209,255);
41 }
42 .three {
43     background: rgb(255, 231, 181);
44 }
45     
46 </style>
47 </head>
48 <body>
49 <section>
50 <div class="one">One</div>
51 <div class="two">Two</div>
52 <div class="three">Three</div>
53 </section>
54 </body>
55 </html>

collapse

View Code 
...
.one {
    background: rgb(207, 255, 245);
    float:left;
}
.two {
    background: rgb(101,209,255);
    float:left;
}
.three {
    background: rgb(255, 231, 181);
    float:left;
}
...

  • 解决方案1：Clear child elements that appear below floated elements

在floated element下加一个element，一般是br，然后对它做clear:both restore normal document,then the parent container will go all along the way to conatin this slement.

View Code 
 1 section {
 2     background: rgb(178,155,107);
 3     border: 1px solid black;
 4     padding: 10px;
 5 }
 6 .one {
 7     background: rgb(207, 255, 245);
 8     float:left;
 9 }
10 .two {
11     background: rgb(101,209,255);
12     float:left;
13 }
14 .three {
15     background: rgb(255, 231, 181);
16     float:left;
17 }
18 p{
19     clear:both;
20     
21 }
22     
23 </style>
24 </head>
25 <body>
26 <section>
27 <div class="one">One</div>
28 <div class="two">Two</div>
29 <div class="three">Three</div>
30 <p>Clear the conaier collapse</p>
31 </section>
32 </body>
33 </html>

developer 很多用<br class="clearBoth">代替这里的<p>

  • 解决方案2：Set overflow property of the parent container to eith hidden or auto

在上例中的section加overflow：hidden；

用parent container的overflow属性：Tell bowser what to do when the contents of a box no longer fit inside of it

hidden:Clip off any content that overflow(We want to set overflow to this element but we don't want to show scrollbar)

auto:will create scrollbars either horizontally or verticlelly(base on content)

scroll:force scroll bar in

visiable: call content visiable and overlap

  • 解决方案3：Set a float value on the containning element itself

我们去掉方法2加入的代码，直接设置container的float属性，这样他的子元素都会包含进父容器里，他们都是float：left，而且body（section的父）的width是auto会跟着section里尺寸走。

 Clearfix Technique

 这里方法代替之前的解决方案1

View Code 
 1 body {
 2     width: 600px;
 3     margin: 0 auto;
 4     font: 90% Georgia, "Times New Roman", Times, serif;
 5 }
 6 div {
 7     width: 50px;
 8     height: 50px;
 9     padding: 50px;
10     margin-right: 25px;
11 }
12 section {
13     background: rgb(178,155,107);
14     border: 1px solid black;
15     padding: 25px 0 25px 50px;
16     margin-top: 50px;
17 }
18 .one {
19     background: rgb(207, 255, 245);
20     float: left; 
21 }
22 .two {
23     background: rgb(101,209,255);
24     float: left;
25 }
26 .three {
27     background: rgb(255, 231, 181);
28     float: left;
29 }
30 .clearfix:after{
31     content:"";
32     display:block;
33     clear:both;
34 }
35 </style>
36 
37 </head>
38 <body>
39 <section class="clearfix">
40 <div class="one">One</div>
41 <div class="two">Two</div>
42 <div class="three">Three</div>
43 </section>
44 </body>
45 </html>

但是这个方法对老的浏览器不适用，改成如下

View Code 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>clearfix</title>
 6 <!--[if lt IE 9]>
 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 8 <![endif]-->
 9 <style>
10 aside, article, section, header, footer, nav {
11     display: block;
12 }
13 html, body {
14     margin: 0;
15     padding: 0;
16 }
17 body {
18     width: 600px;
19     margin: 0 auto;
20     font: 90% Georgia, "Times New Roman", Times, serif;
21 }
22 div {
23     width: 50px;
24     height: 50px;
25     padding: 50px;
26     margin-right: 25px;
27 }
28 section {
29     background: rgb(178,155,107);
30     border: 1px solid black;
31     padding: 25px 0 25px 50px;
32     margin-top: 50px;
33 }
34 .one {
35     background: rgb(207, 255, 245);
36     float: left; 
37 }
38 .two {
39     background: rgb(101,209,255);
40     float: left;
41 }
42 .three {
43     background: rgb(255, 231, 181);
44     float: left;
45 }
46 
47 .clearfix:before,
48 .clearfix:after {
49     content:"";
50     display:table;
51 }
52 .clearfix:after {
53     clear:both;
54 }
55 </style>
56 
57 <!--[if lt IE 8]>
58 <style>
59 /* For IE < 8 (trigger hasLayout) */
60 .clearfix {
61     zoom:1;
62 }
63 </style>
64 <![endif]-->
65 
66 </head>
67 <body>
68 <section class="clearfix">
69 <div class="one">One</div>
70 <div class="two">Two</div>
71 <div class="three">Three</div>
72 </section>
73 </body>
74 </html>

generate content at top and bottom of your element

It's generated an empty table cell

Prvent any collapse of marginsfrom happening and then one of the bottom is being cleared.

关于更多clearfix：请看这里

 

 

Floating inline element:

帮助我们重新layout内部的文章

  变到

制作下面的效果（注意复杂slector和line-height）

View Code 
1 .dropcap p:first-of-type:first-letter{
2     float:left;
3     font-family:Georgia, "Times New Roman", Times, serif;
4     font-size:4em;
5     margin:0 5px 0 0;
6     line-height:.7em;
7 }

制作下面的环绕效果：

  变化到 

View Code 
 1 .complex {
 2     border: 1px solid #333;
 3     padding: 1em;
 4     background: #d4beaa;
 5     font-size: 110%;
 6     overflow:hidden;    //这里more和price会超出container，也可以用clearfix的方法，但是我们知道是static的内容并且没有阴影效果所以没必要
 7 }
 8 
 9 
10 .complex p img {
11     float:left;
12     margin-right:1em;
13 
14 }
15 .more{
16     float:left;
17     margin:0;
18     margin-left:14em;
19     line-height:1.6em;   //把该element的box拉长些，字的位置下移
20     padding:0 5px;       //这个很重要为了呈现背景颜色
21     background:#3b2f24;
22     color:white;
23 }
24 .price{
25     float:right;
26     font-size:1.6em;
27     font-weight:bold;
28     margin:0;
29     margin-top:-.3em;  //字的位置稍微上移
30     color:#F00;
31 }

 

 

 

Two Floatting Colum:

  • 方法1

 

View Code 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>2 column layout</title>
 6 <!--[if lt IE 9]>
 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 8 <![endif]-->
 9 <style>
10 aside, article, section, header, footer, nav {
11     display: block;
12 }
13 html, body {
14     margin: 0;
15     padding: 0;
16 }
17 html {
18     background: rgb(123, 121, 143);
19 }
20 body {
21     width: 960px;
22     background: #fff;
23     margin: 0 auto 2em;
24     font: 100% Georgia, "Times New Roman", Times, serif;
25 }
26 header {
27     background: rgb(76, 67, 65);
28     margin-bottom: 20px;
29 }
30 header h1 {
31     font: normal 2em Arial, Helvetica, sans-serif;
32     color: white;
33     text-align: center;
34     line-height: 4em;
35     text-transform: uppercase;
36     letter-spacing:.1em;
37     margin: 0;
38 }
39 .col1 {
40     background: rgb(237, 228, 214);
41     height: 500px;
42     float:left;
43     width:600px;
44     padding:20px;   //注总content宽度为640px
45 }
46 .col2 {
47     background: rgb(173, 169, 130);
48     height: 500px;
49     padding:20px;
50     margin-left:660px;  //为了使col2和col1之间留有20px的空隙
51 }
52 footer {
53     background: rgb(100, 98, 102);
54     line-height: 3em;
55     font-size: .6em;
56     color: white;
57     padding: 0 2em;
58     clear:both;  //为了footer段落不出现在col1/2下面，另起一行
59 }
60 </style>
61 </head>
62 <body>
63 <header>
64 <h1>Cool company header</h1>
65 </header>
66 <section class="col1">
67 This is where the really important stuff goes.
68 </section>
69 <aside class="col2">
70 This is where the related content goes.
71 </aside>
72 <footer>Copyright stuff....</footer>
73 </body>
74 </html>

 

  • 方法2（这个方法一定要算的特别准，不然col2会掉下去）

col1和col2分别都给float：left

View Code 
 1 .col1 {
 2     background: rgb(237, 228, 214);
 3     height: 500px;
 4     float:left;
 5     width:600px;
 6     padding:20px;
 7     margin-right:20px;
 8 }
 9 .col2 {
10     background: rgb(173, 169, 130);
11     height: 500px;
12     float:left;
13     width:260px;
14     padding:20px;
15 }
16 footer {
17     background: rgb(100, 98, 102);
18     line-height: 3em;
19     font-size: .6em;
20     color: white;
21     padding: 0 2em;
22 }

但是这里fotter会有一个问题，containner collapse，我们在footer里加上clear：both

  • 方法3（最好的方法，中间的gap会自己找齐）
View Code 
 1 ...
 2 .col1 {
 3     background: rgb(237, 228, 214);
 4     height: 500px;
 5     float:left;
 6     width:600px;
 7     padding:20px;
 8 }
 9 .col2 {
10     background: rgb(173, 169, 130);
11     height: 500px;
12     float:right;
13     padding:20px;
14     width:260px;
15 }
16 footer {
17     background: rgb(100, 98, 102);
18     line-height: 3em;
19     font-size: .6em;
20     color: white;
21     padding: 0 2em;
22     clear:both;
23 }
24 ...

 

 

Three Floatting Colum:

三个col段落，最好col1 float：left，col2 float：left，col3 float：right，这样不会出现三个col都float：left时右边预留下来的小白边

View Code 
 1 .col1 {
 2     background: rgb(237, 228, 214);
 3     height: 500px;
 4     float: left;
 5     padding: 20px;
 6     width: 266.6px;
 7     margin-right: 20px;
 8 }
 9 .col2 {
10     background: rgb(219,126,64);
11     height: 500px;
12     float: left;
13     padding: 20px;
14     width: 266.6px;
15 }
16 .col3 {
17     background: rgb(173, 169, 130);
18     height: 500px;
19     float: right;
20     padding: 20px;
21     width: 266.6px;
22 }
23 footer {
24     background: rgb(100, 98, 102);
25     line-height: 3em;
26     font-size: .6em;
27     color: white;
28     padding: 0 2em;
29     clear: both;
30 }

 

Three Floatting Colum（Complex）:

 当html里，头两个col在一个container里，后面一个col自己一组，再按上面分成三列怎么做？

html结构如下：

article（col1 + col2）

col3

使用nippet structure，article左，col3右，然后再细分article里的col1左 ，col2右

View Code 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>3 column layout</title>
 6 <!--[if lt IE 9]>
 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 8 <![endif]-->
 9 <style>
10 aside, article, section, header, footer, nav {
11     display: block;
12 }
13 html, body {
14     margin: 0;
15     padding: 0;
16 }
17 html {
18     background: rgb(123, 121, 143);
19 }
20 body {
21     width: 960px;
22     background: #fff;
23     margin: 0 auto 2em;
24     font: 100% Georgia, "Times New Roman", Times, serif;
25 }
26 header {
27     background: rgb(76, 67, 65);
28     margin-bottom: 20px;
29 }
30 header h1 {
31     font: normal 2em Arial, Helvetica, sans-serif;
32     color: white;
33     text-align: center;
34     line-height: 4em;
35     text-transform: uppercase;
36     letter-spacing:.1em;
37     margin: 0;
38 }
39 article {
40     float: left;
41     width: 634px;
42 }
43 aside {
44     float: right;
45     width: 266px;
46     height: 500px;
47     padding: 20px;
48     background: rgb(173, 169, 130);
49 }
50 .col1 {
51     background: rgb(237, 228, 214);
52     height: 500px;
53     float: left;
54     padding: 20px;
55     width: 266px;
56 }
57 .col2 {
58     background: rgb(219,126,64);
59     height: 500px;
60     float: right;
61     padding: 20px;
62     width: 266px;
63 }
64 footer {
65     background: rgb(100, 98, 102);
66     line-height: 3em;
67     font-size: .6em;
68     color: white;
69     padding: 0 2em;
70     clear: both;
71 }
72 </style>
73 </head>
74 <body>
75 <header>
76 <h1>Cool company header</h1>
77 </header>
78 <article>
79 <section class="col1">
80 This is where the really important stuff goes.
81 </section>
82 <section class="col2">
83 This is equally important stuff.
84 </section>
85 </article>
86 <aside>
87 I am related content.
88 </aside>
89 <footer>Copyright stuff....</footer>
90 </body>
91 </html>

 

 

Straight Height:

Block-level elemnt Width和Height的区别

width of element set to none mean set the width 100% of their parent(由外面的parent决定width)

The height of an element is set to auto by default. Mean is the contents of the element define the height（由内部的content决定element的Height）

这里的例子说明：body‘s height is being defined by the content inside the section, So when I tell the section to be 100%, it's saying be just as tall as the body,

the body is getting the height from the section, so in essence, we're saying be 100% of yourself.

所以当要straight height的时候，我们需要go in and set explicity heights on every single parent element above the one that we are targeting.

posted @ 2012-12-22 04:32  若愚Shawn  阅读(443)  评论(0)  编辑  收藏  举报