发表于： 2016-07-18 21:45:59
1 1331
今天完成的事情：由于是零基础，之前花了几天时间把head first的html+css看了下，然后又浪了几天，今天才开始做任务1。
学了display属性和float属性。
写好了九宫格的代码。
大概了解了Nginx是个什么东东。
明天计划的事情：完成任务1剩下的部分。
遇到的问题：
1.下载了示例的九宫格图片，但是不知道九宫格的具体大小尺寸啊……（难道就是自己随便编吗？）还有九宫格的颜色也不能确定到底是哪一种啊……（凭感觉选一个差不多的？）对了，还有圆角的大小，也是随便编的数……
请老师解答正确的做法？
2.写代码的时候，先用的display属性。
测试的结果，IE浏览器各小方块横向的间距比纵向的间距要大一些，火狐浏览器则是一样大。而且，这里我并没有设定box的margin，这个间距貌似是默认生成的。由于不知道这个默认间距的大小，所以没办法用负的margin值把这个间距消除掉。然后就不知道该怎么办了……
具体代码如下：
***
<html>
<head>
<title>task1</title>
<style type="text/css">
.box{
width:100px;
height:100px;
border-radius:10px;
background:#ff8800;
display:inline-block;
}
</style>
</head>
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
***
然后就只有尝试用float属性来做。
这个测试的结果就比较好了，没有发现什么问题。
最后我发现display和float的区别在于，当用display把block变成inline-block之后，虽然块元素会按行排列，但是，每两个块元素之间会有一个默认的间距（即使设定块元素的margin为0），而且在不同的浏览器中，这个间距的大小也不一样。
而用float的话，两个块元素如果没有设定margin（margin为0），则会紧挨着排列，如果设定了margin，则会根据设定的数值来产生间距。
请老师解答，如果用display的话，应该怎么做呢？
最后用float写的具体代码如下：
***
<html>
<head>
<title>task1</title>
<style type="text/css">
.box{
width:400px;
height:400px;
margin:0 auto;
}
.box1{
width:32%;
height:32%;
margin-right:2%;
margin-bottom:2%;
border-radius:10px;
background:#ff8800;
float:left;
}
.box2{
width:32%;
height:32%;
background:#ff8800;
border-radius:10px;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
***
收获：在实际编写代码的过程中，对各个属性的了解会更加深入，会遇到看书的时候完全没想到的问题，而发现、解决问题的过程其实是很爽的……
返回列表
评论