Recommandé
Contenu connexe
Tendances
Plus de jay li
box model
- 1. Box Model 2011-04-19
- 2. • 拔赤 淘宝前端开发工程师 http://jayli.github.com
- 3. Hack !
- 4. #box { color:black; /*firefox*/ color:red9; /*所有ie*/ *color:blue; /*ie7*/ _color:green; /*ie6*/ }
- 5. CSS Basic Box Model
- 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%; }
- 8. Firefox with W3C box layout
- 9. IE with W3C box layout
- 10. IE with W3C box layout
- 11. What about IE with Quirks Mode?
- 12. IE with Quirks box layout
- 13. 指定 Doctype！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
- 15. float:left margin-left:100px !IE6 float:left margin-left:100px IE6
- 16. This is a bug!
- 17. float:left margin-left:100px Fix this display:inline bug
- 18. IE hasLayout
- 19. div#box { background:red; filter:alpha(opacity=50); } <!DOCTYPE html> … <div id=“box”> text </div>
- 20. Filter is ok in IE8 Filter dosn’t work in IE6/7
- 21. div#box { background:red; filter:alpha(opacity=50); } <!DOCTYPE html> … <div id=“box”> text 在IE6/7下没有 hasLayout </div>
- 22. 没有 hasLayout 的元素上 Filter 无作用
- 23. Why？
- 24. 降低渲染压力
- 25. 默认不具有 hasLayout • div • span
- 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>
- 28. Filter is ok in IE8 Filter is ok in IE6/7
- 29. Warning !!!
- 30. hasLayout 元素呈现为 ”矩形”
- 31. I want this !
- 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>
- 33. It’s correct in Firefox 3.6 It’s correct in IE8
- 34. It’s incorrect in IE7 It’s incorrect in IE6
- 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>
- 38. It’s correct in IE7 It’s correct in IE6
- 39. Margin Overlap
- 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>
- 42. margin:50px 100px margin:50px 浮动元素上下margin不重叠
- 43. #wrapper { width:500px; } 如果去掉浮动？ #wrapper p{ width:100px;margin:50px;float:left; } <div id=“wrapper”> <p></p> <p></p> … </div>
- 45. More & More…
- 46. 秘籍？
- 47. 知己知彼，百战不殆！
- 48. 战争是持久的，胜利是我们的！
- 49. 鉴定信念，战胜 IE6！
- 50. ref • http://htmlhelp.com/tools/validator/docty pe.html • http://www.positioniseverything.net/explor er/floatIndent.html • http://msdn.microsoft.com/en- us/library/bb250481%28v=vs.85%29.aspx