<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>盒子模型</title>
<style?type="text/css">
h1?{
??font-size:?20px;
??margin:?0;
??color:?#fff;
}
#page:after,
#page:before{
??content:"";
??display:?table;
}
#page:after{
??clear:both;
??overflow:?hidden;
}
#page?{
??margin-bottom:?20px;
??background:black;
}
#header?{
??width:?100%;
??background:?green;
??margin-bottom:?10px;
??padding:?20px;
}
.main?{
??width:?60%;
??padding:?20px;
??background:?orange;
??float:?left;
}
.sidebar?{
??width:?38%;
??float:?right;
??background:?#f36;
??padding:?20px;
}
#footer?{
??width:?100%;
??background:?#36f;
??padding:?20px;
??clear:both;
}
#header,
.main,
.sidebar,
#footer?{
??-webkit-box-sizing:border-box;
??-moz-？;
??-o-？;
??-ms-？;
??？;
}
</style>
</head>
<body>
<div?id="header"><h1>Header?Content</h1></div>
<div?id="page">
??<div?class="main"><h1>Main?Content</h1></div>
??<div?class="sidebar"><h1>Sidebar?Content</h1></div>
</div>
<div?id="footer"><h1>Footer?Content</h1></div>??
</body>
</html>#page:after和#page:before在#page前面和后面插入一個空內容，為什么要把他們設置為display:table;？#page:after{clear:both;overflow: hidden;}，這里設置了clear:both，清楚浮動了，為什么#footer還要在設置一次clear:both呢？但如果我把#footer的clear:both去掉，他和#page(margin-bottom: 20px)之間的20px就沒了？這里也不明白？由于#page里面的.main和.sidebar都浮動了，如果#page沒有設置overflow:hidden，他就應該坍塌呀(我給#page加上背景色）,但是它并沒有坍塌，是因為#page:after{overflow:hidden}的原因？怎么影響的？不好意思啊，問題有點多，麻煩大家了！
- 1 回答
- 0 關注
- 1423 瀏覽
添加回答
舉報
0/150
提交
取消