'display', 'position', and 'float'
Relationships between 'display', 'position', and 'float'
display:
- block: 占据父元素100%宽度，把后面元素推到下面。
- inline: 占据自己的宽度，后面元素可以排在同一行。
- inline-block
'display' can overrides the default layout behavior of an element. For example, elements can be hidden, block elements can be made to render inline, or inline elements can be made to render as blocks.
position:
请阅读
Learn CSS Positioning in Ten Steps，最好按照上面走一遍。代码贴在文末。
Learn CSS Positioning in Ten Steps，最好按照上面走一遍。代码贴在文末。
Absolute, Relative, Fixed Positioning: How Do They Differ?
Absolute Positioning Inside Relative Positioning 是 web layout 的基本技巧，请阅读该文。
float 也是 web layout 的基本技巧，请阅读 All About Floats
2. position: relative;
Absolute Positioning Inside Relative Positioning 是 web layout 的基本技巧，请阅读该文。
float 也是 web layout 的基本技巧，请阅读 All About Floats
1. position: static;
按照 normal flow.
按照 normal flow.
2. position: relative;
relative: 意思是 relative to its normal flow position，意思是是先按照 normal flow 进行布局，再根据需要移动位置，所以不改变其他元素的位置。
- Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow. 该位置不会再排版其他元素，而移动后的元素会覆盖其他元素，这可以通过设置 z-index 来改变。
- relative 以及 absolute 要结合 top, bottom, left, right, z-index 来使用。
- top, bottom, left, right 是指 box 的这四边和 containing block 的距离。如果 relative positioned element 没有设置这些性质，那它的位置和 normal flow 相同。
- 但是设置 position: relative 会影响子孙 absolute 元素的范围。这一点非常重要。
3. float:left/right
先按照 normal flow 进行布局 float 前面的元素直到碰到 float，然后根据 float 预置尽量往左或往右靠
先按照 normal flow 进行布局 float 前面的元素直到碰到 float，然后根据 float 预置尽量往左或往右靠
- 注意如果 float:left，并且该行 float 元素前面是 inline 元素，这些 inline 元素也必须腾出位置，放在 float 元素后面。
- Float 元素后面的元素在剩余的空间（扣除float占据的空间）中排版。
- float 可以和 clear 一同使用。
- float 不仅影响兄弟元素的排版，还影响叔节点（父节点的弟节点）的排版（如果它们没有设置 clear）
 |
| div-1a, div-1b 设置 float:left. 注意 div-after 的表现，其中"id=div-after"的div padding为0，但是其内容只能往后排 |
4. position: absolute;
In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block （html 元素树 上第一个非 static positioned 的祖宗）.
In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block （html 元素树 上第一个非 static positioned 的祖宗）.
- 因此 absolute 元素不一定相对其父元素，而是相对往上第一个 relative/absolute 的祖宗，并且是相对该祖宗的 padding box (padding+content)，而不是 content box.
- absolute 元素不影响其他元素的排版，因此要保证其占据的位置不会排版其他元素，一般可以设置该祖宗的 padding 来排版 absolute
5. position:fixed;
指相对浏览器，且scroll不改变其位置
clear
clear 指在 float 元素占据的位置的下方开始layout。clear 通常设为 both，也可以只 clear left/right。
 |
| 如果绿色clear right设成clear left，则不会clear到，变成左图 |
如果你知道在排版上要紧接float之后的元素，你可以给它设置 clear:both。但很多情况下，找到这个元素不是好办法，如果你决定要再float和该元素之间添加元素呢？
最好的办法是在 float 之后添加 empty div with clear both。
<div style="clear: both;"></div>.
附录
Learn CSS Positioning in Ten Steps 代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Centred Company</title>
<style type="text/css">
body {
width:400px;
}
#div-before{
background-color:rgb(136,136,221);
}
#div-1{
color:white;
background-color:#000000;
padding-left:100px;
}
#div-1a{
color:white;
background-color:rgb(221,51,51);;
}
#div-1b{
color:white;
background-color:rgb(51,221,51);
}
#div-1c{
color:white;
background-color:rgb(51,51,221);
}
#div-after{
background-color:rgb(136,136,221);;
}
/* Put other css code below */
#div-1a {
float:left;
width:100px;
}
#div-1b {
float:left;
width:100px;
}
#div-after {
border:1px dashed white;
}
</style>
</head>
<body>
<div id="div-before"> id=div-before </div>
<div id="div-1">
<div> id=div-1 </div>
<div id="div-1a"> id=div-1a <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</div>
<div id="div-1b"> id=div-1b <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
</div>
<div id="div-1c"> id=div-1c </div>
</div>
<div id="div-after"> id=div-after </div>
</body>
</html>
0 comments:
Post a Comment