使用絕對定位實現橫向兩列布局一般用于:一列固定寬度,一列自適應寬度。
主要應用技能:
relative-父元素相對定位。
absolute-自適應寬度元素絕對定位
注意:固定寬度列的高度>自適應寬度的列,否則會造成文檔的溢出。
主要應用技能:
relative-父元素相對定位。
absolute-自適應寬度元素絕對定位
注意:固定寬度列的高度>自適應寬度的列,否則會造成文檔的溢出。
2015-12-08
清除浮動方法:
對受到浮動影響的標簽作以下操作:
1、clear:both;
2、clear:right; clear:left;
3、width:100%;overflow:hidden;
對受到浮動影響的標簽作以下操作:
1、clear:both;
2、clear:right; clear:left;
3、width:100%;overflow:hidden;
2015-12-07
浮動:可實現塊級元素橫向排列
1、3個屬性值:left-左浮動,right-右浮動,none-不浮動
2、設置了浮動的元素,仍舊處于標準文檔流中,意味著會占據標準文檔流中的空間,對周圍的元素產生影響
3、當元素沒有設置寬度值,而設置了浮動屬性,元素的寬度隨內容的變化而變化(沒內容時直接縮到浮動的那一邊,看不見了)
4、當元素設置浮動屬性后,會對相鄰的元素產生影響,相鄰元素特指緊鄰后面的元素
1、3個屬性值:left-左浮動,right-右浮動,none-不浮動
2、設置了浮動的元素,仍舊處于標準文檔流中,意味著會占據標準文檔流中的空間,對周圍的元素產生影響
3、當元素沒有設置寬度值,而設置了浮動屬性,元素的寬度隨內容的變化而變化(沒內容時直接縮到浮動的那一邊,看不見了)
4、當元素設置浮動屬性后,會對相鄰的元素產生影響,相鄰元素特指緊鄰后面的元素
2015-12-07
請詳細觀看盒子模型的立體圖片(2-2小節 07:58),從第一層到第五層依次為:border、content+padding、background-image、background-color、margin。
使用float屬性的元素會影響緊挨其的下一個元素。例如塊級元素會變成類似行級元素的排布方式。也可以用來實現3列排布,所謂的劇中排布,需要通過設置3個元素的間距等來進行操作,而不是用margin。
2015-12-06