[散修弟子]CSS-1049|2016年04月18日的日报-技能树.IT修真院

发表于： 2016-04-18 22:05:09

4 1874

1.已经解决的问题：

ngnix环境配置，参考如下:https://www.zhihu.com/question/41430703

2.使用float和display两种方法画出了九宫格，代码如下，学到的知识写在注释里：

2.1 float方法：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <title>jiugongge</title>
       <link type="text/css" rel="stylesheet" href="renwu1.css">
   </head>
   <body>
       <div id="box">
               <div class="inside"></div>
               <div class="inside"></div>
               <div class="inside"></div>
               <div class="inside"></div>
               <div class="inside"></div>
               <div class="inside"></div>
               <div class="inside"></div>
               <div class="inside"></div>
               <div class="inside"></div>
           </div>
       </div>
   </body>
</html>

#box{
   width: 330px;
   height: 330px;
   margin: auto;/*将九宫格居中*/
   }
.inside{
   width: 100px;
   height: 100px;/*格子的长度和宽度，如果不指定，什么也不会显示*/
   background-color: #ff7f00;/*格子的颜色*/
   border-radius:5px;/*格子的圆角*/
   margin: 5px ;/*格子的外边距,在浮动的情况下，垂直外边距没有合并，两个格子之间左右间距是5+5 两个格子上下边距也是5+5.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。*/
   float: left;/*如果不向左浮动的话，会显示九个格子竖着一排*/
}

2.2display方法

<!DOCTYPE html>

<html>

<head>

<title>jiugongge1.1</title>

</head>

<body>

</div>

</div>

#box{
   width: 350px;
   height: 350px;
   margin: auto;
   font-size: 0;/*使用inline-block会出现换行符间隙的问题，由于空格符本质上也是字符，所以使文字宽度为0，可以解决*/
   }
.one{
   display: inline-block;
}
.inside{
   width: 100px;
   height: 100px;
   background-color: #ff7f00;
   border-radius:5px;
   margin:10px 5px 10px 5px;/*这与float不同，左右边距为5+5. 上下边距合并为10*/
   }

如果没有加 font-size：0；的话，会出现下面的情况，仔细观察：上下边距是10，但左右的间隙比5+5要大。参考网址如下：

http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/

（话说，这两个代码的字体我怎么也调不了一样，真是逼死我了要）