box model
- 4. #box {
color:black; /*firefox*/
color:red9; /*所有ie*/
*color:blue; /*ie7*/
_color:green; /*ie6*/
}
- 7. #box {
border:20px solid red;
padding:20px;
width:100px;
height:100px; <div id=“box”>
} <p>#box</p>
#box p { </div>
width:100%;
height:100%;
}
- 19. div#box {
background:red;
filter:alpha(opacity=50);
}
<!DOCTYPE html>
…
<div id=“box”>
text
</div>
- 21. div#box {
background:red;
filter:alpha(opacity=50);
}
<!DOCTYPE html>
…
<div id=“box”>
text 在IE6/7下没有
hasLayout
</div>
- 26. 激活元素的 hasLayout
• position
• float
• width(!auto)
• height(!auto)
• zoom
• overflow
- 27. div#box {
background:red;
filter:alpha(opacity=50);
height:19px;
} 让div具有
hasLayout
<!DOCTYPE html>
…
<div id=“box”>
text
</div>
- 32. #pic {
float:left;width:50px;height:50px;
}
#content {
border:1px solid blue;
background:yellow;height:100%;
}
<div>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 35. #pic {
float:left;width:50px;height:50px;
}
#content {
border:1px solid blue;
background:yellow;height:100%;
}
height触发了#content
的hasLayout
<div>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 36. #pic {
float:left;width:50px;height:50px;
}
#content { IE6/7下 #content
border:1px solid blue; 显示为矩形
background:yellow;height:100%;
}
height触发了#content
的hasLayout
<div>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 37. #pic {
float:left;width:50px;height:50px;
}
#content {
border:1px solid blue;
background:yellow;height:100%;
}
样式定义在wrapper上
<div style=“background:yellow”>
<div id=“pic”></div>
<div id=“content”>long text…</span>
</div>
- 40. Rules
• 水平margin不重叠
• 浮动元素上下margin不重叠(float)
• 飘动元素上下margin不重叠(position)
• 常规折行上下margin重叠
- 41. #wrapper {
width:500px;
}
#wrapper p{
width:100px;margin:50px;float:left;
}
<div id=“wrapper”>
<p></p>
<p></p>
…
</div>
- 43. #wrapper {
width:500px;
} 如果去掉浮动?
#wrapper p{
width:100px;margin:50px;float:left;
}
<div id=“wrapper”>
<p></p>
<p></p>
…
</div>