想问的是为什么红色框框和灰色框框之间有条缝隙,我用浏览器查看发现没有项目占着那个位置,但是就是有个空隙在中间。
html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>My First Website</title>
</head>
<body>
<header>
<nav class="clearfix"> <!--导航开始-->
<div class="logo c1">FIRST</div>
<div class="items c2">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</div>
</nav>
<div class="inner">
<h1>My First Website</h1>
<div class="h1-sub">
16.11.09
</div>
</div>
</header><!--导航结束-->
<div class="content"><!--内容开始-->
<div class="contanter">
<div class="story-item">
<h2>第一个只用了html和css的网站</h2>
<div class="summary">用了只是学了两三天的技能来实现一个网页的布局,看似简单却一点都不容易,margin的问题真的很多,div也是一个大问题,主要是要理解选择器之间的关系。
</div>
<div class="info">16.11.10|作者:Chan|阅读:1</div>
</div>
</div>
</div><!--内容结束-->
<footer><!--页尾开始-->
</footer><!--页尾开始-->
</body>
</html>
css的代码
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1{
margin: 20px;
}
ul{
margin: 0;
padding: 0;
}
.c1,.c2{
position: relative;
float: left;
}
.c1{
width: 16.666666%;
}
.c2{
width: 83.333333%;
}
.clearfix:before
{
content: " ";
display:table;
}
.clearfix:after
{
content: " ";
display:table;
}
.logo{
font-size: 20px;
padding: 18px;
font-weight: 900;
color: #ddd;
}
header{
min-height: 350px;
background-color: #aaa;
}
nav{
background-color: #333;
}
nav .items ul{
float: right;
padding-right: 20px;
}
nav ul li{
list-style: none;
display: inline-block;
}
nav ul li a{
display: inherit;
text-decoration: none;
padding: 20px 10px;
color: #fff;
}
/*nav end*/
.inner {
width: 400px;
margin: 150px auto 20px;
position: relative;
text-align: center;
}
.h1-sub{
font-weight: 900;
text-align:right;
padding: 20px;
}
.contanter{
width: 1000px;
margin: 0 auto;
background-color: red;
}
.story-item h2{
font-size: 30px;
margin: 10px 0;
font-family: Microsoft Yahei;
color: #444;
}
.story-item .summary{
font-size: 18px;
font-family: Microsoft Yahei;
width: 500px;
font-weight: 100;
color: #777;
}