css佈局和定位總結

#1，佈局——盒子模型 （1）盒子模型的組成部分： 盒子模型—網頁佈局的基石,由4部分組成，邊框（border），外邊（margin） 內邊距（padding），盒子中的內容（content） 四個值：上右下左，三個值，上（左右）下，一個值。 ###設置img的盒子模型:設置邊框，設置上下，左右寬度。

css: .book img{border:1px solid #b1adaa; margin:10px 18px;} html:

<div class="content book"> <a href="#"><img src="images/book1.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book2.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book3.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book4.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book5.jpg" width="80" height="80" /></a> <a href="#"><img src="images/book6.jpg" width="80" height="80" /></a> </div>

//div盒子模型裏面佈局,例如設置邊框padding .content{background:#eff9f9; padding:20px 50px 15px; border:4px solid #badbdb;} .book{background:url(../images/t_book.gif) no-repeat #eff9f9;}

#2,自動居中一列布局

//設置id爲wrap的盒子模型上下爲0，左右居中。auto根據瀏覽器的不一樣設置左右的寬度不相同。 wrap{width:770px; margin:0 auto;}

#3,浮動佈局，左中右佈局。 浮動元素會影響後面的元素、

當元素設置浮動屬性之後，會對相對相鄰的元素產生影響，緊鄰的元素緊鄰在其後面。

###清除浮動的方法， ####（1）經常使用clear：both，clear：left或者clear：right；(2)設置：width：100%（或者固定寬度）overflow：hidden;

#4，絕對定位佈局；position屬性：4個屬性值：static(靜態)，relative（相對），absolute（絕對）,fixed（固定位置）； ###relative：

1 相對於自身原有位置進行偏移2仍處於標準文檔流中3 隨即擁有偏移屬性和z-index屬性

###絕對定位：

1創建了以包含塊爲基準的定位2徹底脫離了標準文檔流3 隨即擁有偏移屬性和z-index屬性