``对于盒子内外边距的认知
在这里插入代码新闻.html
<textarea readonly="readonly" name="code" class="c++">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 100px auto;
border: 1px solid gray;
border-top: 3px solid #87CEEB;
}
a {
text-decoration: none;
}
.title {
width: 570px;
margin: 0px 15px;
}
.title h2 {
height: 35px;
line-height: 35px;
text-align: center;
font-weight: normal;
font-size: 22px;
overflow: hidden
}
.nav {
margin: 20px auto;
width: 570px;
font-size: 12px;
text-align: center;
}
.new-1,.new-2,
.new-4,.new-5,.new-6
{
padding: 0px 7px;
height: 20px;
line-height: 20px;
display: inline-block;
color: grey;
}
.new-2,.new-3 {
color: darkred!important;
}
a:hover,.new-3:hover {
text-decoration: underline;
}
.jpg {
text-align: center;
color: #808080;
font-size: 12px;
}
.tp {
margin: 0px 30px;
width: 540px;
}
.zhushi {
padding-top: 8px ;
display: inline-block;
}
.new {
width: 540px;
margin: 20px 30px;
text-indent: 2em;
font-size: 13px;
line-height: 23px;
}
.box {
width: 540px;
margin: 0px 30px;
border: 1px solid #808080;
border-style: dotted;
font-size: 13px;
}
.sj{
margin-bottom: 10px;
font-size: 12px;
color: #808080;
text-align: right;
}
.yindao{
width: 540px;
margin: 0px 30px;
font-size: 14px;
margin-bottom: 10px;
}
a{
display: inline-block;
}
.footer{
width: 500px;
height: 30px;
margin: 0px 50px;
margin-bottom: 30px;
border: 1px solid blue;
background-color: #87CEEB;
line-height: 30px;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<h2>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h2>
</div>
<div class="nav">
<span class="new-1">2015年08月08日18:19</span>
<a href="#" class="new-2">新浪体育</a>
<span class="new-4">微博</span>
<a href="#" class="new-6">我有话说<span class="new-3">10,370</span>人参与</a>
<a href="#" class="new-5">收藏本文</a>
<hr />
</div>
<div class="jpg">
<img src="img/img.jpg" class="tp" />
<span class="zhushi">鲁能热身赛16-0大胜鲁能热身赛16-0大胜</span>
</div>
<p class="new">
新浪体育讯 北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源均取得进球。
</p>
<div class="box">
<a href="#">鲁能泰山足球新闻</a>
鲁能泰山足球新闻：#鲁能泰山#鲁能热身赛16-0击败一支业余球队，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源取得进球。
<div class="sj">2015-08-08 17:54 来自百度浏览器 转发(49) | 收藏 | 评论(50)</div>
</div>
<p class="new">
由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错。
</p>
<p class="new">
由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错。
</p>
<div class="yindao">
<strong>文章关键词：</strong>
<a href="#">中超 </a>
<a href="#">鲁能</a>
<a href="#">阿洛伊西奥</a>
<a href="#">蒙蒂略</a>
</div>
<div class="footer">
<a href="#">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</a>
</div>
</div>
</body>
</html>
</textarea>
**对于初步布局的认识**``
