個人補充一下,還有一種清除浮動的方法是使用偽類:after{
content:"";
height:0;
visibility:hidden;
display:block;
clear:both;
}
只不過這種方法對IE不太管用,適用于非IE的瀏覽器。
content:"";
height:0;
visibility:hidden;
display:block;
clear:both;
}
只不過這種方法對IE不太管用,適用于非IE的瀏覽器。
2016-05-29
z-index是針對網頁顯示中的一個特殊屬性。因為顯示器是顯示的圖案是一個二維平面,擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關系。
#wrap{width:970px; margin:0 auto;}
#mainbody{【任務3】 margin-top:15px;}
#left{float:left;width:110px; }
#mid{float:left;width:650px;border:1px solid #999;positive:relative}
#right{float;right;border:1px solid #999;position:absolute;left:777px;}
#mainbody{【任務3】 margin-top:15px;}
#left{float:left;width:110px; }
#mid{float:left;width:650px;border:1px solid #999;positive:relative}
#right{float;right;border:1px solid #999;position:absolute;left:777px;}
2016-05-29
#right{position:absolute;margin-left:794px;border:1px solid #999;}
我寫的margin-left:794px,原因是970-(1+110+1+13+1+650+1+17)
解釋wrap的總寬度-(left的寬度+left兩側邊框+left和mid的間距+mid的寬度+mid兩側邊框+mid與right的間距)
當我設置#wrap{overflow:hidden}時,卻發現right的右側邊框被隱藏了,此時調整#right{margin-Left:791px}剛好能見右邊框
我寫的margin-left:794px,原因是970-(1+110+1+13+1+650+1+17)
解釋wrap的總寬度-(left的寬度+left兩側邊框+left和mid的間距+mid的寬度+mid兩側邊框+mid與right的間距)
當我設置#wrap{overflow:hidden}時,卻發現right的右側邊框被隱藏了,此時調整#right{margin-Left:791px}剛好能見右邊框
2016-05-27