#1，布局——盒子模型（1）盒子模型的组成部分： 盒子模型—网页布局的基石,由4部分组成，边框（border），外边（margin） 内边距（padding），盒子中的内容（content）四个值：上
#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属性
