前端每日一小练1----购物的评价区

本次的demo是为了熟悉盒子模型中的间距margin和填充padding,特别是block和inline中比较特殊的地方。

需要注意的几点：

1.区块元素以div为例，在不浮动的一般情况下，两个相邻的div都设置了margin,那么它们之间的间距会合并，合并后的间距是两者中值较大的一个。

2.内联元素没有上下margin;并且左右的margin值不会合并；

3.内联元素的上下padding会挤占该元素的上下相邻元素的空间

以下是本次demo的代码：

1.本次demo的结构（纯HTML）：

<div class="comment">
		<div class="topic">
			<div class="star">
			</div>
		</div>
		<p>
			<span>标  签：</span>
			<b>比洗衣粉好</b>
			<b>去污能力强</b>
		</p>
		<p>
			<span>心  得：</span>
			<span>买了几次了，挺好用的，洗的衣服很干净，以后就它了！</span>
		</p>
		<p>
			<span>购买日期：</span>
			<span>2014-12-01</span>
		</p>
		<div class="btn">
			<span>有用(3)</span>
			<span>回复(3)</span>
		</div>
	</div>
	<div class="page">
		<a href="#" class="current">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">6</a>
	</div>

2.本次demo的CSS部分：

.comment{
		width:800px;
		height:160px;
		border:1px solid #ccc;
		padding:10px 15px;
	}
	 .topic{
		border-bottom:1px solid #ccc;
		padding-bottom:5px;
	}
	.topic .star{
		width:76px;
		height:15px;
		background:url(img/iconlist_1.png) no-repeat -108px -238px;
	}
	.comment p b{
		padding:4px 10px;
		background-color:#ffd0dd;
	}
	.btn span{
		border:1px solid #ccc;
		padding:5px 10px;
		margin-right:10px;
		background-image:linear-gradient(to top,#ccc 50%,#fff 100%);
	}
	.page{
		margin:10px;
	}
	.page a{
		padding:3px 10px;
		border:1px solid #ccc;
		border-radius:6px;
	}
	.page a:hover{
		color:#fff;
		background-color:#0ef;
	}
	.page .current{
		background-color:#fff;
		border:0;
	}

3.本次demo遇到的问题：

在实现评价框与页码的间距的时候，没有考虑到内联元素的上下padding挤占的问题，导致在浏览器显示的时候，看不出间距，原因在于，设置的padding的top值偏大，使得a的高超出了.page的范围，挤占了.page的间距，解决：将margin值增大，减小padding的top值。

出现问题的页面截图：

代码部分截图：

4.本次demo的最终效果图: