主要为了理解思考的过程，而不是仅仅为了背过一段代码。
1负边距 margin-left为负值，且两个元素不在一行的时候（可以用元素float:left,width:100%实现）margin-left可以吃掉兄弟元素的margin.
想像一下，假设width:99%，右边留一条缝隙，当margin-left为负值，即可让右边的这条缝隙向左走
即当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。 而margin的负值达到-100%时，恰能达到窗口最左侧。。
这个100%为父元素的宽度。同理我们假设要挤的元素宽度为200px,则 “挤”200px就可以让这个元素完全挤到兄弟元素的右边去。
考虑以下结构
以上为第一步，可以看到left,right到了正确位置。这时肯定有疑问了？这个main怎么没了？因为被挤跑了呗
2 给挤的空间留空
考虑padding属性，会给元素的边缘留出缓冲空间，即我人为的留给你空间让你挤，比如padding:0 200px,左右两边留出了200让你使劲挤。这时候出问题了，因为文档流里，块状元素盒子包括padding啊，如果挤的话整个盒子不就跑了么。
这时能够脱离文档流的定位出场了，我无视你，就在你上面的空间挤，然后父元素眼睁睁的看着上面挤，下面留出被遮挡的空间就是了。
这种思路即圣杯布局。（负边距+定位）
给个空间:
3.淘宝UED对此的优化
圣杯布局已经挺好了，但是利用了相对定位。如果人为加一个标签，来控制上面说的“挤”的空间呢？
完整代码
|
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<
!
DOCTYPE
HTML
>
<
html
lang
=
"en-US"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>
<
/
title
>
<style
type
="text/css">
.main
{
background
:
#D6D6D6
;
}
.left
{
background
:
#E79F6D
;
}
.right
{
background
:
#7BD
;
}
/* core layout css */
.main
{
float
:
left
;
width
:
100%
;
}
.left
{
float
:
left
;
width
:
190px
;
margin-left
:
-100%
;
}
.right
{
float
:
left
;
width
:
230px
;
margin-left
:
-230px
;
}
.in
{
margin
:
0
230px
0
190px
}
</style>
<
/
head
>
<
body
>
<
div
id
=
"bd"
>
<
div
class
=
"main"
>
<
div
class
=
"in"
>
test11111111111
<
/
div
>
<
/
div
>
<
div
class
=
"left"
>
test11111111111
<
/
div
>
<
div
class
=
"right"
>
test11111111111
<
/
div
>
<
/
div
>
<
/
body
>
<
/
html
>
|
转载自：http://99jty.com/?p=432
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
